WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve: [Image + Text] in Header? (4 posts)

  1. temcat
    Member
    Posted 1 year 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!

  2. paulwpxp
    Font hero
    Posted 1 year 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.

  3. paulwpxp
    Font hero
    Posted 1 year 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.

  4. temcat
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic