• 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)
  • 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; }

    Thread Starter nbhambra

    (@nbhambra)

    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.

    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

    Thread Starter nbhambra

    (@nbhambra)

    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; }

    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; }

    Thread Starter nbhambra

    (@nbhambra)

    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;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter nbhambra

    (@nbhambra)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    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.

    Thread Starter nbhambra

    (@nbhambra)

    The site is on my localhost. 🙁

    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.