Replace Site Title with Business Logo

  • Resolved pprasatik

    (@pprasatik)


    10 years 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: http://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)
  • Sarah Blackstock

    (@sarahblackstock)

    10 years ago

    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)

    10 years ago

    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?

    Sarah Blackstock

    (@sarahblackstock)

    10 years ago

    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)

    10 years ago

    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 http://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)

    10 years ago

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

    Thread Starter pprasatik

    (@pprasatik)

    10 years ago

    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)

    10 years ago

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

    Thread Starter pprasatik

    (@pprasatik)

    10 years ago

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

    Thread Starter pprasatik

    (@pprasatik)

    10 years ago

    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)

    10 years ago

    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)

    10 years ago

    Finally figured it out! Thank you, Sarah ~

    Sarah Blackstock

    (@sarahblackstock)

    10 years ago

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

    Thread Starter pprasatik

    (@pprasatik)

    10 years ago

    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”

    Sarah Blackstock

    (@sarahblackstock)

    10 years ago

    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.