WordPress.com Theme: Twenty Eleven CSS Style Sheet Modification. Change Site Title,Description,Post Title,Comments,Menus,Sidebar and More.



Here I have tried to show you some basic but important modification of CSS style sheet of Twenty Eleven theme recently released by wordpress.com. It is new version of Duster theme with new name.
By modifying the css of your theme you can give your Default Twenty Eleven a new look and can make it outstanding…

Just paste the code in your style sheet and try.

You may Also Like the following CSS Modification to try

1. WordPress Twenty Ten Theme CSS Style Sheet modification.
2. WordPress Duster Theme CSS Style Sheet Modification.
3. WordPress Bueno Theme CSS Modification.
4. WordPress Freshy Theme CSS Modification
5. WordPress Mystique Theme CSS Style Sheet Modification.

1. If you want to Header Site Title Font color,font size, font type of your Twenty Eleven theme

#site-title a {
color: red;
font-family: times New Roman;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

2. If you want to change the Site Title’s mouse over (hover) font color of Twenty Eleven

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #1982D1;
}

3. If you want to remove the Blank space from the upper side of the Site Title

#site-title {
margin-right: 270px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 1.65625em;
}

4. If you want to remove the Blank space just from the footer side of Site Title of Twenty Eleven

#site-description {
color: #7A7A7A;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

5. If you want to change the Site Description’s font color, font size and font family of theme twenty eleven

#site-description {
color: blue;
font-family: tahoma;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

6. If you want to change the Height of Header Image of twenty eleven

#branding img {
height: 100px;
margin-bottom: -7px;
width: 100%;
}

7. If you don’t want to show the search from the top

#branding #searchform {
display: none;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

8. If you want to change the background color of navigation Menu in Twenty Eleven theme

#access {
background-image: -moz-linear-gradient(#252525, red);
}

9. If you want to change the Post Title’s font color, font type and font size (In Homepage)

.entry-title, .entry-title a {
color: red;
font-family: tahoma;
font-size: 1.2em;
text-decoration: none;
}

// for individual blog post Try this one

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

10. If you want to change Blog Post Titl’e Hover font color

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
color: #1982D1;
}

11. If you don’t want to show “Posted On” or Blog Post date (entry meta)

It will also help you to hide the Footer side entry meta.

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

12. If you want to change blog Posts font color, size and font type.

.entry-content p {
font-family: times New Roman;
color: red;
font-size: 1.1em;
}

13. If you want to change Right SideBar widget Title’s font color, size and font type

.widget-title {
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

14. If you want to change right side bar widget’s Links color, font size,font type of Twenty Eleven

.widget a {
color: black;
font-family: times New Roman;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

15. If you want to add additional widget titles colored background in Theme twenty eleven

.widget-title {
background-color: gold;
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
padding-left: 37px;
text-transform: uppercase;
}

16. If you want to change or Increase the width of Right Sidebar

#primary {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: -26.4%;
margin-top: 0;
width: 90%;
}

#secondary {
float: right;
margin-right: 7.6%;
width: 24.8%;
}

17.If you dont want to show or dont want your user to comments in your blog

#comments {
display: none;
}

18.If you want to change the comments font color,size and font type

.comment-content p {
color: red;
font-family: times New Roman;
font-size: 16px;
}

19. If you want to change the font color of Navigation menu

#access a {
color: red;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

20. If you want to change the font size,font type of Comments Author Name and Date

.comment-meta {
font-size: 16px;
line-height: 2.2em;
}

21. If you don’t want to show footer side Tag in twenty eleven

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

22. If you want to change the body background color of twenty eleven

body {
background-color: red;

}

23. If you want to change HomePage Blog Posts summary background color

#page {
background-color: yellow;
}

24. If you want to change blog post Title’s Background color of Twenty Eleven

.entry-title, .entry-title a {
background-color: gray;
color: #222222;
text-decoration: none;
}

25. If you dont want to show Comments Bubble (Number of image) in the right side of Post Title

.entry-header .comments-link a {
display: none;
}

26.If you only want to change HomePage Blog Post’s Background Color

#content {
background-color: gold;
margin-bottom: 0;
margin-left: 7.6%;
margin-right: 34%;
margin-top: 0;
width: 58.4%;
}

27. If you want to remove the complete Header portion ( Site Title, Site Description and search box)

#branding hgroup {
display: none;
margin: 0 7.6%;
}

28. If you want to change the space between the Navigation Menu Of theme Twenty Eleven try the following CSS

#access a {
color: black;
display: block;
font-size: 14px;
line-height: 3.333em;
padding: 0 0.6em;
text-decoration: none;
}

29. If you want to reduce the padding between my pictures and text Of theme Twenty Eleven try the following CSS

p {
margin-bottom: 1.625em;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 0;
}

30. If you want to align your blog post, site title and Navigation menu left aligned in Twenty Eleven THeme try the following CSS

#branding hgroup {
margin: 0 0.6%;
}
#access div {
margin: 0 0.6%;
}
#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

31. If you want to add a border in the right side of blog post content in Twenty Eleven THeme try the following CSS

#content {
border-right: 1px dotted;
margin: 0 34% 0 0.6%;
padding-right: 11px;
width: 61.4%;
}

32. If you don’t want to show the bullet in the link of rightbar of Twenty Eleven THeme try the following CSS

.widget ul li {
color: #777777;
font-size: 13px;
list-style: none outside none;
}

33. If you want to show border after the widgets of rightbar of Twenty Eleven THeme try the following CSS

.widget {
border-bottom: 1px dotted grey;
clear: both;
padding: 15px 0 20px;
}

34. If you want to change the hover color of the Navigation Menu of Twenty Eleven THeme try the following CSS

Note : change the color code as your choice.and paste the code at the bottom of style.css of your main (parent theme)

#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}

If this CSS Modification seems helpful to you? You can donate $1 to support me :)

Please make some donations


Want me to help you personally for CSS Issue? You can hire me in fiverr ..


Click the Image below

About these ads

