WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven, own logo and headline size (41 posts)

  1. klasg
    Member
    Posted 2 years ago #

    Too bad.... :-(
    I still use it but miss the logo badly!
    What theme did you choose?

  2. kivee360
    Member
    Posted 2 years ago #

    Just found this thread and wanted to add my a bit unconventional workaround to add logo without affecting anything on a page. Well I moved title of the page and turned off the header image so not sure how would that look with them on, but how about placing the logo as a background for the page using background position to move it where you want it, and then placing absolutely positioned link over it. Like so (inline css left to make it less complex):

    in header.php (line 71+ in original file. make a back-up copy of this file just in case.)

    <div id="page" class="hfeed" style="background:#fff url('http://link-to-your/logo.jpg') no-repeat 0 0;">
    	<header id="branding" role="banner">
    			<hgroup>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" style="position:absolute;left:20px;top:0;width:185px;height:125px;border:none;">&nbsp;</a>
    
    				<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>
    			</hgroup>

    I used this technique on my "blog" (sorry, there's nothing there yet - at the time of writing - it was only installed yesterday, still experimenting with WP): http://blog.kivee.co.uk

  3. whoaloic
    Member
    Posted 2 years ago #

    For now, I've hardcoded the header.php file in order to display a logo, but what I would love is to have an option from admin panel (Appearance section) to replace easily logo in Twenty Eleven theme.

    Could someone help me?

  4. alisanta
    Member
    Posted 2 years ago #

    This is my replacement style.css to display logo, while hide the text of blog title & description.
    Background color inside HGROUP can be removed or changed to match your logo background, here I replace to black.

    #branding img.logo-image { float: left; clear: none; margin-left:7.6%; margin-top:20px; margin-bottom:20px;width:292px; height:85px;}
    #branding hgroup {margin:0px;}
    hgroup {
    	height:140px;
    	width:1000px;
    
    		background:#000;
    	}
    #site-title { display:none;float: left; clear: none; margin-left: 2%; padding-top: 5px; margin-right: 0; width: 70%; }
    #site-description {display:none; float: left; clear: none; margin-left: 2%; margin-right: 0; width: 70%; }
  5. sndo3
    Member
    Posted 2 years ago #

    can I can add a logo to twenty eleven theme?

  6. apetrik
    Member
    Posted 2 years ago #

    I've been working on this all morning and made some progress. Opened up a topic on this here: http://wordpress.org/support/topic/how-to-replace-search-box-with-a-logo-in-twenty-eleven?replies=1#post-2640044

    The only thing I can't figure out is how to make the logo and site name and title line up on the same line. Anyone?

  7. mglez311
    Member
    Posted 2 years ago #

    I have to thank everyone posting here with questions and answers, I got it looking almost exactly as I want it. Just one more detail for me. I want my logo to appear to the left of the blog's title and description not on top of them, how to I tweak it? Here's my url: http://www.mindbodyandpaw.com/blog

    Thanks in advance, you have been wonderful!

  8. yokonemo
    Member
    Posted 2 years ago #

    Hi mglez311,

    I would like to achieve exactly what you have done on your site by now (logo to the left and site title and description just to the right of it).

    Could you please explain how did you do it, step-by-step?

    Many thanks,

    yoko

  9. mglez311
    Member
    Posted 2 years ago #

    @yoko Hi, sorry it took me a while to respond.

    Well, I added this to my child theme's css stylesheet file:

    #branding img.logo-image { width: 150px; }
    img.logo-image { float: left; clear: none; margin-top:20px; }
    #site-title { float: left; clear: none; margin-left: 2%; padding-top: 73px; margin-right: 0; width: 70%; }
    #site-description { float: left; clear: none; margin-left: 2%; padding-top: 4px; margin-right: 0; width: 70%; }

    See what I did to vertically center the blog's title and description with my logo. My pic's size is 150px, half of it is 75px, and to give space for the font's height, I set it to 73px.

    Then in my child theme's header file I searched for <hgroup> and added the url to my logo:

    `<hgroup>
    <img class="logo-image" src="http://mindbodyandpaw.com/wp-content/uploads/2012/04/mindbodyandpaw150.jpg"/>
    <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>
    </hgroup>`

    That was it... I hope it helps

  10. yokonemo
    Member
    Posted 2 years ago #

    @mglez311

    AWESOME, thanks a lot, looking great! :)

  11. dropshipper
    Member
    Posted 2 years ago #

    Also just discovered this page after searching for a solution to exactly the same problem.

    mglez311 thanks so much for your post, it worked perfectly for me too. I managed to get my own logo displaying just on the left of the site title and description using the css you provided so I've still got the text there for SEO.

    You can see how this fix worked for me here: http://www.droplinkz.com

    Just had to tweak the padding sizes in the css a little to get it perfect with my logo size but that was very easy. Also, adding the css file and header.php file to the child theme folder is brilliant as the customisations stay even if you upgrade the theme.

    Thanks everyone! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.