WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] TwentyTwelve adding image next to site title & tagline (5 posts)

  1. Carolg
    Member
    Posted 1 year ago #

    I want the site logo to appear to the right of the title and tagline.
    I've added the logo via editing the header.php file (in a child theme).
    I've tried styling it in the style.css file to float it to the right but it still appears above the site title:

    http://www.chrisjoneschess.co.uk

    Header.php code:

    <header id="masthead" class="site-header" role="banner">
    	<img class="cjc-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/Images/CJC-logosml.jpg" alt="chris jones chess logo" />
    		<hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>

    Style.css styling:

    /* style logo in header - float right */
    img.cjc-logo {
    	float: right;
    	}

    Thanks for reading :)

  2. leejosepho
    Member
    Posted 1 year ago #

    I ended up having this kind of work done for me, but I think you will need an "absolute" in there somewhere to get the logo to overlay, and then I think you might have to use a margin designation to move it over. My second post here might or might not help a bit...
    http://wordpress.org/support/topic/how-to-twenty-twelve-title-and-tag-line-overlaying-header?replies=2

    In my own case, I was moving title and tag line over away from the logo.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try moving the logo image inside the <hgroup> tag:

    <header id="masthead" class="site-header" role="banner">
    
    		<hgroup>
    			<img class="cjc-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/Images/CJC-logosml.jpg" alt="chris jones chess logo" />
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
  4. paulwpxp
    Font hero
    Posted 1 year ago #

    I used to do that too but the <img/> is not allowed directly under <hgroup>, I actually don't care much as long as it works, but still, if there is other way that's not that much difficult, then it's better.

    This bit of CSS is for the current markup. The 1st line is the key, the 2nd line is optional.

    .site-header hgroup {display:inline-block;}
    .site-header h1 {margin-top:24px;}

    Keep in mind that 2012 is responsive, and mobile-first, and it has IE specific stylesheet ! This theme is NOT easy to customize. Anything layout related, there will be like 3 times the job to do.

  5. Carolg
    Member
    Posted 1 year ago #

    Thanks very much for your responses so quickly guys. Paulwpxp's code worked best for my situation.

Topic Closed

This topic has been closed to new replies.

About this Topic