Different logo on homepage

2 Views

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.com/?theme=bounce-bp

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. 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.

  2. 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.

  3. 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;}

  4. 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 🙂