WordPress.org

Ready to get started?Download WordPress

Forums

A small picture in my twentytwelve header (5 posts)

  1. kittel
    Member
    Posted 9 months ago #

    Hi, new to CSS. Is it possible to have my normal text header and a small picture on the right, that then goes underneath in the mobile version or is this difficult? http://www.kittel.co.uk

  2. paulwpxp
    Font hero
    Posted 9 months ago #

    Install a Custom CSS plugin.
    http://wordpress.org/plugins/search.php?q=custom+css

    Upload a 72x72 image, and get the image url to use in code below.

    This code is for logo to the left of site title and description

    /* ===== 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 ===== */

    This is for logo image to the right (what asked for in the OP)

    /* ===== begin logo ===== */
    
    .site-header h1 a:after {
    	content: "";
    	display: block; width: 48px; height: 48px;
    	margin: 24px auto 16px;
    	background-image: url("http://dummyimage.com/72x72/d2e6f2/ffffff.png");
    	background-size: cover;
    }
    .site-header h1 { margin-bottom: 0; }
    
    @media screen and (min-width: 600px) {
    	.site-header h1 a:after {
    		width: 72px; height: 72px; display: inline-block;
    		position: absolute; margin: 6px 0 0 24px;
    	}
    	.site-title, .site-description { position: relative; }
    	.site-description { display: inline-block; }
    }
    
    /* ===== end logo ===== */

    Just FYI, it's better to post a support question about Twentytwelve theme in its own sub forum (you could go there from theme's main page actually)
    http://wordpress.org/support/theme/twentytwelve

  3. kittel
    Member
    Posted 9 months ago #

    Hi Paul, thanks a lot for this help. Have experimented a bit, but could not get to grips with how to right align the picture with the site-description (h2) and the right hand menu. Could you help again? Many thanks. Martin

  4. paulwpxp
    Font hero
    Posted 9 months ago #

    For second block of code above:

    add

    right: 0;

    into it at the same line that has

    position: absolute;

    Please note that you are editing theme main stylesheet directly. It's better to move all the modifications to Custom CSS plugin or Childtheme stylesheet now than later.

  5. kittel
    Member
    Posted 9 months ago #

    Thanks a lot, Paul. Martin

Reply

You must log in to post.

About this Topic