WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Adding Logo to Left of Title/Subtitle (9 posts)

  1. MrSamNC
    Member
    Posted 11 months ago #

    I want to add our logo image to the left of where the title/subtitle are displayed. I do not want to replace them, just include the logo with them in the same area.

    Thanks!

  2. paulwpxp
    Font hero
    Posted 11 months ago #

    Do you use child theme yet ?
    http://codex.wordpress.org/Child_Themes

  3. MrSamNC
    Member
    Posted 11 months ago #

    I just set it up per the instructions from the URL you listed.

  4. paulwpxp
    Font hero
    Posted 11 months ago #

    Try this in style.css of your child theme, put it in just below @import line.

    #masthead hgroup { position: relative; }
    #masthead hgroup:before {
    	content: url("http://dummyimage.com/72x72/ff0000/ffffff&text=+0x26");
    	display: block;
    	width: 72px;
    	height: 72px;
    	position: absolute;
    }
    .site-title, .site-description { padding-left: 96px; }

    Change the url to your own image, must be 72px square to look good.

    Also this theme is responsive, some adjustments could be done further to fine tune it in certain screenwidths.

  5. MrSamNC
    Member
    Posted 11 months ago #

    Perfect, thank you so much!

  6. MrSamNC
    Member
    Posted 11 months ago #

    Resolved.

  7. paulwpxp
    Font hero
    Posted 9 months ago #

    This code is better.

    Logo is clickable as it should, and size is adjusted for small screen too. Code must use in child theme stylesheet or in Custom CSS plugin.

    /* ===== begin logo ===== */
    
    .site-header h1 a:before {
    	content: "";
    	display: block; width: 48px; height: 48px;
    	margin: 0 auto 12px;
    	background-image: url("http://dummyimage.com/72x72/ff0000/ffffff.png");
    	background-size: cover;
    }
    .site-header h1 { margin-bottom: 0; }
    
    @media screen and (min-width: 600px) {
    	.site-header h1 a:before {
    		width: 72px; height: 72px;
    		position: absolute; top: 0; left: -96px;
    	}
    	.site-title, .site-description { position: relative; margin-left: 96px; }
    }
    
    /* ===== end logo ===== */
  8. DanielRandles
    Member
    Posted 9 months ago #

    Is it possible to alter this, so that the logo links to an external site and the header text links to the internal homepage?

    http://www.danielrandles.com

  9. paulwpxp
    Font hero
    Posted 9 months ago #

    Hi Daniel, It's not possible to make a different link using that CSS. Also it's not a good practice to link logo or Site Title to anywhere else except Front home page.

Reply

You must log in to post.

About this Theme

About this Topic