Replace Site Title with Business Logo

  • Resolved pprasatik

    (@pprasatik)


    8 years, 11 months ago

    Sela Child Theme: Custom Static Home Page with Business Logo in lieu of Site Title & Tagline — I’ve reviewed a resolved question similar to this issue but it primarily pertained to a Front Page which displayed posts in a traditional Blog format. My site will not have a Blog format. The landing page is a Custom Home Page set as the Static Page. The website is for a simple start-up business. I need the business logo placed either top-left or top-center. I’ve created a Sela Child Theme with a Custom Home Page set as a Static Page. How can I replace the site title & tagline with a business logo? I am not opposed to placing additional text for a site title or tagline, but I do need to place a business logo at the top. The following is the domain name: https://www.atimeforallthings.com. Inspect coding belowe:

    “<body class=”home page page-id-476 page-template-default logged-in admin-bar not-multi-author no-sidebar comments-closed customize-support”>
    <div id=”page” class=”hfeed site”>
    <header id=”masthead” class=”site-header” role=”banner”>
    Skip to content

    <div class=”site-branding”>
    <h1 class=”site-title”></h1>
    </div><!– .site-branding –>”

Viewing 14 replies - 1 through 14 (of 14 total)

  • Hi there!

    You can add the logo function by installing and activating the Jetpack plugin. Once you have it, go into Customize > Site Title, and you’ll see an area to add a logo image there.

    Let me know if you have any questions! ??

    Thread Starter pprasatik

    (@pprasatik)

    Oh, Sarah ~ The logo inserted! However, either the pxls of the padding or the margins are extremely high because the white spacing above & below the logo is very wide. Either I need to reduce the size of my logo or change padding or margins pxls, right?

    Great! ??

    The padding is coming from the entire site branding area up top, rather than just the logo. I found this in the CSS: 

    .site-branding {
     padding: 3em 0 36px;
}

    If you add that into a CSS editor (like the one you can use with Jetpack by activating the Custom CSS module then going to Appearance > Edit CSS) and adjust the numbers you see there, you’ll be able to reduce the padding around the whole top area.

    Let me know how it goes!

    Thread Starter pprasatik

    (@pprasatik)

    In both the Dashboard/Appearance/Edit CSS and the Jetpack/Settings/Custom CSS Editor (which redirects to CSS Appearance) this is how it reads:

    /*
    Welcome to Custom CSS!

    To learn how this works, see https://wp.me/PEmnE-Bt
    */

    Should the following be added directly below the above with a space in between?

    .site-branding {
    padding: 3em 0 36px;
    }

    Thread Starter pprasatik

    (@pprasatik)

    Please recall, I am using a child theme I created ?? so all of the parent theme’s coding is apparent ??

    Thread Starter pprasatik

    (@pprasatik)

    Correction: Please recall, I am using a child theme I created ?? so all of the parent theme’s coding is NOT apparent ??

    Thread Starter pprasatik

    (@pprasatik)

    Sarah, I discovered how to make the padding change but it does not hold. Hmmm?

    Thread Starter pprasatik

    (@pprasatik)

    Sarah, I discovered how to make the padding change but it does not hold. Hmmm?

    Thread Starter pprasatik

    (@pprasatik)

    How do I save the preview changes? When I look at the CSS change is reads: “Preview: Changes must be saved or they will be lost”

    Thread Starter pprasatik

    (@pprasatik)

    I have researched and I am suppposed to have a closing bracket. I have a closing bracket. What am I doing wrong, Sarah?

    Thread Starter pprasatik

    (@pprasatik)

    Finally figured it out! Thank you, Sarah ~

    Catching up this morning… glad you got it sorted out! ??

    Thread Starter pprasatik

    (@pprasatik)

    Just in case anyone else needs to know how I resolved my issue using Sarah’s instructions, I changed the padding from “3em 0 36px” to “1em 0 3px”

    Thanks for sharing the solution! ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Replace Site Title with Business Logo’ is closed to new replies.