Twenty Twelve
[resolved] How to add right aligned logo to masthead (6 posts)

  1. kintopp
    Posted 2 years ago #

    I'm trying to add a 52x52 image (top of site title to bottom of the site's description) on the right edge of the masthead. In other words, much like the effect produced by this childtheme code I found in the forum, but 52x52 and on the right side of the masthead instead:

    #masthead hgroup { position: relative; }
    #masthead hgroup:before {
        content: url("http://dummyimage.com/72x72/39de33/0011ff.png");
    	display: block;
    	width: 72px;
    	height: 72px;
    	position: absolute;
    .site-title, .site-description { padding-left: 96px; }

    I haven't been able to find a previous post that addressed this.

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Do you have a child theme set up? That's the first step in modifying the header.php file.


    Then post a link to your site with also a link to the image (in your media library) you want to put in that location.

  3. kintopp
    Posted 2 years ago #

    Thank you for the very quick response.

    With the help of a friend, I've now got a solution that's almost accomplishes what I had in mind. In the child theme / custom css area we added:

    #masthead hgroup {
    	background-image: url("http://kanjialive.com/wp-content/uploads/2013/10/fan_logo_104.png");
    	background-position: right center;
    	background-size: 52px 52px;
    	background-repeat: no-repeat;

    This centers the logo vertically in hgroup and would be perfect if the logo were 72x72. However, what I'd ideally like is for the logo to be placed so that its top aligns with the dot on the "j" in Kanji alive and the bottom aligns with the baseline of the site description. That height corresponds approximately 52px. Here's a mock-up to better illustrate this: https://dl.dropboxusercontent.com/u/1667511/site-logo.png

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    I'd need to see the actual site to help more with something like this.

  5. kintopp
    Posted 2 years ago #

    Sorry, I should have been more explicit. The site was referenced obliquely through the code example above. It's http://kanjialive.com.

  6. kintopp
    Posted 2 years ago #

    I think I'm going to just employ a simple graphical workaround to get this done: create a 72px high white background and then overlay my 52px high logo onto it appropriately. Then save that as a PNG for use on the site.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic