WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. pixilla
    Member
    Posted 2 years ago #

    1. How can i add my own logo instead of the blog name in the header?
    2. The headline of the articles is in the single post page bigger than in the blog page. How can i change this?

  2. Mac Man
    Member
    Posted 2 years ago #

    Ditto... I would also like to know if this is possible without hacking into the CSS

  3. pixilla
    Member
    Posted 2 years ago #

    Ok headline size, i have found:

    /* Singular content styles for Posts and Pages */
    .singular .entry-title {
    	color: #000;
    	font-size: 36px;
    	font-weight: bold;
    	line-height: 48px;
    }

    But for logo i have no idea.

  4. noeladams
    Member
    Posted 2 years ago #

    i'm wanting to do the same thing, i worked on mine last night some and that is one of the features on my bucket list. Still trying to get rid of the continue reading thing first though

  5. Mac Man
    Member
    Posted 2 years ago #

    Ok.. I edited
    #branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
    background: #eee url(http://www.magnumfinancial.co.uk/wp-content/uploads/2011/07/top-header-2.gif) no-repeat;
    }

    Just added a background image here... but I can't edit the height of the block area... so maybe some kindf person can help with that.

    See here: http://www.magnumfinancial.co.uk

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    there is no height to that area per se..... it's the cumulative height of the title text, plus padding, etc

  7. Mac Man
    Member
    Posted 2 years ago #

    Ah.. OK.. where should I add the padding? Soz for being a bit of a noob on this.

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    So a bit of advice is that the name of your site is kind of important for SEO, the description not so much....

    But rather than just not entering them you can move the text off screen as I do on VoodooPress

    by applying text-indent: -999em to #site-title and #site-description you can keep them in the code for search engines, but off screen for style

    I'm not sure if this will work but adding padding to

    #site-title {
    	margin-right: 270px;
    	padding: 3.65625em 0 0;
    }

    might help. The 1st digit is the top padding, the last is the bottom padding. The middle is left and right. So maybe adding some top/bottom padding may help

  9. Mac Man
    Member
    Posted 2 years ago #

    Thanks. Will give it a try.

  10. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    Just tested it in my dev environment..... adding to the top padding on title caused that upper box to grow

    #site-title {
    	margin-right: 270px;
    	padding: 10em 0 0;
    	text-indent: -999em;
    }
    #site-description {
    	text-indent: -999em;
    }

    is the entirety of the css I have on my test site.... cdn.rvoodoo.com if you'd like to see it

  11. Mac Man
    Member
    Posted 2 years ago #

    Kerching!!!

    Thanks Rev....

    Now if you could just sort out the problems I've been having with IE9 on these pages... with text disappearing behind the header ;-)

  12. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    try adding some top padding or margin to primary

  13. rainb0w
    Member
    Posted 2 years ago #

    ok I have the same issue, I've taken a look at the above mssgs but I can't find an easy answer.. what code has to be modified exactly to make this work? :) thanks in advance guys (and girls)! :D

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

    @rainb0w
    it might be better is you start your own topic - posting a link to your site; make sure you have made a child theme and have it activated; give the dimensions of and possibly a link to your logo image; state if you need to have the logo linked to the site; etc.

  15. rainb0w
    Member
    Posted 2 years ago #

    @alchymyth

    I have exactly the same issue, I can copy the question that the first poster had and paste it in a new topic and wait couple of days for answers. However.. the answer is in this topic but spread over multiple posts and not rlly clear if you ask me..

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

    ok,

    1. How can i add my own logo instead of the blog name in the header?

    create a child theme, copy header.php into the child theme and edit it:
    change this section:

    <hgroup>
    				<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>

    to something lke this:
    <hgroup><img id="site-logo-image" src="http://yoursite/wp-content/uploads/2011/07/logo.jpg" alt="" />

    2. The headline of the articles is in the single post page bigger than in the blog page. How can i change this?

    this is set in style.css:

    .singular .entry-title {
    	color: #000;
    	font-size: 36px;
    	font-weight: bold;
    	line-height: 48px;
    }

    add something like this to style.css of your child theme:

    .singular .entry-title {
    	font-size: 26px;
    }
  17. Rohit Tripathi
    Member
    Posted 2 years ago #

    This Tutorial Completely Explains on your issue.

    How to Add Custom Logo in Twenty Eleven WordPress Theme

    I Will try to fix ur other issue soon.

  18. pixilla
    Member
    Posted 2 years ago #

    I have this in my header.php

    <hgroup>
    				<img src="http://www.pixilla.de/wordpress/wp-content/uploads/2010/11/pixilla.png" alt="pixilla" width="80" />
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup>

    I see my image on the site, but it is over the whole width. It not accept my "width=80".

  19. mako2
    Member
    Posted 2 years ago #

    Hello,

    I am using a child theme of Twenty Eleven and I want to have both things: an image logo and right next to the logo I want the site title and tagline.

    Does anybody know how to do this?

    Thank you in advance for your help!

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

    @mako2

    example:

    <hgroup>
    <img class="logo-image" src="http://whatever/image.jpg" alt=""  />
    
    				<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>

    for style.css:

    #branding img.logo-image { width: 125px; }

    remember to create a child theme instead of editing Twenty Eleven directly.
    http://codex.wordpress.org/Child_Themes

  21. mako2
    Member
    Posted 2 years ago #

    Dear Alchymyth,

    Thank you very much! That was very helpful.

    I followed your instructions and I got something that looks like this

    What I would like to acomplish is something like this.

    Do you know how I can place the logo to the left the site title and tagline? Also, how to I leave even amount of space below and above the logo so that it looks in the middle of the page?

    Thank you in advance for your time. I really appreciate your help!

    MK

  22. klasg
    Member
    Posted 2 years ago #

    What I would like to acomplish is something like this.

    That is exactly what I am looking for too!!!

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

    @mako2

    possible styles to add at the end of the style.css of the child theme, or to integrate with the existing ones.

    img.logo-image { float: left; clear: none; margin-top:20px; }
    #site-title { float: left; clear: none; margin-left: 2%; padding-top: 5px; margin-right: 0; width: 70%; }
    #site-description { float: left; clear: none; margin-left: 2%; margin-right: 0; width: 70%; }
  24. mako2
    Member
    Posted 2 years ago #

    Dear alchymyth,

    Thanks a lot! I look almost perfecto. The site title looks fine but the tagline shows below the logo. The space above the logo is perfect but the space below the logo is too much (not the same as above the logo).

    Also, the gray opacity I had before dissapeared and it's now very thin orizontally at the top of the page.

    You can see a before and after screen capture here.

    Thank you so much in advance!

  25. mako2
    Member
    Posted 2 years ago #

    Hello everyone, I am stuck with this :( I was wondering if anyone can help... Thanks!

  26. mako2
    Member
    Posted 2 years ago #

    Hello everyone, I have tried in many ways to fix this and I'm stuck.

    The site title is fine now but the tagline shows below the logo. The space above the logo is perfect but the space below the logo is too much (not the same as above the logo).

    Also, the gray opacity I had before dissapeared and it's now very thin orizontally at the top of the page.

    You can see a before and after screencapture here.

    Thank you in advance!

    Thanks!

  27. klasg
    Member
    Posted 2 years ago #

    It seems that alchymyth is very close, perhaps he could
    assist us with the final details to solve this?
    Would really appreciate it!

    Rgds
    Klas

  28. mako2
    Member
    Posted 2 years ago #

    Yes, It would be great if anyone could help me with this because I am totally stuck! I'm really hopping that alchymyth would give me a hand :) Thanks!

  29. klasg
    Member
    Posted 2 years ago #

    @mako2

    Did you ever solve your problem??

    Rgds
    Klas

  30. mako2
    Member
    Posted 2 years ago #

    @klasg

    no I never figured this out and I decided not to use this theme anymore :(

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.