WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] twentyeleven add small header image to branding? (10 posts)

  1. algirdas
    Member
    Posted 2 years ago #

    I'd like to put a small image (approximately 80x110 px) floated to the right in the branding area of my site

    I have header.php and style.css in a twentyeleven child theme. I've used the settings in Appearance --> Header to not use an image and to use text for my site title and description, commented out the search form in header.php, and made the site title and description full-width in style.css.

    Any tips on how to place a small image on the right in the header section?

    Sandbox site:
    http://www.algiskaupas.com/church/

    Thanks!

    http://wordpress.org/extend/themes/twentyeleven/

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    edit header.php in the child theme; find:

    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>

    change to:

    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="" /><?php bloginfo( 'name' ); ?></a></span></h1>

    to keep the logo image from stretching, you need to add this to style.css of your theme:
    img#site-logo { width: auto; }

    The above code assumes that the logo image site-logo.png is located in the /images folder of your child theme.

  3. algirdas
    Member
    Posted 2 years ago #

    Thank you very much for the reply!
    I ended up adding the site logo as you described, putting the title and description in a "title" div, floating that right in style.css; the logo in a "logo" div, floating that left; and then adding a "clear" div, clear:both (not sure if the "clear:both" is necessary). I then played around a little with the placement in style.css.

    Changed code in header.php:

    <hgroup>
    				<div id="titles">
    					<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    					<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    				</div>
    				<div id="logo"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.gif" alt="" /></div>
    				<div id="clear"></div>
    			</hgroup>

    Here's the css if anyone's interested:

    [CSS code moderated - the link to your site is enough to access all styles - also the forum limit for direct posting of code is 10 lines]

  4. damionwagner
    Member
    Posted 2 years ago #

    Ive installed a fresh copy of twentyeleven with style.css and header.php children that only have these recommendations as suggested, yet nothing. Also tried an absolute url for the image but nothing.
    I want to put the logo on all pages. I ended up with a wide transparent header.
    http://damionwagner.com/sites/jrblack/
    Any suggestions?
    Thanks!

  5. pipemma
    Member
    Posted 2 years ago #

    I've followed the above process and the logo is taking up half the screen even though it's the right pixel size. I can't seem to work out your CSS from your site and I don't know enough about CSS and coding to know how to float the div. I just want the small logo to the left of the site title and description.

    http://blog.yourswisslifeline.com

    Can anyone help please?

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @pipemma

    first step:

    img#liferinglogo { width:auto; }

  7. pipemma
    Member
    Posted 2 years ago #

    I see where I went wrong there but it's not solved the problem. Where in the css should that line be?

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    you have a lot of different code in your header section which you might need to format; for instance try to work with:

    #logo { float:left; margin-top: 1.5%; margin-right: 5%; width: 30%; }
    #logo img#liferinglogo { width: 95%; }
    #site-title, #site-description { clear: none; width: 100%; }

    for instance, add these into the /* =Header section of style.css in your child theme.

    the exact number values might depend on your idea of the logo size and position.

  9. algirdas
    Member
    Posted 2 years ago #

    To minimize possible confusion:
    I've switched the title to the left and the logo to the right in the url I gave above, so the appearance of the test site does not correspond to the description given in the above message. Here's my css for title on left, logo on right:

    /* -- float titles left/logo right/clear both ------------------ */
    #titles	{float:left; margin-top:.8em;}
    #logo	{float:right;}
    #clear	{clear:both;}
  10. pipemma
    Member
    Posted 2 years ago #

    Alchymyth you're an absolute star - that addition to the css has worked a treat! Thank you!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic