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?
2
-
1Your question needs to be considerably more specific. Please show us the code for the logo in index.php– AndrettiMilasJan 24, 2013 at 17:22
-
Sorry, here are my php files: index php- pastebin.com/YEMnpR2g header php- pastebin.com/n7vdZdZ3– user26480Jan 24, 2013 at 17:49
Add a comment
|
4 Answers
It 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.com/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.
-
Yes, the theme offers a solution to upload a logo which I have uploaded already. The problem I have is that i need a different logo on on only 1 page(homepage). I found a css file which references the themes colors and it shows this: /* Logo */ .default-logo { background-image: url(lib/images/logo-darkblue.png); } Jan 24, 2013 at 18:15
-
But this action change a logo every pages. To change only to home, you need saw how class is applied to home, using a inspector at chrome you can saw all classes applied to body and using this you can add a exception adding line after default-logo this way:
.classe-home-used .default-logo { background-image: url(http://yoursite.com/wp-content/uploads/2012/01/logo-onlyhome.png); }Jan 24, 2013 at 18:25 -
That darkblue.png is the default logo for the theme, it was replaced when I uploaded a logo using the option in the theme settings. Here is the site: are.massideation.com Jan 24, 2013 at 18:30
-
The
.default-logoclass only gets applied if you haven't specified an image in the theme options panel.– cpilkoJan 24, 2013 at 18:30
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.com/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 :-)
