Twenty Twelve: [Image Text] in Header?

  • temcat

    (@temcat)


    10 years, 11 months ago

    Hello,

    I’m new to WP, know absolutely nothing about CSS and need some advice on customizing Twenty Twelve theme (of which I created a child theme).

    First, I’d like to add a small image to the header, but also retain the text beside the image (not on it). What code should I put and where? Also, in which directory do I put the image and how do I reference it so that it displays?

    Thank you in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • paulwpxp

    (@paulwp)

    10 years, 11 months ago

    add a small image to the header, but also retain the text beside the image (not on it).

    Please be more specific. Twentytwelve’s header image is below its navigation bar, so when we say “header” it could be that or the site’s title area.

    paulwpxp

    (@paulwp)

    10 years, 11 months ago

    Try this in style.css of your child theme.

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

    Review on the media queries subject.
    https://developer.mozilla.org/en/docs/CSS/Media_queries

    and look inside TwentyTwelve’s style.css see how it works there.

    Thread Starter temcat

    (@temcat)

    10 years, 11 months ago

    Thank you very much! I meant the header above the navigation area. Will try that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Twelve: [Image Text] in Header?’ is closed to new replies.