Community Forums › Forums › Archived Forums › Design Tips and Tricks › Show Different LOGO image on Specific Page
- This topic has 7 replies, 2 voices, and was last updated 10 years, 6 months ago by Marcy.
-
AuthorPosts
-
October 7, 2013 at 12:50 pm #65693PhilMurrayParticipant
hi,
I there any way to show a different site-header LOGO on specific pages?
i am using a child theme that I developed from the genesis sample 2.0.1
thanks
Phil
October 7, 2013 at 2:08 pm #65701MarcyParticipantFirst in your WordPress dashboard you would hover over the post or page and then look way down at the bottom of your browser to see a link. You will see something like:
...post=xxxx... where the x's are numbers
(You can also find this by viewing source or using Firebug to look at the body.)Then in style.css, find this section:
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
padding: 0;
}.header-image .site-title a {
float: left;
min-height: 164px;
width: 100%;
}Just below the code above, add a new selector:
.postid-xxxx .header-image .site-header .wrap {
background: url(images/new-logo.png) no-repeat left;
padding: 0;
}You can name the image anything you like and you can add it to your /images folder with ftp or upload it with the Media uploader and then get the complete url to the image.
Marcy | Amethyst Website Design | Twitter
October 7, 2013 at 2:33 pm #65705PhilMurrayParticipantThis reply has been marked as private.October 8, 2013 at 12:56 am #65801PhilMurrayParticipanthi Marcy
thanks a lot for this – i am having some problems with it so far though.
the page i want to have a different header on has an ID of 145
so i added the following to my CSS;
.postid-145 .header-image .site-header .wrap {
background: url(images/spm-logo1.png) no-repeat left;
padding: 0;
}i uploaded the logo but the original site logo is still showing up on the page;
http://www.banguniverse.com/sirpatrickmoore/
is there something i am missing?
thanks
Phil
October 8, 2013 at 8:11 am #65830MarcyParticipantNo, you aren't missing something; I am. On the page you using, it should be .page-id-145 which is what I thought before I posted, but I checked the theme before posting, and saw the other. Sorry about that.
.page-id-145 .header-image .site-header .wrap {
background: url(images/spm-logo1.png) no-repeat left;
padding: 0;
}The browser cache may need to be cleared before you see the new image.
Marcy | Amethyst Website Design | Twitter
October 8, 2013 at 9:16 am #65839PhilMurrayParticipantThanks for this Marcy -- still having a problem with it even after clearing my browser cache.
i added:
.page-id-145 .header-image .site-header .wrap {
background: url(images/spm-logo1.png) no-repeat left;
padding: 0;
}and the logo is in the correct place on the server - but i still see the default logo when i browse to the page;
http://www.banguniverse.com/sirpatrickmoore/and the page id is definitely 145
do i need anything added into functions.php to allow this to work maybe?
thanks again
Phil
October 8, 2013 at 12:02 pm #65868PhilMurrayParticipantFound the solution;
The rule should be
.page-id-145.header-image .site-header .wrap {
background: url(images/spm-logo1.png) no-repeat left;
padding: 0;
}without a space between the 2 body classes.
thanks to Marcy and Jennifer for solving this
Phil
October 8, 2013 at 3:50 pm #65889MarcyParticipant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.