WordPress.org

Support

Support » Themes and Templates » Add different logo in each page

Add different logo in each page

  • I’m trying to add different logos in header of each page but I don’t know how to use page-id to get them to work.

    In CSS I have

    style.css:

    logo{
    float:left;
    }
    .logo a{
    width:240px;
    height:99px;
    display:block;
    background:url(images/main-logo.gif) no-repeat;
    margin-top:-4px;
    }
    .logo span{
    display:none;
    }

    Header.css:

    <div id=”head”>
    <div class=”wrap”>

    <div class=”logo”>
    /
    </div>
    </div>

    PLEASE HELP! Would really appreciate it 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • Michael

    @alchymyth

    Forum Moderator

    what theme are you using?
    does the theme use body_class() ?

    if yes:

    .page-id-23 .logo a { background: url(images/page-23-logo.gif) no-repeat; }

    It custom theme and there is no body_class() in style.css

    Add body_class to your <body> HTML tag and you can style individual pages as mentioned above.

    Michael

    @alchymyth

    Forum Moderator

    without body_class() you might need to use a lot of conditional statements in the head section of your theme;
    http://codex.wordpress.org/Function_Reference/is_page

    example:

    <style type="text/css">
    <?php if( is_page(23) ) { ?>
    .logo a { background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/page-23-logo.gif) no-repeat; }
    <?php } elseif( is_page(77) ) { ?>
    .logo a { background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/page-77-logo.gif) no-repeat; }
    <?php } ?>
    </style>

    http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

    I just checked my header.css file and body_class is there in the body HTML tag but it’s not working.

    Do I have to add the code in style.css or header.css?

    .page-id-23 .logo a { background: url(images/page-23-logo.gif) no-repeat; }

    Michael

    @alchymyth

    Forum Moderator

    Do I have to add the code in style.css or header.css?

    this would go into style.css – obviously with the real page id in the code:

    .page-id-23 .logo a { background: url(images/page-23-logo.gif) no-repeat; }

    I added the code in the style.css but it’s not working

    .page-id-57 .logo a{
    width:240px;
    height:99px;
    display:block;
    background:url(images/siem-logo.jpg) no-repeat;
    margin-top:-4px;
    }
    .page-id-57 .logo span{
    display:none;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    What isn’t working, any styling at all? Have you checked your stylesheet for syntax errors?

    Still getting default logo and there is no errors in the syntax.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    You need to give us more to go on, like a link to the webpage.

    Michael

    @alchymyth

    Forum Moderator

    where exactly have you added the new styles?

    there is no trace of that in style.css of the site linked with your username.

    also, the alternative logo image does not seem to be in its expected location.

    The site is on my localhost. 🙁

    Michael

    @alchymyth

    Forum Moderator

    in this case, you are on your own with troubleshooting the styles 🙁

    occasionally, stylesheets are broken because of missing brackets or whatever; in this case styles lower down in the stylesheet don’t get applied.
    possibly, try moving the new style to the top of the stylesheet.

    Or you can upload your style.css and header.php to pastebin and give us a link.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Add different logo in each page’ is closed to new replies.
Skip to toolbar