1,502 Responses to WordPress.com Theme: Twenty Eleven CSS Style Sheet Modification. Change Site Title,Description,Post Title,Comments,Menus,Sidebar and More.

  1. bookgraphics says:

    As a newbie, I have questions. Do these alterations require an upgrade to “Custom Design”? If not, just where do I find the style sheet code and where do I paste the altering code? (SO, not a geek. But expert at desktop publishing, so if I could find the location of the style sheet I think I might be able to figure it out.) THANKS AGAIN.

    • As you are using wordpress.com self hosted free blog you have to purchase/ upgrade custom design…there you will get custom css… and you have to paste your code in custom css….

  2. richwoodward says:

    Hi,

    I’m having two problems, which I hope you can help with.

    One: How do I use the CSS custom design to turn the twenty eleven theme from a variable width to a fixed width layout?

    Two: Is there anyway to alter the spacing (or padding?) between the menu bar and the page title? If you go to my blog: http://carvingnature.wordpress.com/ you’ll see that there is a large gap between the menu and the “Hello” which I would ideally like to halve in size.

    Many many thanks in advance.

    • Hi,
      To change the width of twenty eleven theme using custom design you have to manipulate and use the CSS.

      and
      To change the gapping or spacing between the menu bar and page title you can try this code.

      .singular.page .hentry {
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0.5em;
      }

      Please let me know this code works for you or not..
      Regards

  3. Lou Gonzalez says:

    I have tried to change the nav menu color and nothing happens. I copy paste and enter the new color code, and nothing happens. Can you please tell me what i am doing wrong?

    • Hi Lou…
      Are you searchig for Navigation menu’s Background Color then try this code

      #access {
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      background: -moz-linear-gradient(#252525, red) repeat scroll 0 0 transparent;
      clear: both;
      display: block;
      float: left;
      margin: 0 auto 6px;
      width: 100%;
      }

  4. Lou Gonzalez says:

    Thanks, what parts of the code do I need to change? I tired the hex and nothing happened. Is there another part i need to adjust, it just stays black

    • Hi Lou
      You have to change the “Red” (color name) to hex or specific color name

      background: -moz-linear-gradient(#252525, red) repeat scroll 0 0 transparent;

  5. vtobvi says:

    Great site! I’m hoping you can help with this one as I’ve been staring at my CSS for a while and haven’t figured it out. On my blog, I’m trying to reduce the padding between my pictures and text. For example, when I insert a picture while editing my post, I want the words to be twice as close to the picture as it currently is. I’ve tried playing around with padding and margins, but I haven’t found the right one yet! Any help is appreciated. Thanks, and you are now bookmarked!

    • Hi,
      To reduce the space below the pictures/images try the following code….. ( you can change the value for better adjustment.)

      p {
      margin-bottom: 0.1em;
      }

      img.alignleft, img.alignright, img.aligncenter {
      margin-bottom: 0;
      }

      Please Let me know it works for you or not.

      • Erin says:

        beautiful! it works! ended up with the follwing:

        p {
        margin-bottom: 1.625em;
        }

        img.alignleft, img.alignright, img.aligncenter {
        margin-bottom: 0;
        }

        thanks a ton!

      • Thats Great Erin….
        Feel free to comment if you need any help..

      • Ross says:

        Om, I applied this CSS, and indeed it did bring text underneath pics closer, as desired. However, it also seems to have reduced the spacing between paragraphs of text-only sections of all my posts. Is there a fix that will retain the current reduced spacing of text underneath pics, but will allow me to increase the spacing between paragraphs, please?

        Cheers
        Ross

  6. Lou Gonzalez says:

    Hi Allaboutbasic,

    I still can’t get the nav bar/menu to change. I can get the font to to change though. The color i want it is #21005F. I have change just “red” the hex code both. Tried other colors. Nothing changes the bar color. If I delete the “0 0″ in “repeat scroll 0 0 transparent;” the bar becomes transparent.

    Also is there a way to not make the page stretch but keep a static size?

    • Hi Lou….try this code to change the color of Nav Menu background.. Pls let me know it works for you or not.

      /*******************For Twenty Eleven Nav menu Background color *****************************/
      #access {
      background: none repeat scroll 0 50% #21005F;
      clear: both;
      display: block;
      float: left;
      margin: 0 auto 6px;
      width: 100%;
      }

      /************* Theme Twenty Eleven Navigation Menu font color *****************/
      #access a {
      color: white;
      display: block;
      font-size: 16px;
      line-height: 3.333em;
      padding: 0 1.2125em;
      text-decoration: none;
      }

  7. Lou Gonzalez says:

    Worked, Thank u so much for the help and being really fast

    • Hi Lou…
      Great… Feel free to comments if you need further help.

      • max says:

        Can you suggest any reasons why it still wont work? My nav color is not changing at all, nothing i do is helping, I added the code stated above below all the stylesheet code…

        Any ideas? the website is method2creative.com

      • Hi Max,
        Your full menu font color becomes white… What changes you did, or which code u used?
        pls let me know..

        Regards
        Om

      • max says:

        Thanks for responding so fast, much appreciated, i woke up this morning and everything changed, its working! I’m using firefox (with history disabled) as my preview browser, and chrome as my building browser, chrome seems to hold some kind of cache, and i don’t want to disable it, I’ve got way to many cookies and history stored. I’ll continue going about it this way and see what happens,

        Although, I seemed to have broken the spacing between the navigation text, which code is it that adjusts that?

        Thanks again!

      • Hi Max,
        You can try the following code..

        #access li {
        padding: 12px;
        }

        Pls let me know it is ok or not..

        Regards
        Om

      • max says:

        I just added the code, nothing got updated. It seems I’m having quite the issue of the website updating every once in a while, its not consistant, I just tried a bunch of things and nothing is being updated again. Is there a reason for this?

        Thanks again for the quick reply!

        -M

      • Hi Max,
        are you using twenty eleven child theme?
        pls let me know..

        Regards
        Om

      • max says:

        Hmmm, not sure, where can I find whether its a child theme…

      • Hi Max,
        just check your style.css… it should be written there.. at the top..

        Regards
        Om

      • max says:

        Ill take a look, I did figure out how to delete the cache on chrome Shift+ALT+Delete… now I see all the changes that I’m making… wonderful…

        Thanks again,

        -M

      • Hi Max,
        Nice to know u have done it..
        :)

        Om

      • max says:

        Hello again Om!

        Where do i specify whether one page has 1 column and another has 2 columns… I’ve been putzin with trying to get it for quite a while now! ;)

        -m

      • Hi Max,
        Sorry for my late reply..
        you can do it by creating page template..

        One Template with one sidebar or column
        Another (2nd) template with two sidebar or column..

        It is easy to prepare..

        Regards
        Om

      • max says:

        Under what template is the ‘Default Template’ under? I can find all the others e.g. One column, no sidebar Page Template. But I can’t seem to find the Default..

        -M

      • Hi Max,
        i think the default template generally indicates the page.php for the pages…

        Regards
        Om

      • max says:

        Hey Om,

        I trying to removing the huge spage before the content, could you let me know how that done? Thanks again!

        -M

      • Hi Max,
        WOuld u mind to try the following code and let me know it is Ok or not?

        .singular.page .hentry {
        padding-top: 0.5em;
        }

        Regards
        Om

      • max says:

        Hey Om,

        Unfortunately nothing happened when i copied that code into the stylesheet.

        Any other ideas? :D

        -M

      • Hi Max,
        are you using child theme?

        if yes..can u paste the code at the bottom of parent’s style.css?

        Regards
        Om

      • max says:

        Hey Om,

        Im still trying to figure out how to adjust the top margin of my #page so that the white line below the navigation bar isn`t so far down, just a heads up, not using a child theme.

        http://www.method2creative.com

        Thanks man!

        -M

      • Hi Max,
        I have checked ur css, you have the following css code which is causing the gap below the navigation menu..

        .singular.page .hentry {
        padding-top: 5em;
        }

        reduce the padding-top value and it will solve ur problem..
        :)

        Pls let me know, if i cant reply today..i will must reply tomorrow..

        Om

      • max says:

        Om your a damn genius! It was right under my nose the whole time, that totally worked.
        (My apologies for getting back to you so late, its been busy on this side)

        I’m running out of questions, the website almost doing what i need it for. I just added child pages to my ‘Work’ tab tho, and they are appearing way up in the header image.. thus, they aren’t clickable because of their distance from the nav bar, any ideas?

        http://www.method2creative.com

        Thanks in advance!

        -M

      • Hi Max,
        would u mind to try the following code and let me know it works for u or not?
        ** If it works.. i think u should by me coffee :)

        #access ul ul {
        -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: auto;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        position: absolute;
        top: 21.7em;
        width: 188px;
        z-index: 99999;
        }
        #access ul ul a {
        width: 188px;
        }

        Regards
        Om

      • max says:

        It worked! I’m going to revise the code you gave me so i understand what it is you did…

        Starbucks or Tim hortons??!!

      • Nice to Know it works Max..
        Pls check the code works with others menus or not..

        :)

        Regards
        Om

      • max says:

        Hey Om,

        Do you think we can help me out on the page:

        http://www.method2creative.com/contact/

        Im using the easy columns plugin, but can seem to center the content on the page, I know Im asking you to dive into a plugin, but I didn’t know if there was some code I could put somewhere to adjust that?

        Thanks in advance!

        M

      • Hi Max
        You want that column to be in the center of the page?
        Regards
        Om

      • max says:

        Hey Om,

        There’s two columns, but i would like the first one to start closer to the center… so that both columns are moved to right… If im making sense..

        M

      • Hi Max,
        check the following code

        .page-id-23 .hentry {
        margin-left: 211px;
        margin-right: -169px;
        }

        Om

      • max says:

        Where do i check that code? I’m unfamiliar with how to check that? How do i check for page-id-23?

        M

      • Hi Max,
        Just paste the code at the bottom of your style sheet and check it works or not.. and let me know..

        Regards
        Om

      • max says:

        Na, didn’t work…

        Any other ideas?

        -M

      • Wait.
        I am checking..

        Om

      • Max,
        Are you using Child theme?

        let me know.

        Om

      • max says:

        Nope, no child theme..

      • Hi Max,
        but, i didnt see my code in ur site..

        whiere u have pasted the code?

        pls check u have missed any dot or u have paste the code correctly..

        Om

      • max says:

        Hey Om,

        Its right at the bottom of my css stylesheet.

        I even put a header on the code:

        /*making the two columns in contacts centered…
        ——————————————————*/

        .page-id-23 .hentry {
        margin-left: 211px; margin-right: -169px;
        }

      • Hi Max,
        Pls remove the header from above the code.. and try again..

        it should work

        Om

      • max says:

        Hey Om

        removed the header code, still no luck… I have faith we’ll figure it out:)

        -M

      • Max
        Pls try this

        #post-23 {
        margin-left: 178px;
        margin-right: -61px;
        }

        Om

      • max says:

        Nope! I swear this will all be worth it when its over!

        -M

      • Hi Max,
        add me in skype om2000_cuet is my skype id..

        Om

  8. Erin says:

    I’ve got another one for you. I tried to remove the blank space above my header image. Here is what I’m currently using in my stylesheet.

    #title a:link,#title a:visited {
    display:block;
    height:100%;
    overflow:auto;
    font-size:48px;
    text-align:left;
    vertical-align:middle;
    }

    #access {
    background:0;
    -webkit-box-shadow:rgba(255,255,255,0.4) 0 1px 2px;
    -moz-box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
    box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
    clear:both;
    display:block;
    float:left;
    width:100%;
    margin:0 auto 6px;
    }

    • HI Erin..

      Nice to see you again…and..thanks to visit my blog and your comments…

      Would you mind to Try the following code and let me know it works for you or Not?

      #site-description {
      color: #7A7A7A;
      font-size: 14px;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 270px;
      margin-top: 0;
      }

      Regards
      Om

      • Erin says:

        Just tried it and unfortunately it didn’t work. Is their a natural padding on the header image or maybe the search bar is still leaving some padding?

        If you go to my site, you can see what it looks like now. It’s blank space is approximately half the size of when I use your code you just sent versus when I take the entire #site-description out.

        Any other clues?

      • Hi Erin..
        Sorry for the late in Reply.. due to internet problem your site was not loading properly in my side..
        Would you mind to try the following code and let me know it works for you or not..

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

        Regards
        Om

      • fivel says:

        Hi Om.

        I’m working on resolving a similar issue and tried both methods you recommended to Erin. But neither worked for me. I’m simply trying to basically raise the whole site up by removing the blank space above the header, but cannot figure out how to do it. here’s my site: http://housedevil-streetangel.com/ Thanks very much!

      • Hi Fivel,

        *** If you want to remove the white space where “Search Box” is located try the following code..

        #branding hgroup {
        display: none;
        margin: 0 7.6%;
        }

        #branding #searchform {
        display: none;
        position: absolute;
        right: 7.6%;
        text-align: right;
        top: 3.8em;
        }

        Pls let me know it is Ok or not..

        Regards
        Om

      • fivel says:

        Well, it worked perfectly in one sense, but now the search box disappeared. I was hoping for more of a compromise. Would like to have a search box on top but not so much room on the top of the page.
        Thanks!

      • Hi Fivel

        Try the following code, it will return back to ur search bar

        #branding #searchform {
        display: block;
        margin-bottom: 14px;
        position: absolute;
        right: 7.6%;
        text-align: right;
        top: 0.8em;
        }

        Pls let me know it is Ok or not..

        Regards
        Om

  9. thegirl says:

    Hi There!

    I have a blog header that is 931×621 pixels. Obviously it doesn’t fit to the 1000×288 limit of Twenty Eleven. Is there a CSS code that will allow me to put up my custom header?

    You’re help would be greatly appreciated!!

    Thanks!

    • HI,

      What is your website URL? would you mind to share it?

      • thegirl says:

        https://allymumm.wordpress.com/

        Its a work in progress..and the header isn’t the one I plan to use! Do you need to see the header I want to use also?

      • Yes…It would better you use that header which you told me in your last comment…

        Regards

      • thegirl says:

        I know that! But the question is how, the size doesn’t meet regulations therefore I’m seeking advice on how to be able to change the css/use it! Do you have any advice?

      • Let me check it….I need to activate the Duster theme in my testing site…
        Give me some time…

      • thegirl says:

        Ok! Thanks so much! If you need to see the header I plan to use, I can email it to you!

      • Hi,
        I have cheked in my test wordpress site, http://freesmsinfo.wordpress.com

        Actually , as you are using wordpress.com self hosted site so your header image for Twenty Eleven theme should be 1000 × 288 pixels.
        So you have to made your Image in this resolution……as there is no way to update the php files….

        Though i am thinking about another tricks…not sure it will work or not… the tricks is.. If you have “Site Title” then you may use (not sure though) your header image as its background.

        you can mail me the header image….i will check it…… om2000_cuet@yahoo.com is my mail id….

        Regards
        Om

  10. thegirl says:

    Hi Om! You’ve been so helpful. Just two more questions:

    How do I remove the grey bar above my header?
    And how do I change the font in my navigation menu?

    Thank you SO much!

    • Hi Ally…

      To remove the Grey line above of your Header Image try the following code

      #branding {
      border-top: medium none;
      padding-bottom: 10px;
      position: relative;
      z-index: 2;
      }

      To change font of your navigation Menu try the following code

      #access a {
      color: red;
      display: block;
      font-family: times New Roman;
      font-size: 15px;
      line-height: 38px;
      padding: 0 10px;
      text-decoration: none;
      }

      Pls let me know it works or not…

      • thegirl says:

        They work! Thank you thank you! One last question, is there a way to put the search in the navigation bar?

        You have definitely helped me with CSS, I really appreciate it! A lot!

      • Hi Ally…..
        Not sure ( as i have not tested in other browsers) you can try the following code

        and pls let me know it works for you or not (pls check it in other browsers)

        #branding #searchform {
        background-color: white;
        display: block;
        margin-top: 235px;
        position: absolute;
        right: 7.6%;
        text-align: right;
        top: 3.8em;
        }

        Regards
        Om

      • thegirl says:

        It worked! Had to change the text align from 3.8 to 2.8 but other than that, perfect!

        Thanks again!

      • Great Ally….
        Let me know if you have any problem….

        Regards
        Om

      • thegirl says:

        For some reason though, it works but when I make the window larger or smaller the search box moves out of the nav menu.. is there a way to stop this?

      • Ally…in my firefox this problem is not occuring…which browser you are usiing?

        Would you mind to try this following code and let me know?

        #branding #searchform {
        background-color: white;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 238px;
        position: absolute;
        right: 7.6%;
        text-align: right;
        top: 3.8em;
        }

      • Graeme says:

        Hi,

        Could you please let me know exactly where I put the above code for removing the grey bar. I am trying to do it, but don’t know where to paste this code (even after reading your whole thread).

        Thanks for helping!

      • Hi Graeme

        Paste the following code at the bottom of your style.css or custom.css

        #branding {
        border-top: none;
        }

        Regards
        Om

  11. Can anyone tell me how to undo the automatic alphabetical ordering of the hover pages menu that says “Home”, “About Me”, etc? I’d like to order my pages in a row manually rather than automatically by the letter the page titles begin with.

    Thank you!

  12. xtianpeak says:

    Hi Om,
    How would I change the space between the menu items and what I mean is the space between “Home”, “About Me”, “Test Page”, “Testing” etc

    Regards,
    Cyril

    • HI Cyril….

      To change the space about the Menu Items try the following code

      #access a {
      color: black;
      display: block;
      font-size: 14px;
      line-height: 3.333em;
      padding: 0 0.6em;
      text-decoration: none;
      }

  13. xtianpeak says:

    Hi Om, that’s excellent. Works perfectly. Many thanks!

  14. kalanit says:

    Hi,

    How would I add a thin vertical line between the sidebar and the content as well as a horizontal line between each of the widgets on the sidebar? (Currently, I am using the layout with the sidebar on the right.)

    Thank you!

  15. Wow, your blog has been so incredibly helpful. I have a question for you:

    I would like for the navigation bar, site title and blog posts all to be aligned on the left. Is there any way to do this? Here’s a link to my site in case you’re needing it: alexandrajean.com

    • Hi,
      I think you are searching for this.. Please let me know it works or not…

      /***** To align your blog post, site title and Navigation menu left aligned in Twenty Eleven THeme **************/

      #access div {
      margin-bottom: 0;
      margin-left: 0.6%;
      margin-right: 7.6%;
      margin-top: 0;
      }

      #branding hgroup {
      margin-bottom: 0;
      margin-left: 0.6%;
      margin-right: 7.6%;
      margin-top: 0;
      }

      #content {
      margin-bottom: 0;
      margin-left: 0.6%;
      margin-right: 34%;
      margin-top: 0;
      width: 58.4%;
      }

      Regards
      Om

  16. aimee says:

    your information has been very helpful. Can I add a Link menu to the navigation bar? thank you Aimee

  17. xtianpeak says:

    Hi Om, what I’m trying to do now is this: on a just the 1st page, I want to remove as much space as possible between the menu navigation bar and when the content on my page starts.

    How can I make this happen?
    Regards,
    Cyril

  18. xtianpeak says:

    Hi Om,

    That worked, but it did if for every page and I only want to do on on a single page.

    Cyril

    • Hi Cyril…

      I have modified the code….try this and let me know it works or not…

      #post-468 {
      padding: 0;
      }
      #post-468 .entry-title {
      padding: 0;
      }

      Regards
      Om

      • xtianpeak says:

        Hi Om,

        No that didn’t work. Everything reverted to the way it was before. What does #post-468 related to and where did you get that identifier from. Just so you know, they are all pages and not posts. I don’t know if that makes any difference.

        Cyril

      • Hi Cyril
        Where have u pasted the code? Is my code still in your css?

  19. xtianpeak says:

    Hi Om,

    The code is still in my CSS but it’s on a dev server which has an identical site which was refreshed today. I can’t really play around with the live site as it’s waiting to be reviewed right now.

    I changed the permalink settings to numeric to get the post_id for each page. The page on the the dev server I’m using for the page I want to alter is

    http://localhost/xkmtest_site/wp-admin/post.php?post=374&action=edit

    Is that any help. I’ll understand if you say it’s too tricky to work with code you can’t be sure of.

    Cyril

    • Hi Cyril
      No..that code will not work in your localhost server as the post id will not be the same…and permalink change will not help u….

      My code will work when u will paste it in the Live hosting server , i.e in your live wordpress style sheet..

      Regards
      Om

    • xtianpeak says:

      Hi Om,

      I’ve put the code on the live site and it works as you said. Thank you very much for that.

      How do I get the post_id for the page I need to alter should I need to do it for another page?

      Regards,
      Cyril

      • Hi Cyril..
        I know it should work..
        Its easy to get the post_id, you will get it from “View Page Source” of your browser.

        Regards
        Om

  20. Hi,

    I think..In your main site http://thebitgen.com/ you already changed the headers and others….

    Regards
    Om

  21. I am trying to decrease the space between the navigation bar and the beginning of the content. I noticed the following code provided in an earlier post above, but I find that there still is more of a gap than I’d like:

    #main {
    clear: both;
    padding: 0 0 0;
    }

    Any other code to further decrease it?

    Thanks,
    Steve

    • Hi Steve
      Sorry for the late in reply…as it was midnight when you commented me…

      Also…
      Try the following code..

      .singular.page .hentry {
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0.5em;
      }

      Regards
      Om

  22. Hi Om,

    Thanks for the quick reply! I appreciate your helpfulness.

    Best wishes,
    Steve

  23. Hi Om,

    It eliminated the gap completely. It also affected the layout of the footer in an odd way. Any middle ground (smaller gap, still preserving the format of the title within the text area, not influencing the footer)?

    Best wishes,
    Steve

    • Hi Steve..
      Thanks for your reply…
      Would you mind to paste the code in your style sheet (at the bottom of style.css ) so that i can check?

      REgards
      Om

      • Hi Om,

        I’m glad that you explained that it should be at the bottom of style.css. I pasted it there and now the format is perfect! I put it in the wrong place at first underneath

        #main {
        clear: both;
        padding: 0 0 0;

        Thanks for the follow-up and clarification.

        Best wishes,
        Steve

      • Great Steve…

        Feel free to contact me if you need any help.

        Regards
        Om

  24. Hi Om,

    I have a different question for you. On my site, I wanted to have pages labelled using their slugs and was able to designate this successfully on the permalinks settings using the structure of /%pageslug% However, this messes up the URLs for blog posts. Any suggestions about how to keep the desired names for the pages, but have the blog postings work properly?

    Best wishes,
    Steve

  25. Jay Harris says:

    Hi there Om,

    thanks for a fantastic page, it is a great help! One question though…

    I removed all titles from my pages by writing {display:none;} at

    /* Headings */
    h1,h2,h3,h4,h5,h6 {
    clear: both;
    }

    This stopped all page titles but I want to keep my blog titles…. How would I keep these…?

    Many thanks!

    Jay

    • Hi Jay..
      Thanks for your comments
      Would you mind to share me your website address for check?

      Regards
      Om

      • Jay Harris says:

        Apologies Om, I thought I had included the site address.

        Here it is: http://0197f98.netsolhost.com/Jay/

        Many thanks!

      • HI Jay…..
        I have checked your site…

        Would you mind to clear me the problem again?

        You dont want to show “Page Title” but.. want to show “Post Title” is it?

        If yes..then you have to modify your php file to achieve this.

        Regards
        Om

      • Jay Harris says:

        Ah I see, I am using a child theme that only contains Style.css. Would the child theme facility still work with other such files?

        It would be great if you could advise me which file I would need to copy across and what the code needs to achieve getting rid of “Page Title” but keeping “Post Title”. Many thanks for your help, I’ll send a little contribution your way!

        Jay

      • Hi Jay…
        Sorry for the late in reply..just returned home…

        Umm..as you are using child theme….i think you may need to modify the page.php or single.php (not sure as i dont have the theme installed in my pc) Just you have to add html tag div to make the page different then post page and then implement CSS to remove the Title

        Regards
        Om

      • Jay Harris says:

        Hi Om, thanks again!

        Would I make the page.php/single.php file part of my child theme and change it there or change the parent file? Could you advise me on how to use the div tag?

      • Hi Jay…
        Not sure about child themes…. i need to check it ….. do u have skype?
        add me in skype. om2000_cuet is my id…

        let me see if i can help you or not..

        Regards
        Om

      • Jay Harris says:

        I’m afraid I’m at work at the moment and wont be available for another 4 or 5 hours. It isn’t urgent though so there is no rush and doesnt need to be sorted today. Email communication would be fine but it depends on what you prefer!

      • Ok Jay..
        No Problem….
        Try to add me when you will be free..

        after 4-5 hours it will be midnight here…

        Tomorrow will be fine..

        Regards
        Om

      • Jay Harris says:

        I think we may have the time-difference problem every day really… Maybe it can work over email? Feel free to email me at music@jay-harris.co.uk

      • Thanks for your reply Jay…..

  26. Hello Om,
    I got so much help from your article now I have few more questions and need your help.
    Firstly, I want to remove the gray area displayed around my blog http://newaboutindia.com if possible or either decrease the size of that gray area.
    Secondly, I want to increase the width of search bar.
    And moreover I want to display one google advertisement in the header so where I have to put that google code so that it will be displayed in right side of the header.
    And when I open any article then it is opened but not aligned properly. Can I align all to left.
    Yogesh

    http://newaboutindia.com


    • Hi Yogesh..
      If I understand your requirement perfectly…then try the following codes

      /*********** To reduce the grey bar space from the top ********************/

      #page {
      margin: 0 auto;
      max-width: 1000px;
      }
      body {
      padding-top: 5px;
      }

      /*********** To Increase the width of Search Form **************/

      #branding #s {
      float: right;
      width: 127px;
      }

      /************ To make your Individual post/page left align ***************/

      .singular #content, .left-sidebar.singular #content {
      margin: 0 0.6%;
      position: relative;
      width: auto;
      }

      #comments {
      float: left;
      width: 68.9%;
      }

      #respond {
      -moz-border-radius: 3px 3px 3px 3px;
      background: none repeat scroll 0 0 #DDDDDD;
      border: 1px solid #D3D3D3;
      float: left;
      margin: 0 auto 0.625em;
      padding: 1.625em;
      position: relative;
      width: 68.9%;
      }

  27. murk says:

    To move the header text onto the header image (I find this ugly, but couldn’t see a more elegant way)

    /* this stuff moves the image up */
    #access, #branding a img:first-child {
    top: -190px;
    position: relative;
    }

    /* this stuff keeps text on top */
    #branding hgroup { top: +50px; position:relative; z-index: +1;}

    /* this stuff changes text size for header, depresses description */
    /* and adds shadow so text legible whatever background (within reason) */
    #site-title span a {font-size: 55px;}
    #site-description {font-size: 25px;}
    #site-title a, #site-description {color: #fff; text-shadow: #003 1px 1px 5px;}

    /* Colours the search form and keeps it on top */
    #searchform {background-color: #ddd; z-index: +10;}

    #main {top: -185px; position: relative; z-index: +20;}

    Downside is that if the description (for example) is switched off, the things no longer line up. The z-index is to keep things clickable. Also, on load, things get pushed around. As I say, inelegant, but….

    I did have the header image with rounded corners and no white bar above, but I got rid of that in testing as the grey menu bar also got rounded (there is no class selector on the header image).

  28. Thanks Om
    It all worked except my individual posts left alligned. By the way it will be ok but I want one more help from you that I want to display one google add at the right side of the title newaboutindia.com, can I do that also.
    Thanks a lot
    Yogesh

    http://newaboutindia.com

  29. Johnny Stork says:


    Good day. First I want to thank you for posting these css tips. I have managed to resolve a few of my own issues but if its not too much trouble, I have a couple issues I am stuck with.

    1: I uploaded some images for the banner, then decided against them so deleted them from the uploaded images folder and although they no longer show up in the “Header” editing admin page, their buttons still do so now that I added new images to flip randomly, I also get blank headers. How can I completely remove any sign of previous header images uploaded but deleted?

    2: Any way to get rid of the “Featured” text on the home page for a sticky post?

    3: How can I reduce the spacing below the “” links to the post text? There is a huge white-space until the post text begins.

    4: For home page posts, each post title has a horizontal line above and below the title. Is there any way to reduce the spacing between those lines and the title text?

    5: This is my main problem. Tables with an image get messed up. Each post begins with a small 3 column table with the left-most cells all merged for the image. But the text/table gets shifted below the image in the post, although it looks fine in the editor?

    I know I am asking alot, and you are likely very busy. But any help you can provide would be wonderful and I would certainly “buy you a coffee” many!

  30. Spinch says:

    Om, here’s an odd question…

    Is there an easy way to swap the position of the header image and the title text in Twenty Eleven? I’d love to have the header image on top and the title underneath (and better yet, if I could have the blog description/tagline on the same line as the blog title…)

    Thank you so much for your input. (And for the record, my website is http://killitwithfire.org).

  31. birdsnest says:

    very nice but I miss something.. how do I replace the site title and description for a logo?


    • Hi Bird
      Would you mind to share me your website address?

      Regards
      Om


      • Hi Bird
        Try the following code to replace your Header Title with Logo
        **If you don’t want to show description just remove it from “Settings –>General” ..but dont remove the Site Title text

        #site-title {
        background-image: url(“http://freesmsinfo.files.wordpress.com/2011/06/cedross.png”);
        background-repeat: no-repeat;
        margin-right: 184px;
        padding: 3.65625em 0 0;
        }

        #site-title a {
        color: transparent;
        font-size: 30px;
        font-weight: bold;
        line-height: 36px;
        text-decoration: none;
        }

      • birdsnest says:

        Hi allaboutbasic,

        first of all thx for helpiong me out here. I’ve tried the code but it does not work. The title is gone when I use that code and when I move my mouse over the title it appears but there is no image visible. I’ve just upgrated twenty eleven to version 1.2 and wordpress to 3.2.1 NL_nl. what should I do now? :(

        thx in advance!

      • Hi Bird..
        Have u pasted the code at the bottom of your style.css?

        Please paste the code again and let me check the problem..

        Please inform me when u again pasted the code..

        Regards
        Om

      • birdsnest says:

        ok pasted..

        please note: the logo I want to use is 100px width, 110px high located @ http://www.bankrasbadjes.nl/logo.jpg

      • Hi Bird
        The Code you pasted there was an error in the URL

        Here is the code… paste the code as same as below

        #site-title {
        background-image: url(“http://www.bankrasbadjes.nl/logo.jpg”);
        background-repeat: no-repeat;
        margin-right: 184px;
        padding: 3.65625em 0 0;
        }

        FOr Mouse Over Site Title

        go to line 456 of your style.css and find out the following

        #site-title a:hover, #site-title a:focus, #site-title a:active {
        color: #1982D1;
        }

        now make the color “transparent” instead of “#1982D1″

        If you have any problem pls let me know..

        Regards
        Om

      • birdsnest says:

        I did everything exactly the way you said but still it wont work, sorry for the trouble mate but I can’t figure it out myself :( do you want a admin account or have any good tips further for me?

      • Hi BIrd..
        Try to add me in skype..
        om2000_cuet is my skype id

        Regards
        Om

      • birdsnest says:

        thx all fixed now thx to skype support by you, great work thx mate! :D

      • Hi Bird…
        Thanks for your coffee too…it was really cool…

        Om

    • Host says:

      That’s the biggest one lol


  32. I have removed the H1 which appears between the top menu and the pages content. There still remains to be a large blank space between the menu and content though, and I can’t figure out how to remove or reduce it.

    Any help much appreciated, I am working just by editing style.css or the php files directly.

  33. Thanks very much, it has made it a bit better. How do I make it even less of a gap though? I have tried playing about adding more or less to the 0.5em, but I can’t get the gap any smaller…

    • Hi Tom….

      also try this following code

      #main {
      clear: both;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      }

      and let me know it works for you or not..

      Regards
      Om

      • Thats it, yes!

        Thank you so much Om! You are great, and your blog is super! :)

      • NIce to hear tom….

        **********let me buys a coffee ****************** :)

        haha..

      • Enjoy the coffee Om! :)

      • Great..
        Thanks for the Coffee Tom…. :)

      • Johnny Stork says:

        I also tried this in my style.css for a child theme importing 2011, but it did not make a difference to the spacing below the navigation bar and the post titles.

        .singular.page .hentry {
        padding: 0.5em 0 0;
        }

        #main {
        clear: both;
        padding-bottom: 0;
        padding-left: 0;

      • Hi Johnny….
        try the following css code…. paste the code at the bottom of your style.css and let me know it works for you or not…

        /************** To Reduce the upper and lower gap of Continue Reading ***********/
        .entry-content p {
        margin-bottom: 8px;
        }

        #_mcePaste {
        margin-top: -18px;
        margin-bottom: -16px;
        }

        /********** To Reduce the space between Nav menu and Post Title ********************/

        #content nav {
        clear: both;
        overflow: hidden;
        padding: 0;
        }

        /********** Spacing between Post Title and the Horizontal Line in Home page **************/

        .hentry, .no-results {
        border-bottom: 1px solid #DDDDDD;
        margin: 0 0 0.625em;
        padding: 0 0 1.625em;
        position: relative;
        }

        .entry-content, .entry-summary {
        padding: 0.625em 0 0;
        }

        Regards
        Om

  34. Dave says:

    Fantastic Post!

    How about how to remove the border around images in posts or pages?
    I learned more about WordPress themes in the past 2 hours than in the past 2 years…lol
    Thank you

    • Hi Dave…
      Don’t mind..i didn’t see any border around your website bcrestaurant.org…

      Also, you are not using twenty eleven theme…

      Regards
      Om

      • dave says:

        Sorry, not that page… here is a demo of an image on 2011 http://eltacowhiterock.bcrestaurant.mobi/dailydeal/

        How would you remove border and spacing?
        Thanks

      • Hi Dave…
        Would you mind to try the following codes and let me know it works for you or not?

        /******************Put this code at the bottom of dark.css (/wp-content/themes/twentyeleven/colors/dark.css)**************/

        img[class*=”wp-image-“], #content .gallery .gallery-icon img {
        border:none;
        }

        /************put these codes at the bottom of your style.css *************
        .entry-content {
        padding: 0px;
        }
        #main {
        clear: both;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.625em;
        }

        Regards
        Om

      • Dave says:

        Hi Om

        Sorry but that one didn’t work. I am using a child theme so I added the code to my child css and dark.css in the main theme. I them tried adding a color folder with dark.css in it to the child theme…neither worked.

        Any other ideas WordPress Wizard? :-)

      • Hi Dave..
        For Child theme I need to check it more… so if you want then you can add me in my skype. om2000_cuet is my id..

        Regards
        Om

      • Dave says:

        Hi OM
        I have too many themes I was working on at once so I was trying it on the wrong one lol. It worked perfectly, Thank You!

      • Thats Great Dave…
        Cheers.. :)

        Om

  35. Linda JOhansson says:

    Hi, thank you so much for taking time to write this css modification info! I would like to have my logo ‘centered’… But it seems like there is a box at the right side were the search box used to be in, that is messing it up. Do you know how i can remove it?

    Thank you

    Linda Johansson

  36. Daniel says:

    Awesome article. Helped me a lot (since I’m illiterate in css/php).

  37. Wachgellen says:

    Thanks, this was helpful!

  38. Sorry om, I am pestering you again with a further problem…!

    I can’t get the ‘Leave a reply’ comment box to dissapear go away, I have tried doing this via the discussion checkbox in the admin backend, but still it remains, is there some code I can change for this?

    Many Thanks in advance!

    Tom

    • Hi Tom…
      If you want to delete / hide Leave a Reply only from “Pages” then use a plugin “No comments on pages”. it will delete/hide comments section Only from “Pages” not from “Posts”…..

      I think you are searching for this type of plugins..
      Please let me know..

      Regards
      Om

  39. Johnny Stork says:

    Thanks kindly “allaboutbasic” that worked! Any chance you know how to get rid of the “Featured” text about the sticky post on the home page?

    • Hi Johnny

      Try the following code and let me know it works for you or not… ( don’t forget about the coffee :) )

      .entry-header .entry-format {
      color: #666666;
      display: none;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      position: absolute;
      text-transform: uppercase;
      top: -5px;
      }

      Regards
      Om

      • Johnny Stork says:

        FABULOUS Om! That did the trick! Thank you again for all your help, you have been incredible and solved nearly all my css issues. My cards are full right now but I will send you something when I have some room :)

        Thanks again and have a great day!

      • Thats Great Johnny.. :)

        Waitin for your coffee.. haha..

        Let me know if you have any problem.

        Regards
        Om

  40. Matt says:

    Thank you so much for this guide. Its been a huge help for a WordPress neewbie.

    Are you able to help with getting featured images to show as post thumbnails? I’m having a world of trouble getting it to work in this site http://www.rachaellynch.com.au/blog/

    Thanks.

  41. Thanks so much Om! :)

  42. Hanna says:

    Hi,

    Thanks for this awesome guide!!

    Could you please help me customize the comments and leave a reply-form?
    I’d like to:
    – narrow the space between the name, email, website and comment boxes in the leave a reply-form
    – translate all the original text included in the comments area and leave a reply-form into another language

    I can’t publish the site name here but can send it by email if necessary!
    Thank you SO MUCH in advance!

  43. eddie says:

    hello, how can I expand the widget right sidebar to 300px ?

  44. Guy Scharf says:

    Thank you for your wonderful help! I’ve changed navigation bar font, size, and made it black on white (instead of the default white on black). How can I now:

    a) Eliminate the grey line below the navigation bar?
    b) When the mouse moves over menu items, the items are in a gray box. I’d rather change the font color when mousing over a menu item.
    c) Center the navigation menu?
    d) Increase the spacing between items on the navigation menu?

    Thank you!

    • Hi Scharf
      Would you mind to share me your website address for checking?

      Regards
      Om

      • Hi Scharf

        Would you mind to try the following CSS codes and let me know it works for you or not ? :)

        To Eliminate the grey line below the navigation bar

        #access {
        -moz-box-shadow: none;

        }

        /****** On Mouse Over not to change the Background Color but to change the Text Color****************/

        #access li:hover > a, #access ul ul :hover > a, #access a:focus {
        background: none;
        color: red;
        }

        /********* TO make the Navigation Menu Center ***********/

        #access ul {
        font-size: 13px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-bottom: 0;
        margin-left: 6.8125em;
        margin-right: 0;
        margin-top: 0;
        padding-left: 0;
        width: 900px;
        }

        /********** To increase the spacing between Navigation Menu Items ****************/

        #access a {
        color: black;
        display: block;
        font-family: times New Roman;
        font-size: 18px;
        line-height: 38px;
        padding-bottom: 0;
        padding-left: 31px;
        padding-right: 31px;
        padding-top: 0;
        text-decoration: none;
        }

        ***Don’t forget to buy me a coffee if all of them works.. :)
        Regards
        Om

      • Guy Scharf says:

        All worked excellently — thank you.

        I have a question that is probably a general CSS question. There are a lot of definitions in style.css that set a background color. Is there a way I can create my own color name (e.g., my-color #060708) and then use “my-color” in all the places that set a background color? Then if I want to change the color (and I’m sure I will), I would have to do it in only one place. That would let me make the page more seamless with less work.

      • Hi Scharf….

        Thats Great :)

        Would you mind to add me in skype? om2000_cuet is my id….
        It would better we chat live…

        Regards
        Om

      • Guy Scharf says:

        Sorry, I am not using Skype on this machine. I did some Google searches for css constants and discovered they don’t exist natively and the work-arounds have consequences. I’ll just pass on this question for now.

      • Hi Scharf…

        Yes right.. CSS doesn’t provide that functionality…

        IF you are happy..let me buy a coffee.. :)

        Regards

  45. Hi,
    Any ideas how to add a border to the left and right of the entire page? Similar to if the whole thing were contained it a wrapper…it doesn’t seem to be though…

  46. cirex says:

    Hi,

    Is it possible to add a drop shadow in a whole page?

  47. albwaa says:

    Hi,

    I’d like to make my header a flash header. Is it possible to get it in there as a work around in the twenty eleven theme?? my account is a wordpress.com
    http://www.lawrencegreen.com.au

  48. K Worthy says:

    My web site isn’t up yet; I’m still setting it up.

    The postings start with this:
    By Joe on 05/5/2011

    And I want to have them read like this, with categories and the number of comments.

    By Joe on 05/5/2011 in cat1, cat2 with 2 Comments

    Is that possible?

    Thanks

  49. K Worthy says:

    OK, now I have the site online and you can check it here:
    kennethworthy.net

    I’m still looking to get rid of the comment bubble (method posted above didn’t work), and to give a more complete posting line like this:
    By Joe on 05/5/2011 in cat1, cat2 with 2 Comments

  50. K Worthy says:

    I’ve found the solution to remove the comment bubble:

    /* Get rid of comment bubble. */
    .entry-header .comments-link {display: none;}

    And, to remove the “Proudly powered…” (Actually, I wouldn’t mind just removing the Proudly.)
    /* Remove the “Proudly powered by WordPress” */
    #site-generator {display: none;}

    Put those in the style.css of your child theme.

    I still need help with the “By Joe…” at the beginning of posts.
    thanks,
    Ken

    • Kenneth,
      I have seen your site in my laptop and found your full website is fully aligned to the left….. please check it….
      *** For php files modification…. actually for this you better add me in skype (om2000_cuet) is my id.

      Regards
      Om

    • K Worthy says:

      Wondering why I keep receiving e-mails from postings here. How to turn it off??

      • :(

        Dont know Kenneth…

      • lenfarneth says:

        Here is a stupid question. I have been trying to figure out for about two hours now how to get rid of the white space above and below the title on public page every page using the 2011 stock template. This page is the closest I have found to help. Now for that stupid question…. Which of the 110 files that end in .css do I need to modify?

      • Hi Lenfarneth

        Would you mind to share me your website URL to check?

        Regards
        Om

    • Bryan says:

      Ken, thanks, this was one of the items I wanted to change today, you just saved me hour or two searching. Mucho appreciated mate.

      Cheers

  51. Robin says:

    Hi,
    When my website is viewed on iPhone browser the search bar overlaps the header title and “each word” in the menu breaks into its own row.

    I already installed the wp-touch pluging, but I wanted to have the “normal” version look clean for those who don’t like to use the mobile version.

    Any toughts?

    http://www.missionsbox.org

    …..about 3 hours later…
    Finally, check out this link for a really easy solution.

    http://wordpress.org/support/topic/turning-off-mobile-support-for-twenty-eleven

  52. Beverly says:

    Hello, I would like to know if there is a way to add widgets to the “post” pages. The only navigation available on those pages are the “previous” and “next” links.

    Thanks

    PS. Your site is very helpful, and I will buy you a coffee.

    • Hi Beverly..
      I think you are asking for “Pagination” in wordpress….for example “Page : 1,2,3,4,” such pagination in the footer side… am i right?

      If yes…. then have you tried WordPress Pagination Plugins?

      Regards
      Om

  53. zero says:

    Hi there, can you tell me where should i adjust so that my top height fit fully to top screen.

    zerohentai.com

    Thanks for your help

  54. anna says:

    hi I would really appreciate some help I have a gap between the header image and navigation in IE but not firefox

    http://www.annas.hcprojects.co.uk

    Thank-you for an excellent forum :-)

  55. anna says:

    It would be very grateful if you could help – when you hover over a menu item the hover area is really big I would like it to be the same height as the menu bar. If you have time some advice would be great. Thank-you again for an excellent forum.

    • Hi Anna,

      WOuld you mind to try this code

      #access a {
      color: #EEEEEE;
      display: block;
      line-height: 3.333em;
      margin-top: 8px;
      padding-bottom: 0;
      padding-left: 1.2125em;
      padding-right: 1.2125em;
      padding-top: 0;
      text-decoration: none;
      }

      Please let me know it is Ok for you or not..

      Regards
      Om

      • anna says:

        Hello, ty for getting back to me :-) the code soes work although looks a little different in ie9 a massive improvement though ty :-)

      • Hi Anna…

        Nice to hear that my codes works for you…..

        Is there any way i could do any thesis or project under your direct supervision :)

        Regards
        Om

  56. victoria says:

    Hi! Thank you for all of your info and editing help already listed here.

    I do have a question that I would love some help with. (I am just starting my site and have no actual posts yet). http://foreverfashionablylate.com/2011/07/14/hello-world/

    I have been trying to edit the size and entire look of the comment form but I cannot find where to do so. It is too huge and ugly and I would love a very simple form, like the original wordpress default. (Just plain black and white, no huge space between lines, but with the comment box listed before the reader’s information).

    I have been trying to find where to even start editing this and it is very confusing. I cannot find the comment form information anywhere in the parent theme’s comments.php or functions.php.

    Do you have any idea how to do this?

    I’d really appreciate any help! Thank you!!

    Victoria

    • Hi Victoria…
      I think you are searching for this

      #respond p {
      line-height: 14px;
      margin-bottom: -17px;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      }

      paste the code at the bottom of style.css (Appearance–>Editor) and let me know it works for you or not..

      Regards
      Om

  57. victoria says:

    Hi Om!

    Thanks for your quick response. Unfortunately nothing changed when I added this to the bottom of my child theme style sheet… any suggestions?

    Thanks again!

  58. Ross says:

    Om, the white post area is no longer an issue. Please disregard this second question. I now only need to know about the nav button hover colour, if you would be so kind.

    Cheers!
    Ross

    • Hi Ross..
      Sorry for the late in reply as u commented me in my midnight time :)

      One question..are u using Child theme of twenty eleven?

      Regards
      Om

    • Hi Ross…

      Try the following code . (paste this code at the bottom of your style.css ) if you are using child theme then paste this code at the bottom of your parent theme’s style.css bottom.

      **** You have to change the color code as your wish.. :) Please let me know it works for you or not.

      #access li:hover > a,
      #access a:focus {
      background: #f9f9f9; /* Show a solid color for older browsers */
      background: -moz-linear-gradient(#f9f9f9, #333333);
      background: -o-linear-gradient(#f9f9f9, #e5e5e5);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#333333)); /* Older webkit syntax */
      background: -webkit-linear-gradient(#f9f9f9, #333333);
      color: #373737;
      }

      Regards
      Om

      • Ross says:

        Hi Om

        How dare you be asleep at midnight instead of sitting permanently at your screen to help ignoramuses like me within minutes of posting! :)

        Yes – I am using a child theme, and yes, your solution worked! Thank you!

        Just a couple of questions, though, please. I’m not sure how to change the colour properly, because I don’t know what pats of the code refer to gradient colour and what to just making a plain hover colour. I messed around blindly and changed the code as follows:

        #access li:hover > a,
        #access a:focus {
        background: #FF8C00; /* Show a solid color for older browsers */
        background: -moz-linear-gradient(#f9f9f9, ##FF8C00);
        background: -o-linear-gradient(#f9f9f9, ##FF8C00);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#333333)); /* Older webkit syntax */
        background: -webkit-linear-gradient(#f9f9f9, #333333);
        color: #373737;
        }

        Seems to have worked OK to make a plain orange hover colour, but have I messed anything up with my random changes!??

        My other question: Is it possible to make this change to only the style sheet of the child theme, rather than interfering with the parent theme? I thought the point of having a child theme was to leave the parent in its original state as a solid reference in case I stuff something up badly with the child theme, and to ensure customisations are not affected if the parent theme is upgraded or changed in the future?

        Cheers!
        Ross

      • HI Ross….

        this code will help you to achieve gradient effect……

        *** FIrst color code is Starting Color (Gradient Start)
        *** Second color code is the End Color (Where Gradient will end)

        So, if you want to show your color Whitish orage Gradient.. Just select white color for the first code..and orange color for the second code..
        :)

        Regards
        Om

      • Ross….

        Don’t worry about you will mess something or not…. that are simple css….

        But if you afraid…then take backup of your working style.css and do the necessary changes……

        MoreOver… I am here :) no need to be worried..

        Regards
        Om

      • Ross says:

        Haha – good to know you’re always there, Om. I suppose we can allow you to sleep a little in between answering our queries.

        Just one thing: is it necessary to modify the parent CSS if I want to make changes to a child theme? Could I just make the additions you recommend to the child theme CSS and leave the parent theme CSS unchanged?

        Cheers!
        Ross

      • HI Ross…..

        Yes.. Try the code in your child theme first….if it doesn’t work then put it in the parent theme….

        If you face problem let me know.. om2000_cuet is my skype id.

        Regards
        Om

      • Ross says:

        Om,

        Just to let u know, I took the code off my parent style sheet and pasted it into my child theme style sheet – and it worked! Thanks again.

        Cheers
        Ross

      • Hi Ross…
        WOuld you mind to try the following code seperately and check which one suits you?

        .entry-content p {
        margin-bottom: 10px;
        }

        .entry-content br {
        margin-top: 5px;
        }

        Please let me know they works for you or not..

        Regards
        Om

      • Ross says:

        Om, I’m not sure what the following code refers to. Is this related to my question up the page about the css code reducing spacing of text under paras also affecting para spacing in text-only sections?

        .entry-content p {
        margin-bottom: 10px;
        }

        .entry-content br {
        margin-top: 5px;
        }

        If so, whatever the problem was with para spacing seems to have sorted itself out – dunno why or how, but it does! And the spacing of text under pics is also as I want it.

        But maybe the above 2 code entries refer to something else? (As you can see, I do not understand CSS at all).

        Could u pls clarify?

        Cheers
        Ross

      • HI Ross…
        Bot of the code I have given will increase the gap between the paragraph…but will not effect the text at the bottom of the images.

        You can increase the values which i have used to meet your need.

        You can use both or any of them depending your requirements…

        Please let me know if you have any problem in understanding..
        :)

        Regards
        Om

  59. lenfarneth says:

    Hi I found it. Thanks this page is great. I am testing here http://lenfarneth.com/blogs/mg/ final deployment will be here http://floriblog.com/ Btw is there a way I can replace the wp search box in the header with my google adsearch?

    • Hi Lenfarneth..

      Yes..you can replace…. i think if you go to header.php there you have to do the canges…but..if u dont have the basic of php and html it may breaks ur layout.
      So take backup first…

      Regards
      Om

  60. lenfarneth says:

    Hi I found it! The website is http://floriblog.com/ Now is there a way I can modify the size of the space above the title box area? Also how can I replace the wordpress search box with my google box. Many thanks. Coffee is brewing right now ;-)

    • Hi Lenfarneth..
      Yes..I like the coffee.. :)

      to remove the white space above the title box use the following code

      #page {
      margin-bottom: 2em;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      max-width: 1000px;
      }

      and..to replace the wordpress search box with your google box you have to modify the header.php ( i think) ….
      would u mind to share me the code in my mail? om2000_cuet@yahoo.com is my mail id..
      I will check it and let u know..

      regards
      Om

  61. Johnny Stork says:

    Hello again. Hopefully you got the “coffee” payment I just sent. Anyway, I have just started another site with the 2011 theme and all the same customization’s you helped me with before. Seems like I have two issues right now and thought you might be able to help.

    1: On the first site (www.philosopherscafe.ca), I had to find some table css code to clean up the table entries I use on the posts. They look fine except in Chrome where the images are squished up against the text. This does not happen under IE or FF. The table code I used in the style.css is below.

    2: On the new site (www.strata101.ca), the menu links to two pages I created (Resources & Contact Us), do not show up when I go to any posting? They do remain in place if I go to other pages. If I switch back to the stock 2011 theme it works fine so this made me think its something in the customized style.css. My customization’s are long now so I wont post them all unless you need to see them all.

    Thanks kindly for any help you can provide. :)

    /* Tables */

    table {
    padding: 0;
    margin: 2px 15px 12px 15px;
    border: 0;
    }

    table caption {
    color: #444;
    background: #ddd;
    padding: 5px 8px;
    font-family: arial, tahoma, verdana, helvetica, sans-serif;
    font-size: 17px;
    line-height: 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    }

    table thead tr th, table tr th {
    text-align: left;
    padding: 2px 4px;
    color: #777;
    background: #e7e7e7;
    }

    table tbody tr td, table tr td {
    padding: 3px 4px;
    color: #666;
    font-family: arial, tahoma, verdana, helvetica, sans-serif;
    font-size: 14px;
    line-height: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    }

    table tfoot tr td {
    color: #888;
    font-size: 11px;
    padding: 2px 4px;
    }

    .singular.page .hentry {
    padding: 0.5em 0 0;
    }

    #main {
    clear: both;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }

    • HI Johnny….
      Great…I got the coffee payment :) thanks again……

      For your first problem…if i understood right..u r asking for this

      .entry-content td, .comment-content td {
      padding-right: 35px;
      }

      I am downloading chrome right now..I will check it more to get better idea about your problem..

      Problem 2 :

      When i go to any of your post or page the menu items Resources & Contact Us remains in their place ..i didn’t get any problem…
      Umm.. would u mind to clear me the problem ?

      • Johnny Stork says:

        Thanks kindly allaboutbasic! Your suggestion for problem #1 worked and now the site looks ok in Chrome as well. Tables are lined up fine.

        Looks like problem #2 was a mistake. Forgot about WP Cache running and so its fine now. All the links to pages show up properly.

        Thanks again for all your help! Great job!

        ps: I am not getting notices when I check the box to be notified of updates. Might be stuck in one of the three server-based spam tools I use. :)

      • Hi Johnny…..
        Nice to know my solution works for your…..

        Please let me know if you have any problem :)

        Regards
        Om

  62. Ray says:

    Hi,
    Also a noob/dumb query here. Im trying to integrate my blog into my site and i think i’ve come close. i cant seem to make the backgrounds transparent :(

    I’ve tried your suggestions up top (also by changing the colors to something like bright red so i can see changes) but no luck.

    any tips?

    http://www.stuffraymakes.com/rayblogs/

    • Hi Ray…

      Try the following code and let me know it works or not (paste it at the bottom of style.css)

      #content {
      background: none repeat scroll 0 0 transparent;
      color: #333333;
      display: inline;
      float: left;
      height: auto;
      margin-top: 0;
      padding-bottom: 100px;
      width: 960px;
      }

      Regards
      Om

  63. Luiz Ferraz says:

    Hello Om!

    Hope you enjoyed the coffee…

  64. Rungplaifa says:

    Thank you very much for your kind info. This article help me alot to modify this theme.

  65. Bryan says:

    Great blog and very helpful indeed. I have one goal at the moment, to change the font and size of the Header on the top left. It’s my personal blog (evolving) and I would like to use a Hand written type font. Do i need to create a child theme? And, if i need to change style.css, where in the file do i put the mods. I have installed a couple new fonts that i like. The site is http://www.bryanmillhouse.com

    • Hi Bryan…
      Paste the following code at the bottom of style.css (“Appearance–>Editor) and let me know it works for you or not.

      #site-title a {
      color: #111111;
      font-family: Georgia,”Times New Roman”,Times,serif;
      font-size: 26px;
      font-style: italic;
      font-weight: bold;
      line-height: 36px;
      text-decoration: none;
      }

      Regards
      Om

      • Bryan says:

        Yep! worked great. Ok, so now, i’d like to use a handwritten font, i installed a plugin that allows font upload, but when i used the plugin, it changes all the H1, H2, H3 etc, thats not what i want. So should i replace the “times new roman” with the name of preferred font, and, where do i find that exact name.

      • Hi Bryan..
        Yes..you can try…. and let me know it works for u or not..

        REgards
        Om

  66. Ray says:

    Hi Om
    Yeh, i pasted it at the bottom of style.css (i tested it with and without # in front of ‘article’)

  67. Ray says:

    great work and awesome help! thanks for everything Om

  68. alan says:

    Hi, I’m already using some of your cunning code in a twentyeleven child theme. I don’t know if you know how to solve this annoying little problem. With a child theme, my menus don’t show in IE7. They show in Chrome and Firefox. For now I’ve had to duplicate them in the sidebar but I want the navigation bar just to run along the top below the header.

    url: http://www.theborrowdalestory.co.uk/

    alanpmcd

  69. Bryan says:

    Coffee purchased mate, and i encourage all who get some of your great (fast) help, do the same ! nice work Om.

    Cheers

  70. Ross says:

    Hiya Om. Life got in the way and I haven’t been able to get back to customising my blog. Got a little break now…so if you wouldn’t mind… :)

    This query will be easier to understand if you see my site:

    http://theboomtownrap.perthpunk.com/wordpress/

    I want to relocate the Tweet button next to the Facebook items, and to the right, rather than above as is currently the case. I want to do this at both the top and bottom of my posts. Is this achievable with CSS, please?

    Cheers
    Ross

    • Hi Ross..
      Nice to see you again…. Give me some time..i am checking your problem…in the mean time if you have skype..would u mind to add me? om2000_cuet is my id…

      Regards
      Om

    • Hi Ross…
      WOuld you mind to try the following code and let me know it works for you or not?

      div.tweetthis {
      float: right;
      margin-right: 51px;;
      }

      Regards
      Om

      • Ross says:

        Always so polite, Om! :) And YES, your CSS worked. Thank you! You’re a gentleman and a CSS star!

        I think the tweet button is fine where it is, but if I wanted to move it left, closer to the Facebook stuff, how would I change the CSS? I tried changing the 51px to various different values, but only succeeded in moving the button further to the right, or up to the next line where it was before.

        I’m not on Skype, by the way. I was, but couldn’t get the sound to work, so uninstalled it.

        Cheers
        Ross

      • HI Ross…
        I checked it…..
        it will need to check the plugins file(facebook like plugins) to give space the twitter button close to facebook.

        Regards
        Om

      • HI Ross…

        sorry… Discard my previous response..i think i got the solution..please try this and let me know it works for you or not…..

        .fb_edge_widget_with_comment {
        position: relative;
        width: 317px;
        }

        div.tweetthis {
        float: right;
        margin-right: 184px;
        }

        Regards
        Om

      • Ross says:

        Hi Om. Yep – your new code was spot on, as usual. I think I like the Tweet button better like that, immediately adjacent to the FB stuff. Thanks yet again!

        Where are you, by the way – if you don’t mind me asking?

        Cheers
        Ross

      • Hi Ross….
        NIce to hear that my code work…are you asking me where i am from ? I am from Bangladesh :)

        Regards
        Om

      • Ross says:

        Om, I’ve just noticed the Tweet button seems to interfere with the first line of posts that begin with text. eg: http://theboomtownrap.perthpunk.com/wordpress/112/why-has-the-nanny-state-forsaken-our-jocks/

        You’ll see in that example post that after ‘news.com’ the line ends and the next word ‘today’ continues on the next line down.

        Is there any modification to the CSS that will stop this happening, please, but without altering the position of the Tweet button?

        BTW, I’ve been to Bangladesh. Spent 3 days in Dhaka – but that was a long time ago now. I remember having some fantastic small-grain rice at a Chinese restaurant there. Some of the tasiest rice I’ve ever had. I don’t think I’ve come across such small grains anywhere else – and certainly not as beautiful in flavour.

        Cheers
        Ross

      • Hi Ross..
        Just finished checking the problem…Yes..one iframe in the facebook plugins is overlapping the tweet button which makes the tweet button stop working…
        I need to check the files of that facebook plugins to make the tweet button works and also need to check your contnets of that post where there lines goes down.

        Regards
        Om

      • Hi Ross…Here is a solution to make the tweet buttons working…
        Please let me know it works for you or not.

        div.tweetthis {
        float: right;
        margin-right: 184px;
        position: relative;
        z-index: 1000;
        }

      • Ross says:

        Hi again Om! Just tried your modified code and the Tweet button is now working again – thanks!

        However, as per my example link above, the interruption to the text on the first line of any post beginning with text only is still an issue. You don’t notice it with posts like the movie reviews, where an embedded youtube trailer is at the beginning of the post. If this is a time-consuming or annoying problem to resolve from your point of view, no worries – just leave it. You’ve already helped me enormously.

        Cheers!
        Ross

      • Hi Ross…
        Got the solution for your “Interruption to the text on the first line of post” Try the following code and let me know it works for you or not…
        and yes..if you want u can buy me a coffee.. :)

        div.tweetthis {
        float: right;
        height: 15px;
        margin-right: 184px;
        position: relative;
        z-index: 1000;
        }

        Regards
        Om

      • Ross says:

        Thanks Om – it worked! Just bought you a coffee (paypal user name = screendraft).

        Thanks for all your help!

        Cheers
        Ross

      • Hi Ross…
        :) yes..got it..thanks..

        Regards
        Om

  71. Which of your post? I have only my post in my admin area…

    Regards

  72. kweinstein says:

    Dear Om,

    I can change the height of the banner through the header CSS available through wordpress
    but my banner becomes distorted. It seems that twenty eleven needs to upload the header in the dimensions of 288px x 1000 px.

    If I was using a solid block of color there would be no issue of changing the height–but since my header has text, there seems to be no way to change the height. I have tried creating many banners, cropping in wordpress and then changing the height in css–but nothing seems to be working. Is there anything else I can try, short of creating a child theme?

    the url is

    http://consultingresourcesny.wordpress.com/

    Many Thanks,
    Kathryn

  73. kweinstein says:

    it’s open now
    thanks
    kathryn

  74. kweinstein says:

    I’ve just placed a header in the desired size (1000 x 188 px)
    Twenty eleven forces me to crop the image
    i’ve put the original file on the front page of the site

    • Hi Kathryn…
      give me some time and let me check it if i get any solution or not…do you have skype?

      Regards
      Om

      • HI Kathryn
        Try the following code…. If this code works…let me buy a coffee :) let me know it works for u or not..

        #branding a img {
        display: none;
        }
        #branding hgroup {
        background-image: url(“http://consultingresourcesny.files.wordpress.com/2011/07/banner181.png”);
        height: 188px;
        margin: 0;
        width: 1000px;
        }

        Regards
        Om

  75. Tony Mizzell says:

    I appreciate your site and have found a few of the tips very useful, therefore, I have already made a donation so you can buy a cup of coffee or two. Since you seem so knowledgeable on wordpress and the theme twenty eleven, I would like to throw a couple of questions out to you and see if you can steer me in the right direction. If so, I’ll make another donation and maybe dinner, this time.

    First I’m working on a develepmental site. you can reference the test site at http://www.tonymizzell.com. I have two issues that I need help with and it’s kind of over my head. I’m developing a couple or three or four microsites for a pool company and they will all be similar in nature with the exception of some content and geographical information changing out on each site, so I would like to build it off of one theme and use the widgets, etc, to drive content from the database for the localization information.

    #1 I would like my widgets to be styled similar to this site: http://www.irmopoolcompany.com.

    #2 I would like to be able to add a phone number widget with the city in the top right hand side of the header like in the above mentioned site as well.

    I think twenty eleven is the perfect theme to build these off of. I’m not an experienced coder or web development guy; however I can get myself around the files and change css files, etc. I’ve been fighting with styling for a couple of days and can change the widget style but when I change one they all change.

    I’ve also tried styling directly in the widget and have had a little success there, but mostly I would like to create several clean widgets that I don’t have to style each time I build a new page for this company.

    Thanks for any advice.

    Regards,

    Tony

    • HI Tony..
      Thanks for your donation :)

      Would you mind to try the following code ( take backup of your previous style.css first) and let me know it is going ok or not..

      #secondary {
      background-color: #F8F8F8;
      float: right;
      padding-left: 13px;
      padding-right: 11px;
      width: 24%;
      }
      #primary {
      float: left;
      margin: 0 -26.4% 0 0;
      width: 98%;
      }
      #custom-contact-forms-3 {
      background-color: #F0EED7;
      padding-right: 10px;
      }

      #text-3 {
      border: 1px solid lightgrey;
      padding: 5px;
      }

      .widget-title {
      color: black;
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      padding: 3px;
      text-transform: uppercase;
      }

      Regards
      Om

  76. Chris says:

    Maybe I’m missing it, but is there any way to get the sidebar from the front page to appear on all posts? Would love some help there. I’m a novice with this CSS stuff :-/

  77. I have a LOT of white space between posts. How do I remove that?

    Your above post was a HUGE help. Thank you!

    ~V~

  78. Johnny Stork says:

    Gee after getting all sorts of great help here with the customizations to the 2011 Theme, my site just suddenly got all messed up and I had to revert back to the stock 2011 theme. I didnt make any new changes to the customized child theme, and nothing shows in the Apache error logs so I am not sure where to start looking for the problem. But the link below is to a screenshot of what the site looks like with the child/theme off 2011 with the previous customizations. Below the screenshot url is the contents of my style.css if that helps.

    Messed up css:

    My styles.css:

    /*
    Theme Name: Twenty Eleven Child
    Description: Child theme for the Twenty Eleven theme
    Author: Johnny Stork
    Template: twentyeleven
    */

    @import url(“../twentyeleven/style.css”);
    /*
    @import url(http://fonts.googleapis.com/css?family=Jura:600|Michroma);
    */

    /* Johnny Edits */

    /* Header title and fonts */

    #site-title a {
    color: blue;
    font-family: tahoma;
    /*font-family: ‘Michroma’, sans-serif;*/
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
    }

    /* Header Spacing */

    #site-title {
    margin-right: 270px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.65625em;
    }

    /* Header Spacing – Remove spaces above/below and Posted Date/Author */
    /*
    .entry-meta {
    clear: both;
    color: blue;
    display: none;
    font-size: 12px;
    line-height: 18px;
    }
    */

    /* Post titles */

    .singular .entry-title {
    color: red;
    font-family: tahoma;
    /*font-family: ‘Jura’, sans-serif;*/
    font-size: 1.2em;
    line-height: 24px;

    }

    /* Post titles – Home Page */

    .entry-title, .entry-title a {
    color: red;
    font-family: tahoma;
    /*font-family: ‘Jura’, sans-serif;*/
    font-size: 1.1em;
    line-height: 24px;

    }

    /* Site description under title */

    #site-description {
    color: red;
    font-family: tahoma;
    font-size: 14px;
    margin-bottom: 1.65625em;
    margin-left: 0;
    margin-right: 150px;
    margin-top: 0;
    }

    /* Left align post content */

    .singular #content, .left-sidebar.singular #content {
    margin: 0 0.6%;
    position: relative;
    width: auto;
    }

    #comments {
    float: left;
    width: 68.9%;
    }

    #respond {
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #DDDDDD;
    border: 1px solid #D3D3D3;
    float: left;
    margin: 0 auto 0.625em;
    padding: 1.625em;
    position: relative;
    width: 68.9%;
    }

    /* Reduce spacing below navigation bar and post text */

    #content nav {
    clear: both;
    overflow: hidden;
    padding: 0 0 1.625em;
    }

    .singular.page .hentry {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    margin-top: -15px;
    }

    .singular .hentry {
    border-bottom: medium none;
    padding: 0;
    position: relative;
    margin-top: -0px;
    }

    #main {

    border-top-color: #EEEEEE;
    border-top-style: solid;
    border-top-width: 3px;
    clear: both;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }

    /* Tables */

    table {
    padding: 0;
    margin: 2px 15px 12px 15px;
    border: 0;
    }

    table caption {
    color: #444;
    background: #ddd;
    padding: 5px 8px;
    font-family: arial, tahoma, verdana, helvetica, sans-serif;
    font-size: 17px;
    line-height: 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    }

    table thead tr th, table tr th {
    text-align: left;
    padding: 2px 4px;
    color: #777;
    background: #e7e7e7;
    }

    table tbody tr td, table tr td {
    padding: 3px 4px;
    color: #666;
    font-family: arial, tahoma, verdana, helvetica, sans-serif;
    font-size: 14px;
    line-height: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    }

    table tfoot tr td {
    color: #888;
    font-size: 11px;
    padding: 2px 4px;
    }

    .singular.page .hentry {
    padding: 0.5em 0 0;
    }

    #main {
    clear: both;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }

    /************** To Reduce the upper and lower gap of Continue Reading ***********/
    .entry-content p {
    margin-bottom: 8px;
    }

    #_mcePaste {
    margin-top: -18px;
    margin-bottom: -16px;
    }

    /********** To Reduce the space between Nav menu and Post Title ********************/

    #content nav {
    clear: both;
    overflow: hidden;
    padding: 0;
    }

    /********** Spacing between Post Title and the Horizontal Line in Home page **************/

    .hentry, .no-results {
    border-bottom: 1px solid #DDDDDD;
    margin: 0 0 0.625em;
    padding: 0 0 1.625em;
    position: relative;
    }

    .entry-content, .entry-summary {
    padding: 0.625em 0 0;
    }

    /********** Remove “Featured” in Home page **************/

    .entry-header .entry-format {
    color: #666666;
    display: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    position: absolute;
    text-transform: uppercase;
    top: -5px;
    }

    • HI Johnny

      How are you?

      Johnny would you mind to share me the link of your site so that i can check it?

      Regards
      Om

      • Johnny Stork says:

        Oops, Thats twice now I did that.

        http://www.stratazen.ca

        But I had to revert back to the stock 2011 theme so it looks fine now. But as soon as I switch to the child theme with the css above, the site looks like to screenshot in the previous message.

      • Hi Johnny,
        Good Morning(my side)
        Just checked your comments… yes.. your site Looks OK now…. Please let me know when you faced the problem.. :)

        Regards
        Om

      • Johnny Stork says:

        Actually it is NOT working ok. You must have missed the part where I said I had to revert BACK to the default 2011 theme in order to get the site up. Under IE and FF, the site looks like this:

        But with Chrome, it seems to be fine. Since the site does not load properly with FF or IE now, I have to keep the default 2011 theme up until I can determine the problem.

        Any suggestions?

      • Hi Johnny,
        THanks for your comments…yes..i missed it… would you mind to add me in skype so that we can chat and fixed a time to check the problem?
        om2000_cuet is my id.

        Regards
        Om

      • Johnny Stork says:

        I think I might have found the problem. It looks like the line which loads the style.css from the original 2011 theme, is not working?

        @import url(“../twentyeleven/style.css”)

        So what I did for now, temporarily, is to revert to the stock 2011 theme, make a copy of the default style.css and then add all the css from the child theme at the bottom. So the site is looking ok now, and when I have a chance I will go back and see why that import line is not loading the style.css.

        I am sure you are busy, so I wont bother you with this unless I find I still cant figure out why the style.css is not loading. Thanks again for all your help. :)

        ps: Still not getting notifications on updates to the comments here, so I will check my multiple spam boxes/filters. :)

      • Hi Johnny..

        Yes..Let us know the reason why it was not loading….

        Also… I am using wordpress.com free hosting site…not sure why you are not getting email notification… may be it is problem of wordpress.com
        :(

        Regards
        Om

  79. iza says:

    hello

    Anybody knows how to change footer and add my pages at the buttom like contact us, private policy etc… Also how to add copy right 2011.

    thank you

    Izabela

  80. markinhos9 says:

    Hello, first thank you very much for the post.
    I change the background of the blog because the theme options will allow you to switch between black and white only. I want this background (white or black) to be transparent because i want see the background-image.
    I tried put on the tag #page{ opacity:0.7; } but this change put all page transparent.
    I tried put on the tag #page{background-color: rgba(0,0,0,0.7); } but this option does nothing.
    Excuse my English but I am Spanish. Thanks

    • HI,
      To make your background transparent try the following code and let me know it works for you or not..

      #page {
      background: none repeat scroll 0 0 transparent;
      }
      #primary {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
      float: left;
      margin: 0 -26.4% 0 0;
      width: 100%;
      }

      Regards
      Om

      • markinhos9 says:

        Thanks for the reply but the changes did not effect…
        I can not think of anything more.
        Any ideas?
        Thanks.

      • HI,
        Where have u pasted the code i have provided to you? I didn’t see my codes in your site…
        Please let me know..
        Regards
        Om

      • markinhos9 says:

        Sorry, remove it because it did not work.
        Already put the code, but you can see that the primary has turned gray and I want to set transparent…
        if you want I can show you the effect you want by putting in the tag #page { opacuty:0.7;} but this option put the image, the comments and the entries transparents and I do not want that.
        You can see the code that you gave me… thanks.

      • Hi,
        Just paste this code at the bottom of style.css

        #primary {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
        float: left;
        margin: 0 -26.4% 0 0;
        width: 100%;
        }

        Also : paste the below code at the bottom of style.css again..

        #page {
        background: none repeat scroll 0 0 transparent;
        }

        Please let me know it works or not..

        Regards
        Om

      • markinhos9 says:

        Thank you very much, now works.
        I do not understand why did not work the same code in the upper tag “page” and “primary” and down the same code work perfect.
        Thank you very much.

      • HI…
        Nice to know the code works….

        If you are happy..let me buy a coffee…. :)

        Regards
        Om

  81. Hi

    Was wondering how to reduce the space beneath “Continue Reading” on the front page of the Twenty Eleven theme

    Thanks, Henry Swanson

  82. jpdacostas says:

    Wow. Thank you for taking your time and posting all of this great facts. One quick question, how do I center my menus for twenty eleven?

  83. jpdacostas says:

    Yeah the site is http://www.peaceofmebracelets.com I want to move the menus to the middle of the page instead of being indented to the left. Thanks =)

    • HI,
      Would you mind to paste the following code at the bottom of style.css and let me know it works for you or not?

      #access ul {
      font-size: 13px;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      margin-bottom: 0;
      margin-left: 18.8125em;
      margin-right: 0;
      margin-top: 0;
      padding-left: 0;
      }

      Regards
      Om

  84. jpdacostas says:

    That worked just fine. You’re brilliant! Thanks a ton. =)

  85. Babatunde says:

    Hello,

    Thanks so much for the lovely post: its been very helpful. Please I still don’t know how to show blog categories in my navigation menu. I know you told someone about it in the comments but I’m still confused as to how to do this exactly. Is there a CSS code I need to paste? Or is it something I can alter through in the “appearance” tab of my dashboard? Thanks for the help.

  86. Babatunde says:

    Sorry, I forgot to add: I want the blog categories to show in the Horizontal Navigation menu, where the home and about pages are. Thanks

  87. Hi again, hope you can help! Am (still) trying to

    1. Remove the grey bar immediately *below* the black nav bar
    2. Round the corners where “Blog at WordPress is (just like they are at the top), and
    3. Reduce the padding between the nav bar and individual post titles (nothing so far seems to work, grrrr ;-)

    http://alienfiction.com/2011/08/17/twenty-eleven-wordpress-theme-css/

    Thanks, Henry

    • Hi Henry..
      ** I didnt get any grey bar immediately below the black nav bar.. can u send me an image (screenshot ) for this?

      For the footer side Rounded corner try the following code (pls check it in different browsers)

      #site-generator {

      -moz-border-radius:.5em;
      -webkit-border-radius:.5em;
      border-radius:.5em;
      }

      To Reduce the padding try the following

      .singular .hentry {
      border-bottom: medium none;
      padding: 0 0 0;
      position: relative;
      }

      Pls let me know they works for you or not..

      Regards
      Om Prakash Chowdhury

  88. Jesus says:

    Hello allaboutbasic!

    Could you please tell me how can I make a line above and an other below the header picture of the Twenty Eleven like is in the following site?

    http://mitosoc.org/blogs/diagnosis/

    THANKS in advance.
    Jesus

  89. I’d like to change the width of my right sidebar but I want it to be smaller instead of larger. How do I adjust the float? Thank you for this by the way. Excellent information here and easy to follow.

    • HI Selma..

      paste the following code (you need to modify the width and margin as your choice) and let me know it is ok for you or not..

      #secondary {
      float: right;
      margin-right: 7.6%;
      width: 17.8%;
      }

      Regards
      Om

      • thank you. i will try it. Also, I saw the code for adding a border between the main section and right sidebar, but instead of a dotted line.. how do I make it the same as the border that surrounds the entire page? same color and style.

      • Hi Selma
        Would you mind to try this code and let me know it is Ok for you or not?

        #secondary {
        border-left: 3px solid #1e1e1e;
        float: right;
        margin-right: 5%;
        padding-left: 12px;
        width: 17.8%;
        }

        ** Just change the border color (#1e1e1e) with your preferred color.

        Regards
        Om

  90. Hi om,

    Hope all is well! Its me again!

    I am having another small problem with WordPress, I have emailed you the info hoping you may be able to help?

    All the best,

    Tom

  91. Thanks for the help again Om, another coffee coming your way!!! :)

  92. nizazainal says:

    Hi Om,

    Appreciate your help with the image size.. the original I upload is of size 650 px width, but it get streched/squeezed in twenty eleven, the size differs based on screen size. How to maintain the image size fixed at max (650px width) regardless of the screen size.

    Thanks in advance.

    • HI Niza…
      Just visited your site. Paste the following code at the bottom of style.css and i hope it will solve your problem

      #content {
      margin-bottom: 0;
      margin-left: 3.6%;
      margin-right: 34%;
      margin-top: 0;
      width: 70%;
      }

      Pls let me know it works for you or not

      Regards
      Om

  93. housewife92 says:

    Hello,

    Firstly, thank you for all the very generous and helpful information! I ran a search to try and find a way to remove the search bar from the menu and your codes here were the only ones that worked.

    I notice on my site that even though the search box is gone, the menu categories are still aligned the same way they were before, as if the search box area is still “full”. Is there a way to make the categories align to fill the whole menu, and fill the area to the right where the search box used to be?

    Here’s my site: http://itsahousewifelife.com

    Thank you for any help!

    Andria

  94. Samuel Lee says:

    Hello. How do I add images in the navigation bar so visitors will not see the navigation bar text? I am not sure where to add the image link???

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to

    (#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;

    Thanks for your advanced help.

    • Hi Samuel
      WOuld you mind to share me your website URL to check?

      ALso..do you want to remove ur navigation bar or just want to replace it with image?

      Regards
      Om

      • Samuel Lee says:

        Sure, my url is http://omgiatest.com

        I want to keep the navigation bar and the links, but replace the links with images.

        Also I am willing to remove the navigation bar, which every is easier to maintain.

        Thanks for the quick response!!!

      • Hi Lee…
        If you want different menu with different link then it needs some more modifications for each menu item

        but..you can try the following for check

        #access .current_page_item > a, #access .current_page_ancestor > a {
        background-image: url(“http://allaboutbasic.files.wordpress.com/2011/07/roger.png”);
        color: transparent;
        font-weight: bold;
        }

        Regards
        Om

  95. Samuel Lee says:

    @allaboutbasic

    Thanks for your help. I found a solution.

    http://digitalraindrops.net/2011/08/twenty-eleven-social-icons-in-navigation/

    The article really helped. The only issue now is I need to adjust the navigation size.

    • HI Samuel

      Try the following codes… i found the link you shared , they added social icons in navigation bar but u didn’t add anything..not sure how that post helped you..

      I think the following code may help you to resize your navigation bar

      .nav-twitter, #access .nav-twitter:hover > a, #access .nav-twitter a:focus {
      background: url(“images/twitter.png”) no-repeat scroll 0 0 transparent;
      height: 75px;
      padding: 0;
      }

      #access a {

      display: block;
      line-height: 5.333em;
      padding: 0 1.2125em 0 5.2125em;
      text-decoration: none;
      }

      Please let me know it is Ok for you or not..

      Regards
      Om

  96. Unbelievably helpful blog. I have 2 requests:
    1. To remove the small little smiley face at the bottom of the page.
    2. To remove the footer where it says theme: Twenty Eleven Blog at WordPress.com
    including the grey colour box its in and the thin grey line above the box

    Thanks

    • HI,
      Good Morning…Would you mind to share me your website URL for checking?

      Regards
      Om

      • blog.abovebelowcreative.com

        Thanks

      • HI,
        To remove the smily face try the following code..

        img#wpstats {
        display: none;
        margin: 0 auto 1.625em;
        }

        To remove the footer where “Blog at wordpress.com” written

        .wf-active #site-generator {
        display: none;
        font-size: 14px;
        }

        Please let me know it is Ok for you or not..

        Regards
        Om

      • I would also like to remove the black navigation bar completely.

        Any help will be greatly appreciated

      • Hi
        To remove the black navigation bar completely from twenty eleven theme

        #access {
        display: none;
        }

        REgards
        Om

      • Yes that code worked perfectly! Thanks a million.

        The last thing left is the navigation bar. Any ideas?

        Also instead of removing the footer entirely, what about just changing it

        to all white?

        There also seems to be a gap on the top of my header. Any ideas for this?

        Really appreciate this. Fantastic blog!

      • HI,
        To make the footer (which is not showing now) background white. but it will not help u remove the “Blog at wordpress.com” . You have to modify the php file to remove this

        .wf-active #site-generator {
        background-color: white;
        display: block;
        font-size: 14px;
        }

        About the gap..

        This gap is showing due to the image “Blog” you used in your site(its background is white).. the image is 1000px wide and 288px height..
        you can try this. ( if it is not suitable. you may need to modify the php file again)

        #branding img {
        height: 215px;
        margin-bottom: -7px;
        width: 100%;
        }

        about Navigation bar..

        What help you need for this?

        Regards
        Om

      • Awesome. everything is perfect the way it is. Thank you. I think my last post was sent at the same time as your reply. Sorry about the confusion.

        Thanks again

      • HI,
        wc
        let me know if you have any question regarding wordpress and css..

        Om

  97. hello im fairly new to this can you please check my website i have just upgraded to css and made some adjustments using your code from above. i would like to know if it is possible to have the wording

    Howie & Organ Engineering Pty Ltd ABN 27 097 035 473

    fixed in the middle down the bottom of the web page?
    thanks

  98. Samuel Lee says:

    How do I switch the widget area from the left to the right on the showcase page? Tell me how that coffee taste as well!?!

  99. Chris says:

    Hey. I would like to remove both archives and meta from the sidebar. Is that possible? I’m a completely newbie.

  100. chris says:

    I took the “custom archives” from widgets in appearance and now the sidebar is empty. after… hours of trying to figure out how to remove archives and remove site admin and log out by changing functions.php and categories.php. ;) The rest i found out about quite soon.

    yeah!

  101. 11:30 pm here and you had a perfect solution for what I needed to get rid of a comment bubble. Enjoy the Coffee on me, I am going to bed.

    Thanks,
    Bill

  102. Wonder if you might be able to help. I’ve tried most of everything you have mentioned so far. How do I remove the blank line between the menu and the text in http://www.rdschumacher dot com?

    • HI,
      paste the following code at the bottom of style.css

      .singular.page .hentry {
      padding: 2.5em 0 0;
      }

      Regards
      Om

      • Wow, that worked! Thank you!!

        If this is out of line, no worries, but I would like to add a menu right justified to the right of site title with text only links (no menu bar) on the twenty-eleven theme. Thoughts?

        In any case, hope you enjoy the coffee and thank you again.

      • Hi,
        thanks for the coffee :) i got it….

        and yes..you can add menu ( Text link) to the right side of the site title… Just you need to add the text link in the header.php file… but it will need some css and html knowledge.
        and if you want to do it..please take backup of your header.php file before doing any modification…

        If you need any help let me know..i will answer you in the morning.. Good night for now.

        thanks again for your Coffee.. :)

        Regards
        Om

  103. Tunde says:

    Hello! Thanks so much for these wonderful resources. I have a little challenge on my blog though. I installed a plugin to insert facebook like buttons and tweet button to each post. If you go to my sit at http://www.miccheck12.com, u’ll see the buttons on top each post in the home page. Know anyway I can reduce the gap between the two buttons by bringing the tweet button closer to the facebook button?

    Thanks

  104. hi,
    where i can found the author comment in css

    to make a change
    many thanks

  105. joe says:

    an other question,
    can i add ip address under the date on comments
    name
    date – time
    ip adress
    thanks a lot

  106. I’d like to do three things:
    1. Make the image extend beyond the border and into the menu bar and into the title header area (the wing tips of the planes would overlap the menu bar at the bottom and the header area at the top) and have the feel of popping out of the site. I can create the image(s) in photoshop with a drop shadow for extending beyond the boundaries of the image. I need help with the php, css, html and such to complete the effect. The site is rdschumacher dot com. (I’d still like the site to work well on mobile devices as it does today).
    2. I’d like an example showing four text links to the right side of the site title and right justify the links within the header. I have no problem editing the header.php, css and html files but I may need some help in understanding what’s going on.
    3. Lastly and I know this is a stretch, but I’d like to learn and would you share some of your favorite resources?
    Thank you again for all your help.

  107. joe says:

    Hi Om,
    here is the code to get the ip

    ()
    many thanks

  108. kristianmaar says:

    Hi guys!

    I want my header image to go through the menu bar which I have customized to be transparent this way:

    background: -moz-opacity: 0.75; opacity:0.75;

    So the goal is to make the menu overlap the header image.

    btw, I’m using the 2011 wordpress theme.

  109. kristianmaar says:

    Ok… But I was kind of asking for help in order to finish my site. Letting you know when it’s done won’t get me further if you don’t mind me saying :)

    • Kristian…
      what problem are facing now? would you mind to clear?

      Om

      • kristianmaar says:

        I want the header image to be taller and span to the bottom of the menu bar. Sorry for my unclear posts :)

      • Hi Kristian

        If you want to change width and height of your header image of twenty Eleven theme you can do this from the functions.php. Just check the following lines….

        define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘twentyeleven_header_image_width’, 1000 ) );
        define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘twentyeleven_header_image_height’, 288 ) );

        Please let me know it is Ok or not.

        Regards
        Om

  110. kristianmaar says:

    I changed the values and now I’m allowed to upload images of the specified dimensions, but a larger image just pushes the menu further down :(

    • HI Kristian,
      Yes…. Image height may push your menu bar down. would you mind to clear me your requirements again?

      Regards
      Om

      • kristianmaar says:

        The menu bar must overlap the header image. I already made the menu bar transparent, now I want the header image to be visible through the menu bar.

      • HI Kristian,

        Sorry for the late response. Just returned home…Would you mind to try the following code and let me know it is OK for you or not?

        #access {
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
        clear: both;
        display: block;
        float: left;
        margin: -40px auto 6px;
        opacity: 0.75;
        width: 100%;
        z-index: 1000;
        }

        #branding img {
        height: 270px;
        margin-bottom: -7px;
        width: 100%;
        z-index: 1;
        }

        Regards
        Om

  111. chris says:

    Hey,

    i would like the clickable thumbnails on pages showing small version of the original, uncropped image. on this page for example: http://christian.irmer.com/?page_id=166

    is there a way to do so?

  112. kristianmaar says:

    Wow.. It works perfectly! You’re a css magician :-D

  113. joe says:

    hi Om,
    the Ip adress is perfect,
    i am waiting for code….

    you are the best

  114. kristianmaar says:

    I am not using any plugins at all.

  115. joe says:

    Sorry Om i dont use skype i dont have it
    you can send it by email it’s ok for me….

  116. joe says:

    thanks Om,
    i make it already thanks again

    one question have this theme an slideshow ?????

    • Hi Joe,
      sorry for the late in reply.. Umm..there is a default slide show feature which wordpress.com allows..not sure for the wordpress installed in own hosting…
      and, thats great you already have solved it. as it is a php file thats why i could not paste it in the comments box.

      but if you need it..pls let me know.. i will mail back to you..

      Regards
      Om

  117. joe says:

    Hi Om,
    every thing is ok….
    but pls. have a look in my trial web: http://www.bencatania46.altervista.org

    i put on slideshow in home page but the buble of comment goes up.
    how to adjust it
    thanks

    • Hi Joe,
      sorry for the late in reply, yesterday i was too busy with some house hold work :(

      Joe, would you mind to try the following code and let me know it is Ok for you or not..

      #content {
      margin-top: 0;
      padding-right: 11px;
      width: 63.4%;
      }

      Regards
      Om

  118. joe says:

    Om, scuse me but i have an other issue:
    i want to make in home page alternate color for the posts with border

    the same alternate color in comments with number
    thanks a lot

  119. sarah says:

    [i’m using the Twenty Eleven theme]

    hiy there AAB :-)

    i’ll *definitely* paypal you a coffee AND muffin if you can show me how to split my title text on to two lines – nicely!

    for example, my title currently displays like this:

    “my travels through europe, america, asia and new
    zealand”

    this wrapping looks unprofessional, and, ‘UGLY’!

    i’d like it to display with more balance, like this:

    “my travels through europe, america,
    asia and new zealand”

    i’ve had a look around in the header.php file but can’t see a ‘nice’ way to add a line break

    REALLY LOOKING FORWARD TO YOUR HELP – I’M SURE YOU’LL REALLY ENJOY THE COFFEE +++ AFTERWARDS!

    many thanks in advance

    sarah

  120. Ross says:

    Hi Om – me again! I see you’ve continued to be busy on this now epic thread. Hope you’re enjoying many well-deserved coffees!

    Just a quick query this time. I viewed my blog site on my netbook today, which has only a 10 inch screen. It looked fine on IE, but when viewed on FF the Title and Site Description were far too large, extending over the post title below! The site looks fine on a 17 inch and 22 inch screen – this too large title/description problem only occurs on FF on a 10 inch screen.

    Is there any CSS that can correct this, please?

    I haven’t got Chrome or any other browsers installed. I suppose I should install Chrome at least and check that the site looks OK in that.

    Cheers!
    Ross

  121. Pit says:

    hello!Om thank You for this website and your help. Please help me with website

    http://www.wdlengineering.com/

    How to exchange a title for logo? @ http://www.wdlengineering.com/logo.jpg

    I did what you said :

    #site-title {
    background-image: url(“http://www.wdlengineering.com/logo.jpg”);
    background-repeat: no-repeat;
    margin-right: 184px;
    padding: 3.65625em 0 0;
    }

    #site-title a {
    color: transparent;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
    }

    and title is transparent but cant see the logo?

    any ideas?

    is it possible to have a big headline “WDL your gateway to steel” just beside logo?

    many thanks in advance
    Pit

    • Hi Pit..
      Just checked your site…
      the code you entered is rendering wrongly..thats why the logo is not showing….

      and.. yes.. that headline also possible.. just need to modify the header.php file..

      if you can add me in skype. om2000_cuet is my id..
      Regards
      Om

  122. Pit says:

    Om Thank You
    I strongly recommend Om he knows what he is doing ;)
    Coffee on the way

    Pit

  123. Armo says:

    Hi, It looks like you found a way to change the title for a logo on this theme, can you please post it up so that I can see it too? I have exact same issue as Pit, title is disappearing, and appears on hover, with no image.

    Thanks

    • HI Armo,
      Yes, I helped Pit personally as i did some modifications on the php files…

      Pls check the followings…


      /*********************** Here is the Style.css portion **************************/
      #branding img {
      height: auto;
      margin-bottom: -7px;
      width: auto;
      }
      div#logo {
      float: left;
      width: auto;
      }
      div#ttl {
      float: right;
      width: 665px;
      }
      #branding hgroup {
      margin: 0;
      }
      #site-description {
      color: #7A7A7A;
      font-size: 14px;
      margin: 0 70px 0.65625em 0;
      }
      #site-title {
      font-family: georgia;
      font-size: 3em;
      margin-right: 201px;
      padding: 0.3em 0 0;
      }

      /*****************************Header.php body portion ***************************/

      <body <?php body_class(); ?>>
      <div id="page" class="hfeed">
      	<header id="branding" role="banner">
      			<hgroup>
      <div id="logo">
      <a href="http://www.wdlengineering.com/"><img src="http://www.wdlengineering.com/wp-content/uploads/2011/09/wdl-logo.png" /></a>
      </div><div id="ttl">
      				<h1 id="site-title"><?php bloginfo( 'name' ); ?></h1>
      				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2></div>
      			</hgroup>
      
      			<?php
      				// Check to see if the header image has been removed
      				$header_image = get_header_image();
      				if ( ! empty( $header_image ) ) :
      			?>
      			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
      				<?php
      					// The header image
      					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
      					if ( is_singular() &&
      							has_post_thumbnail( $post->ID ) &&
      							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
      							$image[1] >= HEADER_IMAGE_WIDTH ) :
      						// Houston, we have a new header image!
      						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
      					else : ?>
      					<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
      				<?php endif; // end check for featured image or standard header ?>
      			</a>
      			<?php endif; // end check for removed header image ?>
      
      			<?php
      				// Has the text been hidden?
      				if ( 'blank' == get_header_textcolor() ) :
      			?>
      				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
      				<?php get_search_form(); ?>
      				</div>
      			<?php
      				else :
      			?>
      				<?php get_search_form(); ?>
      			<?php endif; ?>
      
      			<nav id="access" role="navigation">
      				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
      				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
      				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
      				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
      				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
      				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
      			</nav><!-- #access -->
      	</header><!-- #branding -->
      
      
      	<div id="main">
      
      

      Regards
      Om

  124. thebuddha says:

    I like to remove the blank space above the header image, approx. 20 oder 30 pixel. (Site title is removed). I tried to use:

    #site-title {
    margin-right: 270px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.65625em;
    }

    but it didn’t work. Any idea? domain: zahnarzt-struemp.de


    thanks in advance

  125. Jim says:

    THANK YOU SO MUCH for sharing this!! you made my week and WP so much easier!

  126. SkyScorpio says:

    Excuse me sir, I wanna know if there any way to click on ” header image ” and will be transfered to the other link? also plz teach how to change to header image size? thank you so much really appreciate it.

    i’d glad to hear your answer,
    really appreciated it

  127. Howard says:

    Hello Om,

    I guess that I am stuck. So far everything worked well with your theme, but I do not get a logo into place. I studied your advice e.g. for Pit which you gave here in the forum, but the logo is not fitting very well. It is very large and centered. I could not figure out to fix the dimensions of the logo so that it will keep its orignal size and will not be streached. Any idea or hint?

    Thanx a lot in advanced.

    Best wishes Howard

  128. markT says:

    You might want to include this little piece of code to get rid of the horizontal table rules:

    #content table, #content tr td {border:none;}

    In addition to child themes, I’ve been using “My Custom CSS” plugin for minor tweaks and works like a charm!

  129. Sebastiaan says:

    Hi Om,

    thank you for your great blog and help. I was wondering if you could help me out with something.

    In my header there seems to be a line… I cant find it in the header.php and was wondering if you knew a way to switch it off.

    Thank a million in advance!

    Seb
    (URL is http://www.offshorekenniscentrum.nl/wordpress/)

  130. Okay, OM. I am back again.
    I need to know how to change all of my text color to white bold. Not just white, but bold white.
    The only way I know how is to put tags on my posts and that is causing problems.

    Thanks for your help.

  131. I figured it out! just added font weight attribute.

  132. No, I copied your code to change text color and just added the weight attribute to make it bold.

  133. And.. no, I am not Selma Blair. Just a reallllly big fan of hers. my blog is a tribute to her and her work.

  134. I do have another question. Is there a code to make ALL of the post titles larger? Not just the homepage. I see where you also added code for individual posts. But combined, will it work on the entire blog?

  135. armo says:

    Om

    I asked last week about replacing the title with a logo image, i pasted the style and css code but I’m getting parse errors. I am realyl struggling now, If I buy you a coffee will you be able to take a look at this for me ?:)

    Thanks

  136. Bonnie says:

    hi, i am a newbie.
    i want to keep the nav bar names the same but for example when i click through to home i want to be able to have a different tittle besides home. can i hide this or change this?
    cannot find where?
    i am doing the site via word press.org hosted by go daddy.

    also is there a way to have the images assigned to individual specific pages rather than randomly rotating?
    help?
    is it better to change via dream weaver or on the site?
    i already messed up once and had to relaunch word press via go daddy because i could not fix the code i messed up.
    thanks for any advice.
    Bonnie
    here’s the simple site:
    monabanzer.com

    • Hi Bonnie,
      THanks for your comments…

      The question you asked for navigation bar related….. i need to check it… i will inform you about it..

      About Image..

      yes..you can add images in specific page (Page–>Add New then check there is an Media symbol to add image/media)

      Om

  137. house36 says:

    Hi Om,

    First of all thanks so much for sharing your knowledge. That’s very nice of you. I was able to tweak the Twenty-Eleven theme to make it the way I want it thanks to your tips.
    I just have a question. I tried and read all the comments to see if there was something related but couldn’t find anything. I have a image uploaded as a background but it doesn’t scroll down. Is there a way I can fix this? Here is my blog, if you want to take a look and see what I mean.

    http://house36.wordpress.com

    Thanks in advance!

    • HI,
      Sorry for the late reply….

      would u mind to try the following code and let me know it solves your background image scrolling problem or not?

      body {
      background-image: url(“http://house36.files.wordpress.com/2011/09/huge-bgkd1.jpg”);
      background-position: center top;
      background-repeat: repeat-y;
      }

      Om

      • house36 says:

        Thanks for the prompt reply. I tried the code but it’s not working. When I pasted it into my stylesheet the backgroung dissapear. Am I suppose to change the image url? Is that my image url? I don’t know how to get the image url. Any ideas?

        Thanks!

      • Hi,
        have you pasted my code at the bottom of style.css?

        pls let me know..

        Om

      • Hi House36,
        have you pasted my code at the bottom of style.css?

        pls let me know..

        Om

      • Nasser Kat says:

        Good day sirs,

        I just wanted to add a mini note that I added

        background-image: url(‘imageLink’) !important;

        in the

        {body

        tag in the styles.css sheet and it worked like a dream. So thanks a million for being awesome and posting this.

      • Hi Nasser,
        Pls share me your website link..

        and do u want to add the image as ur site’s body background?

        pls let me know..

        Om

  138. Johnlyn says:

    Thanks so much for all of this information.

    I bought you a cup of coffee – enjoy!

  139. HI!
    I think I am having a basic understanding problem here and cant figure it out.
    After installing a 2011 child theme I deleted ALL posts and pages, so I can start with my content from scratch. I dont think this was a good idea. My new pages do fine. But I want one page (navigation link) to be the blog, the other ones static.
    I have marked one static page as my frontpage in settings/reading.
    but now I dont know hoe to add the posts to my menu anymore… played around a bit and simply added the category of the posts to the menu, but it doesnt seem to work as the formatting is off when I click on the menu link.
    Can you help? Thanks in advance.
    Rebekka

    • Hi Rebekka,
      Yes..you can add a link called “Blog” to show the latest blog post …but for this, you need a blog template to show this…

      Regards
      Om

    • what is a blog template? Can I select that somewhere ?

      • Hi Rebekka,
        Yes.. you have to select “Blog Template” from the template selection (right side of the new page editor).

        I could help u to create one..but.. i will not be available for 2 days as i need to go to capital city for a viva voce…

        Just keep in contact…

        Om

      • Hi!
        Just a quick update on my problem.
        It appears that the issue was with Safari, not wordpress or any of the templates.
        I host locally. Some views of the blog didnt appear properly on Safari, eg the first page of a blog post would be all pushed to the very left. This problem did not appear in Firefox or google chrome. And it also didnt appear on other public wordpress blogs in Safari.
        I reinstalled Safari with the latest version and the problem diappeared.
        I couldnt really find a logical explanaton fot this, but maybe this helps others who come accross the same problem.

      • Hi,
        Different browser and their corresponding versions renders websites differently..

        thats why u faced this problem

        Om

  140. ilan says:

    Hi! I have another question, I promise it will be the last one before finishing my website! It is almost done.

    Okay so the website is http://www.ilanserruya.com ; as you can see, inside the “video” and “desing” section i put some buttons that sends us to another pages (each page is for each different work)… the problem is that the only way that i found for each of theses pages not to appear at the navigation bar was to set them as “drafts” and no one (except for me) can actually look at the content of these pages, thats why no one can actually see anything after clicking in these buttons.

    Is there any way to create these extra pages or deleting them from the navigation bar? Because with the buttons i dont want to have the same options twice… Do i make myself clear?

    Thanks!!!! :-)

    • Hi Ilan,
      sorry for my late reply as i was outside of my city for 2 days.

      Yes… you can create pages without showing them in Navigation bar by using Custom Menus from “Appearance–>Menu”

      pls let me know it is ok or not..

      Om

  141. Hey, I’m back again! You are so helpful and I truly appreciate it. I have a new problem. I am trying to find a way to paste the DMCA code into my footer area in order to activate it. I have registered my blog at DMCA and I’m trying to figure out how to insert the copy and paste thingy so that I can activate it. I’ve asked DMCA how to do it on wordpress.com instead of org and they don’t seem to know. If you have any idea how to do this I would greatly appreciate it! thanks.

    • Hi Selma (i forgot ur actual name),
      sorry for my late response as i was not available for last 2 days..

      Umm..would u mind to clear me the problem again? i didnt understand ur problem..

      pls let me know..

      Regards
      Om

      • I am having trouble pasting the badge code for DMCA in my footer area. It shows up, and you can click on it but it doesn’t link properly to the DMCA site. I know this doesn’t really have anything to do with CSS but was wondering if you knew a way I could copy and paste it properly using a different widget maybe. DMCA works easily with wordpress.org and I’m trying to figure out how it’s used in .com thought maybe you might know where I could add the code for it to work right. thanks.

      • Hi Selma,
        Are you talking about “Protected | DMCA” ?

        I have clicked on it and the page which is opening is showing error..

        but..i dont think it is css related issue ….have u checked the link which u used in?

        pls let me know..

        Om

  142. donnarut54 says:

    Hi, So happy to find this site. Boy do I need help!. I have no idea what I am doing. I am a Stampin Up Demonstrator and trying to set up a Blog. I have wordpress twentyeleven child theme. I have my Banner on there. That is it ! This is my site: http://donnastampsandsews.com
    . trying to change color of the menu/navigation bar along with everything else. I would like 3 columns. Is that possible. There are thousands of demos out there that have great blogs. I need help. Please, Please Help!

    Donna

    • Hi Donna,
      Good Morning..sorry for the late in reply..

      Would u mind to share me ur requirements one by one?

      Regards
      Om

      • donnarut54 says:

        Good Morning OM,
        Hoping it will be, I am a newbie, what kind of requirements do you mean. Sorry But I have been working on this for days and all day and night and getting brain dead and frustrated. I appreciate you getting back to me , now I feel optimistic .
        Donna

      • HI Donna,
        better u add me in skype .. om2000_cuet is my id.

        Regards
        Om

  143. Esther Max says:

    Hi,

    when I am looking for the code in the style.css I search for the “change” beginning and I encounter many of them – then I need to figure out where exactly I need to change, for example going to #26 on your post I search for “#content {” and there are 9 of them in the CSS – so I am not sure which one to change…
    It would really help if you point to the section – for example – in /* =Responsive Structure – look for ” #content {” and then change it to …

  144. k says:

    This site is awesome! I was just able to change all kinds of border issues I was having, and to customize my header, which is just the way I want it!

    The only thing I couldn’t figure out was this: is there a way to add some HTML (it’s a banner ad) to the header. I want it to be below the site name and site description, but above the navigation/page menu. Do you know how to do that? Here’s my site: http://www.ournourishingroots.com/

    • Hi Kmille,

      Yes..it is possible.. but u need to modify your header.php file to do it.

      In your header.php you need to add some html coding and need to add some css code in style sheet ..

      if you need help you can add me in skype, om2000_cuet is my id..

      regards
      Om

      • k says:

        How do I modify my header.php? I can see it on my dashboard under my child theme, but the only thing on the Theme Functions (functions.php) is this: <?php and the rest is blank. Is there a way to just add the HTML there?

      • Hi Kemille,
        Umm..no..u need to modify the header.php of your parents theme… and need add html code there.

        Om

      • k says:

        Oh ok, I’m new to all of this, so thank you for helping. What do add to the parent theme on the php sheet? I have the HTML for the banner ad, but I’m assuming I need to specify where it goes somehow.

  145. k says:

    Okay, I have found the header.php on the parent. I have the HTML as well. Where do I put it?

    • Hi Kmille,
      Let me check ur site again..hold on..

      Om

    • Hi Kmille,
      You have to put your html code just beneath to the end of hgroup tag in header.php..

      Regards
      Om

      • k says:

        That worked! I found it :) Thanks! The only thing is that now it’s sitting right on top of the navigation menu with no border/space. Any thoughts on that?

        Also, do I need to change anything on the CSS stylesheet now?

      • Hi Kmille

        for the spacing above and bottom of the image you have added paste the following code at the bottom of style.css

        #branding img {
        height: auto;
        margin-bottom: 4px;
        width: 100%;
        }

        hgroup a img {
        margin-top: 4px;
        }

        Regards
        Om

      • k says:

        Wow, that’s perfect. Thank you so much. I am going to try next to ad some HTML code to put a smaller ad after each individual post, between the content and the comments. Now that I know the general way to do this, I think my only question is this: where would that HTML code go on the php side? Single post? Thx

      • Hi Kmille,

        it may be either single.php or post.php …
        going to bed… bye for now…

        Om

      • k says:

        It’s single.php, I found that. Just not sure where to put the HTML. Thanks for all your help though, I don’t want to keep you up. I appreciate it! Can I get a bit more help from you later? Thanks!

      • k says:

        Okay, I experimented and put it after the and before the and it worked, but is way on the left. I’m assuming that I need to change the borders/centering on the CSS stylesheet now, but I’ll have to wait until you are able to write back to do that part I think. Thanks in advance!

  146. Jad says:

    Hi,

    Thank you for this great site! Quick question, how easy would it be to change the color of titles for each category?

    For example, the title of category A will be blue, category B will be green, and so on…

  147. Jad says:

    Hi Om,

    My website is:
    floatingjad.com

    Thank you,

    Jad

  148. jen says:

    Hi,
    I’m having problems changing the size for the footer widget. I want to have #first widget bigger than the others. I don’t know how to override this code
    }
    #supplementary.three .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 30.85%;
    }
    When I tried to use this
    }
    #first{
    width :50%;
    }
    This is not working =(…..can you help me with this plz

  149. Rush Poppers says:

    Hi,

    thank you for sharing your knowledge. I just “play” a bit with the twenty eleven. Basically it is a great theme. But some things are not so great… try to fix and personalize it a bit. I guess your article will help me.

    Cheers
    Gordon

  150. k says:

    HI there,
    I have added a banner ad in the hgroup section, but now it’s stretched to fit the full width of the header, and I’d rather it be the size it’s meant to be. Can you tell me if that’s something I can fix? I know I’ve read other people talking about fitting pictures, etc. into this header and sizing issues. Thanks!

    Here’s the site as it is now: http://ournourishingroots.com

  151. bethdawn says:

    Hi Om,

    I have two questions:
    1 – Is there an easy way to have a different header image show up on each individual page? ie. a “Home” image on the “Home” page, an “About” image for the “About” page, etc?

    2 – Can i make the site stretch 100% vertically? If not, can the page be aligned to the top so there is no white space above the header?

    Thank you so much in advance! And thanks for such a great site and the generosity of your knowledge! :)

    • Hi Bethdawn,
      In twenty eleven, i think, the featured image which u will select for a page will be shown in that page header section . You can try this..

      For question 2.

      I didnt understand your requirements..would u mind to clear me?

      regards
      Om

  152. caroline says:

    Hi I have copied and pasted some the code for removing the search box and put it at the bottom of the style sheet and updated it but the search box is still on the post, I am not sure why it has not updated. When I put in new code does it always go at the bottom of the style sheet, I am not sure where to put it and wonder if this is the problem.

    Thanks
    Caroline

  153. caroline says:

    oh its ok its gone now, does it take a while to update? Anyway, I still wanted to check, do you put all the new code at the bottom of the page?

    Thanks
    Caroline

    • Hi Caroline..
      Sometimes , due to hosting server and some plugins for example “Wp super cache” it takes time to propagate the changes….

      I am sorry for the late reply… pls let me know if u have any issue..

      regards
      Om

  154. Lenny23 says:

    Thanks great help! Today I tried to have a clickable image (facebook.gif) on the right side of the header (twentyeleven). So far they say one has to enter the pic url in header.php and style.css.
    Something like,

    And css, something like:

    .logo-gif a
    {
    position: absolute;
    z-index:0;
    top: 13px;
    left: 5px;
    width: 200px;
    height: 54px;
    background-image: url(‘http://yoururl/wp-content/themes/twentyeleven/images/facebook.gif’);
    }

    Only problem, so far cant get it working. Thanks for any suggestion!

  155. caroline says:

    Hi OM thanks for your reply
    I used the below to make the header narrower and it works but I now want to make it sit to the right so I added the bit at the end but it has not worked, any suggestions

    #branding img {
    height: 100px;
    margin-bottom: -7px;
    width: 75%;
    align img: right;
    }
    Thanks for your help this site is fab, I will make sure I donate :-)

  156. caroline says:

    its http://www.every-day-matters.org.uk/ its only half built at the mo but i want the bird to sit on the right, but it aligns to the left

    thanks
    caro

    • HI Caroline,
      Good morning..
      would u mind to paste the following code and let me know it is ok or not
      ** For better result you may need to modify/edit your image

      #branding img {
      float: right;
      height: 100px;
      margin-bottom: 0;
      width: 75%;
      }

      Regards
      Om

      • caroline says:

        thanks Om thats fab just what I wanted,

        I also wanted to know how to change the whole colour of the nav bar, which i think is is different from just the background colour (?)

        also is it possible to get the site title and site description to float ovet the header image?

        Many thanks I have donated something for a coffee and hopefully cake as well, not sure what things cost in the US!

        Caroline

      • Hi Caroline..
        thanks a lot for the Coffee and Cake :)

        would u mind to share me your site address so that i can check it?

        Regards
        Om

      • Hi Caroline,
        Would u mind to check the following code to change the whole navigation bar background color of twenty eleven theme?

        *** use your color code in place of “green” i used in the code below… first “green” is starting color 2nd “green” is ending color

        #access {
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        background: -moz-linear-gradient(green, green) repeat scroll 0 0 transparent;
        clear: both;
        display: block;
        float: left;
        margin: 0 auto 6px;
        width: 100%;
        }

        Regards
        Om

      • caroline says:

        thanks nav bar is good now, I ‘ll try the header.
        Caroline

      • Your 2nd Problem “To float the Site Title and Description over the image ”

        yes.. to do it.. at first remove the image u used and paste the code at the bottom of your style sheet

        #branding hgroup {
        background: url(“http://www.every-day-matters.org.uk/wp-content/uploads/2011/10/cropped-one-bird4.jpg”) repeat scroll 0 0 transparent;
        margin: 0 7.6%;
        }

        after that let me know..i will give you the rest of the code..

        Om

  157. caroline says:

    Thanks I’ve done that, image is gone, what happens next…..?
    Caroline

    • HI Caroline,
      the actual code should be the following

      #branding hgroup {
      background: url(“http://www.every-day-matters.org.uk/wp-content/uploads/2011/10/cropped-one-bird4.jpg”) repeat scroll 0 0 transparent;
      height: 280px;
      margin: 0 4.6%;
      width: auto;
      }

      *** Problem is the image u r using is high enough so, it is taking spaces (height)

      so, if you change the image height to reasonable portion then it would be good i think,

      regards
      Om

  158. jeffpaul says:

    I’m trying to completely hide the main menu & search bar (in Twenty Eleven). Any idea how to go about doing that?

    • HI Jeff,
      If you want to hide the Main Menu from the Twenty Eleven theme then you can try the following css code at the bottom of style sheet.

      div#access {
      display: none;
      }

      Pls let me know it works for your or not..

      Regards
      Om

  159. caroline says:

    Hi me again!

    Below my post I want it to show the actual box to put comments in but it doesnt…can you tell me how to get it to show up?

    Thanks
    Caroline
    http://www.every-day-matters.org.uk

  160. caroline says:

    Ok thanks I added you in skype

  161. Hi.

    I would, at first, to thank you by your work that helped me so much with all tips.

    Help me with avatar/role.

    I would like to SHOW with my avatar(photo) members its ROLES to appreas at comments section.

    And to show to whos members is online and offline.

    Its possible?

  162. Ale says:

    Can I suggest to visit http://www.borgyborgy.net It offers some free 1000×288 pixel size headers, to customize default TwentyEleven theme. All images are taken by me and provided under a Creative Commons 3.0 License.

  163. Mee. says:

    Hi Om,

    I posted a comment asking for help a couple of weeks ago but I didnt have the required CSS upgrade to properly modify my css style sheet.

    This time, I have it all set up and I just need to find the right codes to make the changes I want. Please, if you can help me work this out I will let you buy many coffees since I’m willing to pay a web designer if I can’t figure this out alone.

    So, here it is: http://www.3neoneone.com

    This is what I want to do:

    1. Change the menu bar from grey to black so the home page is entirely black.

    2. Move the links on the menu bar so they align on the left.

    3. I want the Home page to be black, the About Us page to be black. However, I want to make the Blog page and The Collection page white.

    3. On the blog page, I want to reduce the padding between widgets, especially in the category cloud.

    4. I want to align all the posts to the left.

    5. I want to change the fonts on the Widget Titles, color and size too.

    6. I want to make the link for the home page all capital letters: HOME instead of Home.

    Thanks a lot!

    • HI Mee,
      Good Morning..
      Let me check your problems..I am informing u with the solutions..

      Regards
      Om

    • Hi Mee,
      Here is the solutions…

      1. To change the Menu Bar color from Grey To Black in Twenty Eleven theme try the following code..

      #access {
      background: -moz-linear-gradient(#000000, #000000) repeat scroll 0 0 black;
      border-bottom: 1px solid #000000;
      }

      2. If you want to move the Navigation bar of Twenty Eleven theme to align left try the following code

      #access div {
      margin: 0 0.6%;
      }

      3. If you want to reduce the spacing/padding between tag clouds try the following code

      div.tagcloud a {
      line-height: 24px;
      }

      4, If you want to align all post to the left and to increase the Post Width of your blog post of Twenty Eleven theme try the following code

      #content {
      margin: 0 34% 0 2.6%;
      width: 64.4%;
      }

      5. If you want to widget title’s color, font size, font family try to paste the code at the bottom of dark.css of the following location

      http://www.3neoneone.com/wp-content/themes/twentyeleven/colors/dark.css

      .widget-title {
      color: red;
      font-family: tahoma;
      font-size: 15px;
      }

      6. Umm…there is no “Home” i got…would u mind to clear me the problem…

      *** Pls let me know if you need any help

      Regards
      Om

  164. Mee. says:

    Hi Om,

    Thanks a lot for your help. Only steps 1,2,3 and 5 worked.
    What about changing the page colors? I need to change the color of just the blog page and the collection page to white… do you know what code I should use?

    Thanks again!

  165. Mee. says:

    I made several modifications, it’s exactly what I wanted. The last thing I need is:

    1. To create a 3 column content, with one sidebar on the left and one on the right.
    what’s the code for that?

    and last,

    2. To change the background color of the just the blog page to white.
    is that possible? or do i need to create a different template for this page?

    thanks!

  166. jonathanscholbach says:

    Hi.

    I would like to change the color of one single Item in the navigation-bar. Can you please tell me: how can I do this?

    Thank you ever so much!

    Jonathan

    • HI Jonathan,
      Would u mind to share me your site address and the change you need again?

      regards
      OM

      • jonathanscholbach says:

        Hi OM,

        the adress is: debattiergesellschaft.de/wordpress
        I would like to change the color of the item “MDM 2012″. It shall be in some way highlighted in difference to the other items in the black navigation bar.

        Thank you for your advice,

        Jonathan

      • Hi Jonathan,
        That “MDM 2012″ is a menu item…
        Do you want to change the font color of that “MDM 2012″ ? or the background color ?

        Pls let me know..

        Regards
        Om

      • jonathanscholbach says:

        Hi OM,

        sorry for expressing me so unclear. I would like to know how to change both the background color and the font color.

        Thank you for your patience!

        Jonathan

      • Hi Jonathan,
        To change only background color of “MDM 2012″

        li.page-item-654 {
        background: red;
        }

        and to change the font color try the followinng..

        #access .page-item-654 a {
        color: black;
        }

        both of these is only for that individaul menu “MDM 2012″

        Pls let me know it is Ok or not..

        Regards
        Om

      • jonathanscholbach says:

        Hi OM,

        thank you for your advice – I tried only the background color and that works fine. Now I have decided not to change the font color. So thank you again for your help!

        Jonathan

  167. Hello – I am having a Twenty-Eleven problem and scouring the web for help. Hope I can find some clues here! It seems when I add images into a post they overlap out of the containing content div.

    This is a link to a sample post so you can see what is happening… thank you!
    http://www.style-me.ca/2011/11/test-post/ (this post is with comments enabled)
    http://www.style-me.ca/2011/11/test-post-2/ (without comments enabled)

  168. My mistake… I’d changed the post dates so they wouldn’t be the first posts visitors see (The site is live for my client)

    The links should be:
    http://www.style-me.ca/2011/03/test-post/ (this post is with comments enabled)
    http://www.style-me.ca/2011/03/test-post-2/ (without comments enabled)

    • Hi Hillary,
      I found the problem is solved… the images are not overlapping with comments section now..

      regards
      Om

      • The images don’t overlap on the single posts however the titles are cropped right off at the top.

        Also, the list of all posts on the category page still show images overlapping…

        so still not resolved.

      • Hi Hillary

        To Solve the overlapping problem in http://www.style-me.ca/category/style_journal/ — paste the following css code at the bottom of style.css

        .hentry, .no-results {
        border-bottom: 1px solid #DDDDDD;
        margin: 0 0 1.625em;
        overflow: hidden;
        padding: 0 0 1.625em;
        position: relative;
        }

        *** For single post Title problem : paste the following code at the bottom of style sheet

        .singular .entry-title {
        color: #4C2701;
        font-family: ‘Fontdinerdotcom';
        font-size: 40px;
        line-height: 38px;
        margin-top: 0;
        }

  169. Maria says:

    Hi there!

    Do you want a cup of coffee? :) Well…

    I have (soon) a page with only one column. I wonder if it is possible to put the archive in my menu? I know I can use widget but then I must have two columns or put the archive in the footer.

  170. tali says:

    Hi Om,

    Thank you for the blog article and all the helpful info!

    I wanted to know if there is a way to change the menu color.
    Also, all the pages names that I want to display on the menu bar don’t fit in one line;
    however, I deleted the search box from the menu and there is an empty space there is there a way to fit it on one line and use that space?

    my site: http://hebrew.shmulikshmuel.com/

    Thanks!!!!!!!!!!
    Tali

    • HI Tali,

      To make the menus in a single line try the following

      /***** It will go at the bottom of rtl.css ***********/

      #branding .only-search + #access div {
      padding-left: 0;
      padding-right: 0;
      }

      /********** It will go at the bottom of style.css ***************/

      #access div {
      margin: 0 3.6%;
      }

      If you want to change the menu color try the following code….. Just change the color value

      #access {
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
      clear: none;
      display: block;
      float: left;
      margin: 0 auto 6px;
      width: 100%;
      }

      Regards
      Om

      • tali says:

        Thank you Om! I manage to fit it all in one line :)
        I can’t however change the color. I placed the code in the style.css, is that the right place?
        also, which # do I change? the first or second, or both (#252525, #0A0A0A) ?

        Thanks!!!!

      • Hi Tali,
        Good Morning
        the first color is the starting color and the 2nd color is the ending color .

        So, If you want gradient color, then you can use different starting and ending color..
        but, if you dont want gradient and prefer single color then place ur preferred color in both starting and ending place

        Regards
        Om

      • tali says:

        Thank you Om!
        The code for changing the menu color didn’t work out for me.
        Any idea?

        Thanks again!
        Tali

      • Hi Tali,
        Just visited your site…
        I found you already have changed your menu color to Bluish background..
        what color you want to change in menu?
        Would u mind to clarify?

        *** it is late here..i will reply u back in my morning..

        Regards
        Om

      • talishmuel says:

        Hi Om,
        I would like the menu to be blue. I didn’t see any changes after I placed the code so I deleted it. I now put the code again and I still see the menu in black.
        my site: http://hebrew.shmulikshmuel.com

        Thanks again for all your help!!!

        Tali

      • Hi Tali,
        In which browser you are showing menu as black? from my side in firefox it is showing blue..

        Pls let me know..

        Regards
        OM

    • talishmuel says:

      That is too wird…I looked at 2 different computers in both crome and explorer and its seems black. I don’t have firefox. Is there a way to fix it so it will be seen in crome and explorer?

      Thanks,
      Tali

  171. Jennifer says:

    Is there a way to add a favicon in this theme?

    • HI Jennifer,
      would u mind to share me ur website url?

      regards
      Om

      • Jennifer says:

        Actually, i figured it out. Now I am looking to figure out how to make the transparent background work in Internet Explorer.

        http://thebestbelt.com

      • Jennifer says:

        Looks like I figured that out too. Hope you didn’t dig too far into it

      • Hi Jennifer…
        Sorry for the late..would u mind to share us the CSS part you used for both IE and Firefox to make the Background Transparent?

        pls share us the CSS code

        Regards
        Om

      • Jennifer says:

        Hmm, don’t know where the conversation went, but you requested that I share my solution to the transparent background.Here’s what I had to edit on my stylesheet. It is a child theme of TwentyEleven. My site is TheBestBelt.com. These changes were necessary to make the background of the content and header area transparent so that you could see the logo in the background. I hope this is helpful to your readers.

        /* This is in the =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */

        body
        background-color: none;
        line-height: 1;
        }
        /* This is in the =Global section */
        body {
        background-color: /*rgba(255, 255, 255, 0.1)*/ transparent;
        background: rgba(255, 255, 255, 0.5);
        }
        #page {
        background-color: /*rgba(255, 255, 255, 0.1)*/ transparent;
        background: rgba(255, 255, 255, 0.5);
        }
        /* I changed this under the /* =Header section. This was necessary to make the area above the header image have a semi-transparent background in Internet Explorer. It was not necessary for Firefox or Chrome.*/

        #branding {
        border-top: 2px solid #bbb;
        padding-bottom: 10px;
        position: relative;
        z-index: 2;
        background: transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90FFFFFF,endColorstr=#90FFFFFF);
        zoom: 1;

        /* And in the =Menu section */

        #access {
        float: left;
        width: 100%;
        height: 40px;
        color: #000;
        background-color: rgba(0, 0, 0, 1);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000);
        zoom: 1;

      • Thanks a lot Jennifer..
        :)

        Regards
        Om

  172. lilly says:

    Hi there. I am a total beginner just starting up my private blog. So I have a question for you: Although I tried your solution I somehow can’t manage to change the color or size of the blog post titles in my twentyten theme. Do I have to put the code simply at the bottom of my style.css? I tried this and so far no change. I hope, you can help me! Thanks!

    • Hi Lily,
      Yes, you need to add the code at the bottom of your stle.css but, if you are using child theme then it may cause u some problem….

      mail me your style.css at om2000_cuet@yahoo.com . I will check it and reply u back tomorrow morning (night here now)

      *** Also share me ur Website URL.

      Regards
      Om

  173. k says:

    I just added an affiliate ad for a friend’s real food blog on my sidebar, but it is squashed because the sidebar isn’t wide enough. Is there a way to allow just the ad itself to stretch wider than the sidebar, or do I have to widen everything in the sidebar? Thanks! http://www.ournourishingroots.com

    • Hi Kmille,
      Good Morning..
      Just visited your site..
      Would u mind to clarify which advertise you are talking about and what do u want to do?
      Your requirements is not clear enough to me..

      Regards
      Om

      • k says:

        It’s the one that says “Avoiding Grains? Grain Free Meal Plans”. I just put the html code into a text widget, added it, and it’s a bit squished due to the sidebar width. I’m not sure if I can tweak it for that ad only (leaving everything else in the sidebar the way it is)?

      • Hi Kmille,
        Pls try the followings..

        *** Try the following code to widen only that advertise image..

        #text-8 a img {
        max-height: 250px;
        max-width: 250px;
        }

        /****** Additional code ********/

        ** the following code will help u to widen the sidebar and the advertise also

        #primary {
        float: left;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0.4%;
        margin-top: 0;
        width: 68%;
        }
        #content {
        float: left;
        margin-bottom: 0;
        margin-left: 7.6%;
        margin-right: 0;
        margin-top: 0;
        width: 90%;
        }
        #secondary {
        float: right;
        margin-right: 12px;
        width: 29%;
        }

        Let me know it is ok or not

        Regards
        Om

      • k says:

        Thank you so much, that worked like a charm and looks just the way I wanted it. (I used the code to just widen the single ad)

      • Nice to know it helped you Kmille
        :)

        Regards
        Om

  174. talishmuel says:

    Hi Om,

    I have 2 more questions. hope you don’t mind…
    Is there a way to delete the blog post title from all the pages but not from the blog?
    Also, do you know how I can center the widget titles?

    Thanks!!!!!
    Have a great day :)
    Tali

    • Hi Tali,
      Good Morning..
      Would u mind to clear me the problem again?

      From which page (pls provide link) you want to remove blog post title
      and from which page u want to keep it?

      Regards
      Om

      • talishmuel says:

        Good Morning Om,

        Thank you for the quick reply!
        I have a lot of pages on my site and I would like to remove the titles from all of them. The only thing is that I still use one of my pages as a blog and I would like to leave the title- for the posts. So my question is – is there a way to remove the title from the pages and not from the posts?
        Hope that was a better explanation :)

        Tali

      • Hi Tali,
        Yes.. If you want to remove the Page’s Title (not the Post title) it is also possible…but..for this i need to check ur Theme file to implement..

        Regards
        Om

    • talishmuel says:

      Ok, not sure what you need exactly. how can we do that?

  175. sousou says:

    Hello

    I am making a directory website with wordpress
    -but I can’t find how to delete the space between the news widget and the border,
    -I try to decrease the font size in css because article titles and tags in categories are big but nothing work
    -And my third problem is that the colors and size of my subcategories are ugly and big in the left column, I tried to change css but nothing work
    Thank you

  176. Bernard says:

    Why is my post deleted?

  177. Erik says:

    Dear Allaboutbasic.com, how can I change the footer text in a Twenty Eleven 1.2 theme?

    Thank you very much in advance.

    Erik

    I read in footer.php:

    <a href="” title=”” rel=”generator”>


  178. Erik says:

    Dear OM and other visitors, in the meantime I have found out how to change the footer in the Twenty Eleven theme, you can find the solution at http://wordpress.org/support/topic/twenty-eleven-footer-1.

    Have a nice day all!

    • Hi Erik,
      thanks a lot..

      sorry man, i am late to reply you …
      pls let me know if u need any further solutions…

      **** If you have any question regarding footer link or any other question..feel free to do comments

      Regards
      Om

      • Erik says:

        That’s allright, Om! you are doing a great job here so do not feel sorry. Right now I have temporarily set the old frontpage website back, while working on the new WordPress site with the Twenty Eleven theme. Your suggestions here are great, I will most certainly take a look here now and then. (please remove my other reply with the carillon-gravatar, this is another site I am working on. Thank you, Erik)

      • Hi Erik,
        Good Morning..
        Ok…just let me know if u need any modifications…

        Regards
        Om

  179. Guy Filliot says:

    i’m a beginner in wordpress and i try to use twenty eleven theme .I would like to create a template in order to avoid to load the header picture on each page and use my own header instead but i don’t know how to do that.
    Is it possible to associate to the template a new header , CSS , …. files ? how to do that
    Any advices ?
    Thanks and regards

    • Hi Filliot,
      would u mind to share me ur site URL to check?
      if you are using your own domain and hosting then you have several options

      *** In twenty eleven theme the fetaured image shows in the Header section..pls check it ..so if you use your own header image in the featured image section for the page then it may solve ur problem..

      *** Custom fields can also be used to show your own header image but it will need some theme files (php files) modification..

      but..better u try first the first option which i have mentioned.
      :)

      Pls let me know if u face any problem..

      Regards
      Om

      • Guy Filliot says:

        Hi Om

        Thank for your answer.
        Sorry I’m studying wordpress in local mode in order to create a bicycle travel blog .
        I didn’t publish anything for the moment but as soon as i’ll have something coherent i won’t forget to share it.
        In fact what i would like to do is :
        – Use the default page to welcome people
        – create my own page model or template in order to include a Nextgen album .
        This page will include :
        a basic design such as a title , a small header without picture but a banner , the same navbar as the one used in the welcome page ,no sidebar , a footer.
        I’ve the following questions :
        – Wich files are mandatory to define the new model ?
        – Do i’ve to create new header.PHP, Style file …etc
        – Is it possible to copy ,rename and modify the twentyeleven files according the answer to my first question <>

        Reading the wordpress codex i saw that is it possible to create a page model from a copy of the page.PHP .So i made a copy of the page.PHP , renamed it and modify the code as mentioned in the codex in order to define a blank page. I can see its name in the page attributes and i’m able to create a blank page .
        From this point i need your advices to progress. Just let me know how to do to go ahead

        Sorry to disturb you .If this comment is out of scope of this forum please don’t hesitate , just let me know

        Thanks and best regards

  180. Fer says:

    Hi,

    Thanks for your great tutorial.

    Maybe you can help me. How I can use the header of this theme in html file to in the header of my site.

    The test blog are here

    http://www.fotogenicos.net/blog

    And I want use the header in my site here:

    http/www.fotogenicos.net

    the script only accept the header if are in html.

    Thanks and sorry the poor english

  181. Remco says:

    Hi! Thanks for the great help! It was very usefull!

    But…. i’m stuck at one thing!

    I am editing the Twentyeleven theme with my child theme.
    I have installed a plug-in wich make’s my header to an image slider. I want to enlarge the height of the header. In above instructions you told me to add this to my child theme :

    #branding img {
    height: 100px;
    margin-bottom: -7px;
    width: 100%;
    }

    I’ve done that and just like you said, the header height change’s into the height I wanted.
    But there is one problem. In the header i’ve changed the site title to an image.

    So when I add the code for changing the height of the header, the image i’ve pasted in the site title change size to.

    Is there any solution?

    Sorry for my bad English, I’m a Dutch student so my English isn’t that good!

    Remco

  182. Remco says:

    Hi,

    Grrrrr! What a pitty… Do you have any idea what I can do so the code doesn’t effect my image in the site title?

    Anyway thank you very much for responding this quick!! :)

    Remco

  183. Denyse says:

    Hi Om,
    First of all thanks for this post. The codes are fantastic, they helped me a lot.
    Can I bother you with just a little question? I’d like to remove the page tittles from the pages I’ve created, but when I delete them, they’ll disappear from the navigation menu as well.
    Can you give me the code that will just remove them from the body of the page?
    Thanks a lot! And have a cup of coffee on me. Best,

    • Hi Denyse,
      would u mind to try the following code?

      .singular .entry-title {
      display: none;
      }

      the code above will help u to remove the page title from the pages….

      Also,
      I think u r using twenty eleven child theme, so better paste my code at the bottom of parent theme’s style.css

      Please let me know it is Ok or not

      Regards
      Om

      • Denyse says:

        Thank you OM. It worked. ^_^

        I guess I lied, because I have another question; how to rearrange the tabs in the menu, to whatever I like? Right now, they’re alphabetical. I’ve tried simply going to the menus option on the dashboard, but it didn’t do anything.

        I appreciate your time,
        Cheers,
        D

      • Hi Denyse,
        Check the image link i have shared

        pls let me know if you have any question
        :)

        thanks for the coffee :)

        Regards
        Om

      • Is the page title actually being removed or hidden?

        I would prefer to have the page title remove too, but I’m concerned about how that will affect my website’s SEO. If it doesn’t affect the SEO of my website, then I’d rather it not be there.

        I do have another question: How can I center the page title? The default is align left.

        Thanks for all your help!

      • HI MyBuddyOnMaui
        would u mind to share me your site address?

        Regards
        Om