I have uploaded a file as my main logo within the theme settings but would like a different logo on the main page. The theme I am using has a custom css option within the theme settings, can I use custom css to only change it on the front page and not the rest of the site?
Theme: /?theme=bounce-bp
I have uploaded a file as my main logo within the theme settings but would like a different logo on the main page. The theme I am using has a custom css option within the theme settings, can I use custom css to only change it on the front page and not the rest of the site?
Theme: http://demo.ghostpool/?theme=bounce-bp
Share Improve this question asked Jan 24, 2013 at 17:16 user26480user26480 131 silver badge3 bronze badges 2- 1 Your question needs to be considerably more specific. Please show us the code for the logo in index.php – AndrettiMilas Commented Jan 24, 2013 at 17:22
- Sorry, here are my php files: index php- pastebin/YEMnpR2g header php- pastebin/n7vdZdZ3 – user26480 Commented Jan 24, 2013 at 17:49
4 Answers
Reset to default 0It looks like the theme designer has a means for you to use a different logo on the homepage. Looking at your header.php on lines 83-93.
If your theme detects that this is the front page, the title is enclosed with an <h1> tag, otherwise it is enclosed in a <div>. Both have id='logo'.
If you can add custom css, you could use css image replacement to replace this <h1> tag with a different image on your homepage.
at header.php you can found this tags:
<div id="logo" style="">
<span class="logo-details">Bounce | Example Homepage 1</span>
<a href="http://demo.ghostpool/bounce" title="Bounce"><span class="default-logo"></span></a>
</div>
You just need access the a style-colorchoose.css at line 43 and change image path at class .default-logo, if you inspect using chrome developer tool you can find this class calling a logo from CSS using this class I mentioned.
Know if this theme offer a solution to change logo it's other way they cannot help you.
Contact me if you need a help.
There are many ways to do this. Let's go.
1. Just Header File
Open your header.php and find when logo is displaying and add conditional home tag. Something like this:
<?php if(is_home()) { ?>
<!-- your custom logo for home here -->
<?php } else { ?>
<!-- your theme logo function here -->
<?php } ?>
2. Using CSS Background Image
Open your header.php and go to tag. Add the body_class() function.
<body <?php body_class($class); ?>>
Now, you can customize any element on home with CSS. For Example:
body.home .default-logo {background-image:url(your-custom-logo-for-home.jpg) !important;}
You should be able to use vanilla CSS. I wasn't able to reach your site to give you the exact CSS. But, here's an example using the Twenty Twenty theme. All the WordPress themes I work with follow this pattern.
/* Twenty Twenty */
/**
* Hide the default logo.
*
* For posts use .postid-1 format.
*/
.page-id-14 .custom-logo-link img {
display: none;
}
/**
* Drop in a different logo.
*
* The site link is respected.
*/
.page-id-14 .custom-logo-link {
background-image: url(https://balistreetphotographer.files.wordpress/2019/02/balistreetphotographer-logo-2-slashes-65.png);
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: relative;
height: 65px;
width: 65px;
}
Obviously change the page/post ID, logo URL, and logo dimensions to yours.
Here's how to get the page/post ID.
Shout if you have any questions :-)