Use different logos for Homepage, Pages and Posts/Twenty Seventeen theme

Will it be a decorative image or will it contain information?

Decorative (photographic), with a different version of the company logo.

If it’s a decorative image you can include it with CSS; which gives you better control as to which pages it should appear on.

e.g.:

body:not(.homepage).custom-logo-link {
    position: relative;
}

/* Hide the logo image */
body:not(.homepage).custom-logo-link img {
    display: none;
}

/* The new image should live inside your Child Theme */
body:not(.homepage).custom-logo-link:before {
    background-image: url('path-to-image');
    background-repeat: no-repeat;
    bottom: 0;
    content: '';
    height: 188px;
    left: 0;
    position: absolute;
    width: 200px;
}

Thank you Andrew! I am a novice with CSS. Where do I insert the code (which CSS, or PHP file)? Does it matter where I place it in the file? Do I need to move over any other supporting CSS, or PHP files (ie “header.php, or style.css)?

Will the graphic (banner) span the full width of the browser window?

Thank you so much for your help.

First start with putting the image inside your Child Theme folder at the root level (where the style.css file is).

Then at the bottom of your Child Theme style.css file add the above code with the following modifications.

Change this:

    background-image: url('path-to-image');

To this:

    background-image: url('name-of-your-file.jpg');

Will the graphic (banner) span the full width of the browser window?

No, it will only replace the logo.

No change. The landing pages were not affected. I must have missed something. I moved the image to the child theme (root level) and added the code to my style.css file.

I don’t know if this is important, but yours are the only lines of code in my child theme’s style.css file. They were added directly beneath the Theme Name, Description, Author etc, info.

Could you put the code back into your Child Theme style.css file? I will then be able to explore why it’s not working.

Yes. Its back now.

Try this instead:

 

body:not(.homepage) .custom-logo-link {
    background-image: url('/wp-content/themes/twentyseventeen-child/kerbd_logo_update-bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 85px;
    width: 180px;
}

/* Hide the logo image */
body:not(.homepage) .custom-logo-link img {
    display: none;
}

• This reply was modified 6 years, 8 months ago by Andrew Nevins.

Worked — but it also changed the logo on the Homepage. I want keep the default logo for the Homepage, and use the new one for all of the landing Pages.

Sorry, try this:

body:not(.home) .custom-logo-link {
    background-image: url('/wp-content/themes/twentyseventeen-child/kerbd_logo_update-bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 85px;
    width: 180px;
}

/* Hide the logo image */
body:not(.home) .custom-logo-link img {
    display: none;
}

You Rock! Works perfectly. Thanks Andrew.