2

I'm trying to use a different Logo on each of my Wordpress pages. I have tried adding this to my css file, but the old logo is still showing underneath it:

.page-id-13072 .full-center #logo.has-img a > img {
    position: inherit !important;
    left: 0;
    top: 100px;
    width: 450px;
    z-index: 99;
    max-width: 100%;
    background: url(http:///LogoPink.png) no-repeat;
    }
4
  • 1
    Hi you can use if condition in header.php insdead of css. Like: is_page(13072){ //your condition go here; } Oct 26, 2015 at 5:26
  • Try to avoid using !important. It always causes problems down the road. As for the logo, this CSS only points to one image... what makes you think it would show a different image on different pages? Oct 26, 2015 at 5:28
  • @SverriM.Olsen I was testing this for only one of pages to display a certain image Oct 26, 2015 at 5:32
  • It's a wrong approach instead of adding background to your image replace the image src with the background url and don't use any backgrounds. Handle it from backend code rather than front end. Oct 26, 2015 at 5:33

3 Answers 3

1

Instead of using css you can make use of wordpress condition tags . Locate the php file which has the logo image usually it is header.php

<?php
    $logo_img = 'default'; 
    if (is_page('about-us')) {
        $logo_img = 'logo1'; 
    } elseif (is_page('team')) {
        $logo_img = 'logo2'; 
    } 
?>

Assuming you have logo1.png logo for about-us page , logo2.png for team page and default logo is default.png.

<img src="/images/logo<?php echo $logo_img; ?>.png">

for css only you can try

 .page-id-13072 .logo a {

   background: url(images/logopink.png) no-repeat; 
 }
0

If you are using page templates in your theme, you can achieve this by creating different header.php files and calling each of the headers using conditional tags.

Each of the header.php files will have a different name like header-about.php, header-contact.php header-blog.php

Now inside your page template you should use the ifelse statement to now call the headers as follows:

if(is_page_template('about.php')){

    get_header( 'about' ); // Calls the about page header

   } 
        elseif(is_page_template('contact.php')){

    get_header('contact'); // Calls the contact page header

   } 
      elseif(is_page_template('blog.php'){

   get_header('blog'); // Calls the about page header

   } 
  else{

   get_header();// Calls the default header is any other page is created

   }

Each of these headers will have the different logo and different styles. This approach makes it easy for future updates since you will only have to edit the specific header.php file.

-1

Please don't try to override image with it's background as it will not happen. Why don't you just change image source? If that's not the case instead of img use div with asssigned width and height, based on scenario change its class and background-image with it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.