Support » Themes and Templates » Banner Header (Roll-over effect) and Sidebar HELP

  • Here is my problem:

    Roll Over
    See the header file? If you could notice, there are three icons right? facebook, twitter, and rss. What I want to do is to individually assign a link to each of them. Plus, I would also like to add a hover effect where each icon would be replaced with the same icon BUT with opacity 100% (to make it full colored). Any ideas?

    Thanks to all of you in advance.

    Here’s the header code at any rate:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
    <html xmlns=””>

    <head profile=”″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”all” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery-1.2.6.min.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/fx.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.easing.min.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.lavalamp.js”></script>

    <script type=”text/javascript”><!–//–><![CDATA-[//><!–
    sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls = document.getElementById(“menu”).getElementsByTagName(“li”);

    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=” sfhover”;
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);

    if (window.attachEvent) window.attachEvent(“onload”, sfHover);
    <?php wp_get_archives(‘type=monthly&format=link’); ?>
    <?php //comments_popup_script(); // off by default ?>

    <?php wp_head(); ?>
    <div id=”main”>
    <div id=”header”>
    <div id=”menubar”>
    <div style=”float:left; “>
    <ul class=”lavaLampNoImage” id=”A”>

  • /”>Home
  • <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>


    <div id=”logo”>
    <div class=”description”><?php bloginfo(‘description’); ?></div>

    <div id=”headerad”>
    <?php $ad3 = get_option(‘omg_ad3’); echo stripslashes($ad3); ?>
    <div id=”cmenubar”>
    <div id=”cmenu”>

      <?php wp_list_categories(‘sort_column=name&title_li=&depth=4’); ?>

    <!–/header –>

Viewing 15 replies - 1 through 15 (of 17 total)
  • you will get more responses if you post the site’s URL

    Sorry about that.

    The site URL is


    My header is one whole background that occupies the same space. I was planning to create an image map or whatever that could make the job easier.

    All I want is that when a user rolls-over an icon on the header (facebook, rss,twitter), another banner with the same icon (but with opacity 100% to make em look livelier) would be loaded instead.

    Do you think that would work? Any suggestions as to how to easily achieve such effect?



    Make your life simple and take the 3 icons out of the background image. You can do all you want to do using CSS. Use 3 separate icons.

    I would do it this way. (There is intentionally nothing as link text – we are going to use a background image and define the size of the A tag in the CSS, making the full image clickable.)
    put this code inside div id="header"

    <div id="social">
    <a id="facebook-link" href=" to facebook ..."></a>
    <a id="rss-link" href="...rss link..."></a>
    <a id="twitter-link" href="...twitter link..."></a>

    Then position div id="social" – add to CSS
    #social { position: absolute; left: 750px; top: 50px; }
    (the pixels are approximate – adjust)

    then set up the background images – use the actual image height and width:

    #social a#facebook-link {
    display: block;
    background: url(images/facebook_dimmed.jpg) no-repeat;
    height: 48px;
    width: 48px;

    repeat for the other two.

    Now set up the hover state for links:

    #social a:hover #facebook-link {
     background-image: url(images/facebook_full.jpg);

    repeat for the other two

    That should do it

    I’m attempting to do this as well.. However, the images aren’t actually rolling over for me. They are staying the same.

    I was close but not that close yet. hehe.

    I followed your instructions but It didn’t work out the way we expected. Please check my site to see what happened: It seems that the icons do not roll over and neither one of them have links either.

    Also, could we please have them horizontally? thanks

    @mordacity: I highly recommend you install the Firefox extension called Firebug, if you don’t have it, to help with debugging.

    When you click Firebug “Click element in page to inspect” button, point at your image. The CSS being applied will display in the right pane.

    The typical errors are, entering the wrong image name or filepath, or having the styling superceded by some other styling in the stylesheet. The CSS is displayed in the right pane in the order in which its being applied, top down. Sometimes a rule overrides the rule you want. When you point at the imagename in the CSS assignment, you should see a thumbnail of the image – if you don’t, the browser is not finding it.

    Other errors are incorrectly indicating the CSS tags/classes/ID’s the styling is supposed to be applied to.

    If you try this and really can’t find the solution, post the URL of the page on which you are having the problem.

    It’s pointing to both image locations. I’ve been staring at code all day, it’s possible I’m just completely missing it.


    I really apologize. I am a newbie with CSS and I just can’t seem to figure it out.

    I don’t see any a:hover assignments in your stylesheet.

    When I added this to your stylings (only in my browser)

    #social a:hover#facebook-link {
     background-image: url(images/facebook.png);

    The Facebook rollover worked fine. You need to add the equivalent for the other one also.

    the a:hover tells the browser to apply that styling when the mouse is hovering over the A link

    Ah ha, I see what’s wrong. Those hover tags are there, but there was a space between a:hover and #facebook-link 🙂 Thanks a ton!!


    Hi – You also are missing the hover links – see what I just wrote in the above response. You ARE very close.

    Yours should be

    #social a:hover#twitter-link {
    background:transparent url(images/twitter_full.jpg)

    to make them horizontal, add
    float: left;
    to the CSS for each of the 3 A tags you defined previously. you will need to add some margin also, to separate them:
    margin-right: 3px;
    Only the first two need the margin.


    I did the corresponding edits but I still get no hover image and no link 🙁

    LOL! Finally, I figured it out!

    a #logo was blocking the three icons from loading their css script! LOl

    Than you very much sir!

    Hello, I am having the same issue. I have a background image in the header and I need to add rollover buttons to it. The site is . Not sure where to write the css to make this happen. I also want to remove the tag line from the header.


Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Banner Header (Roll-over effect) and Sidebar HELP’ is closed to new replies.