WordPress Twenty Twelve Theme Modifications, Documentation, Support and Customizations

The Twenty Twelve (2012 theme)  for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background. You can check the Twenty Twelve theme demo.

You can use my shared code and ask question in the comments section.

Or can take my personal help.

1. If you want to change the Font Color,size and font family of Site Title of Twenty Twelve theme use the following css code

.site-header h1.site-title a {
text-shadow: 0 1px 1px #000000;
font-family: ‘Open Sans’,sans-serif;;
font-size: 28px;
color: grey;
}

1.1.  If you want to use Header Image instead of Site Title  in Twenty Twelve Theme of WordPress.com

–> You can easily do it from  Appearance–>Header   option

2. If you want to reduce the space/gap from the top of the site of  Twenty Twelve theme


body .site {
margin-top: 1.43rem;
}

3. If  you want to make the corners  Rounded (Rounded Corner) use the following code.

body .site {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

**** Rounded Corner for IE Browser

IF the Rounded Corner does not work in IE, pls check the following page and try to use the code.

http://code.google.com/p/curved-corner/

body .site {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}

4. If you want to change or modify Site Description’s font color,font family and font size of Twenty Twelve theme use the following code


h2.site-description {
color: #020202 !important;
font-family: times New Roman;
font-size: 17px!important;
}

*** In case if you don’t want to show the Site Description in the Header section then you can use the following


h2.site-description {
display:none;
}

or…simply you can Remove the Site Description text From you dashboard.

just go to  “Settings–> General” and remove the text from “Tagline”

twenty twelve theme header modifications

5. If you want to increase the Width of body Content Section (reducing left and right padding)  use the following css code

.wrapper {
margin-left: -18px !important;
width: 1000px !important;
}

After that step..

** Increase Width Of Content Section….

IF you are willing to increase the Content Section’s width(not the sidebar) use this code

.site-content {
float: left;
width: 71.1% !important;
}

If you want to increase/decrease  Sidebar Width Use the following code

.widget-area {
width: 27.04% !important;
}


*** You need to keep in Mind that you have increase Content section width and Sidebar width

in such a way that they should reside side by side..otherwise Sidebar will move down..

twenty twelve theme content section modifications

6. If you don’t want to show Featured Image at the top of the Single post of Twenty Twelve theme

.entry-header img.wp-post-image {
display: none;
}

twenty twelve theme featured image modifications

7. If you want to remove the spacing between  Menu item and Post Title  (in Home page) use the following

*** it will also work for invidual pages

.site-content {
margin-top: 2px !important;
}


.widget-area {
margin: 2px 0 0;
}


.site-header {
padding: 1.71429rem 0 14px;
}


8. If you want to  change Sidebar Widget Title’s font color,font size and font family of Twenty Twelve theme


.widget-area .widget h3 {
color: blue;
font-family: times New Roman;
font-size: 15px;
margin-bottom: 1.71429rem;
}

9. If you want to change Sidebar widgets link’s font color,font type and font family of  Twenty Twelve theme

.widget-area .widget a {
color: #777777;
font-family: times New Roman;
font-size: 14px;
text-decoration: underline;
}

10. If you want to change Right Sidebar widget’s links hover color of theme Twenty twelve

.widget-area .widget a:hover {
color: red !important;
font-family: times New Roman;
font-size: 14px;
}

11. If you want to use Background Color in Widget title and make the Widget Title Centralize

.widget-area .widget h3 {
background-color: yellow;
color: blue;
font-family: times New Roman;
font-size: 15px;
margin-bottom: 1.71429rem;
text-align: center;
}

12. If you want to give Each WIdget block a background color you can use this

.widget-area .widget {
background: none repeat scroll 0 0 green;
}

*** in such case you may need to make your widget links or text color to be white use this if you need that..

.widget-area .widget a {
color: white;
font-family: times New Roman;
font-size: 14px;
padding-left: 10px;
text-decoration: underline;
}

twenty twelve theme widget section modifications

Regarding Comments Section

13. If you don’t want to show Comments Section only in your pages you can use one plugins

named  “No Comments on pages” which will help you to disable comments only  for pages

14. If you want to Change  Content Section’s font color,font family and font size of Twenty Twelve theme


.entry-content, .entry-summary {
color: black !important;
font-family: times New Roman !important;
font-size: 17px !important;
line-height: 1.71429;
}


15. If you want to change Post Title’s Font color,font size,font family of twenty twelve


.entry-header .entry-title a {
color: black;
font-family: times New Roman;
font-size: 26px;
text-decoration: none;
}


16. If you want to add Background Color and Image In Twenty Twelve Theme


body {
background-color: #E2E2E2 !important;
background-image: url(http://agrofarma.pe/wp/wp-content/uploads/2012/12/1.jpg) !important;
}


17.If you want to make ur Twenty Twelve Site Full width use this code


body .site {
max-width: 100% !important;
}

twenty twelve theme background color and width modifications


If you have any issue feel free to ask me question here in comments section

OR

Want me to help you personally for CSS Issue?CLICK HERE….

166 Responses to WordPress Twenty Twelve Theme Modifications, Documentation, Support and Customizations

  1. chen says:

    hi

    great post!
    i changed widget background color and would like to give the widgets blocks nice and rounded boarders. can you add the code for this?

    thanks

    Like

  2. great post. thanks. How can I remove some white space above the top menu? thanks.

    Like

  3. Robinina says:

    Hi Om, I can’t find any option for the footer to increase to three widgets. I can place three widgets into the widget module, but they stack up against one another as opposed to side by side. Would you mind pointing it out to me? I’d love to treat you to a cup of coffee for all of your help.

    Like

  4. richokun says:

    Hi – and THANK YOU for all your posts. I am trying to modify the placement of category pages that I use to list a thumbnail and excerpt. In Twenty – eleven, I put the ollowing code in the css editor stylesheet and it worked fantastically, I just upgraded to Twenty twelve and love it, but when I try to put the following in and then save the sheet it strips out all of the parameters and I am not sure why – can you help please. Thank you
    .cat-post{
    02 width:100%;
    03 }
    04 .cat-post-list{
    05 display: block;
    06 margin-bottom: 20px;
    07 position: relative;
    08
    09 }
    10 .cat-post-images{
    11 float:left;
    12 width:140px;
    13 display:block;
    14 }
    15
    16 .cat-content{
    17 width:350px;
    18 float:right;
    19 }
    20 .cat-post-title{
    21 display: block;
    22 width:100%;
    23 }
    24 .cat-clear{
    25 clear:both;
    26 }

    Like

    • HI Richokun..
      are you trying to modify ur category page in twently twelve theme so that thumbnail image will be in the left and post excerpt will be in the right..something like that? share me ur category page url too..

      Regards
      Om Prakash

      Like

  5. richokun says:

    Dear Om –
    Yes I am trying to set it up so that the thumbnail is on the left margin and the on or two lines are aligned to the right of the picture but on the same line so it doesn’t take up more space on the page since I will be adding many – Right now it is under the pic and I cannot seem to modify the CSS to get it right – an example of a category page (I have organized it as menu items as category pages
    http://www.maya-the-puppuppy-poet.com/poems-for-adults-too/
    MY site is http://www.maya-the-puppuppy-poet.com
    Thank you for any help you can provide.
    Blessings
    Rich

    Like

    • Hi Rich..
      pls try this code

      div.cat-content {
      float: left;
      margin-left: 13px;
      }
      div.cat-post-images {
      float: left;
      }
      div.cat-post-list {
      clear: both;
      margin-bottom: 6px !important;
      overflow: hidden;
      }

      paste the code either ur style.css or custom.css

      and let me know it is ok or not

      Kind Regards
      Om

      Like

  6. richokun says:

    Dear Om –
    THANK YOU, THANK YOU – it works perfectly. I guess the word ‘important’ is important
    I am truly grateful for your generous help.
    With gratitude
    Rich

    Like

  7. kelsangwangpo says:

    I didn’t see how to change the background for the entire site. Did I miss something obvious?

    Like

  8. richokun says:

    Dear Om – Thank you again for all your previous help.
    I wanted to make my content and widget area take up the entire width of the screen page if possible. I tried the mods above for both content and widget, and this did increase both but not the area that it resides in – my site is http://www.-maya-the-puppuppy-poet.com I changed the background color so you can see the pinkish area is what I want the white area to expand to if possible – IS there anything you can suggest please?
    Thank you again.
    Very truly yours
    Rich

    Like

    • HI Rich

      would u mind to check this code to make whole TwentyTwelve theme full width pls

      body .site {
      max-width: 100% !important;
      }
      is that something u were asking?

      let me know pls

      Om

      Like

      • richokun says:

        Dear Om – YES that did what I was looking to do THANKYOU – a cup of coffee is warranted and a Big thank you….

        Like

  9. Adam says:

    It was GREAT! I was looking for such a great tutorial for twenty twelve. thanks

    Like

  10. gordo019 says:

    Using WP Twenty Twelve and….

    re: 5. If you want to increase the Width of body Content Section (reducing left and right padding) use the following css code….

    .wrapper {
    margin-left: 130px !important;
    width: 1000px !important;
    }

    .site-content {
    float: left;
    width: 71.1% !important;
    }

    Seems to trash the mobile rendering of the pages/posts?

    Like

  11. shirley says:

    Thanks for the wonderful tutorial.

    One question. How do I reduce the space above and below the menu bar?

    Like

  12. kinwin says:

    Fantastic info. This page helped me a lot.
    There is still one thing that bugs me though, I’m trying to increase the content section’s width and reducing the sidebar width. It works fine as you described with…

    .site-content {
    float: left;
    width: 71.1% !important;
    }

    However, this also reduced the content width of my Front page. I have setup my Front page to have no side bar. It used to span the full width, but now it’s only 71.1%.
    Is there a way to selectively keep the front page at full width (no sidebar) and adjust the width of the rest of the pages which have sidebars?

    Like

  13. Dan says:

    HI

    MY SITE IS : http://WWW.2HIGHERPROFITS.COM

    I want to move the Right side bar up flush with my logo. How can I do that?
    Also, I want to change the Font Color of my Posts from Blue to Black.

    Where would I place this code? Can you give me the dashboard and then clicks to make this work? This is great information.

    Thank you.

    Dan

    Like

    • Hi Dan…
      to move ur Sidebar to the top..it will need customization in ur theme file…
      Also..i have checked ur posts… but..the color is already black..not Blue…

      would u mind to share me any page or post url to check the color issue?

      And..u have to paste the code in style.css… go to “Appearance–>Editor” there u will see the style.css

      Om

      Like

  14. James says:

    I’m trying to put buttons around the nav menu links, which I’ve accomplished. I want to remove the gap between the button/links though.

    Can you help please?

    Like

  15. admin says:

    Can you help me remove the line started with “this entry was posted … “?

    Like

  16. Attila says:

    Hi, can you help me please? How can I change the margin/frame color (my site: http://warcraft4beta.com)( that’s white border around the posts. And how can I change the posts background color? Thank you!

    Like

    • Hi Attila
      to change the frame or margin color u have to change the white background color of ur site…and the have to do changes in post or page background…

      regarding the post background

      are u talking about this code?

      .site-content article {
      background: none repeat scroll 0 0 lime;
      }

      Om

      Like

  17. Greg Streech says:

    Very useful post, thank you.
    Question – On my main page I want to reduce the space between the posts (below the Welcome sticky post). I can’t identify the file I need to modify in the theme editor. Can you point me in the right direction for both the file that I need to edit and the padding I need to adjust? http://www.guidetrails.com
    Thank you.
    Greg

    Like

    • Hi Greg
      To Reduce the gap between your posts in homepage.. Pls paste the following code at the bottom of your style.css
      .site-content article {
      margin-bottom: 1.143rem !important;
      padding-bottom: 0.714rem !important;
      }

      Regards
      Om

      Like

  18. Great article. How can I make the space between one widget and the next smaller – on the right sidebar of a twenty twelve theme? My site is genialesstudium.com and I’d love to have smaller spaces between (1) the widget-title and the widget and (2) between one widget and the next. Thank you!

    Like

  19. Rachel says:

    This is such a huge help! I have a question – I want to center my top nav links, no matter what I do they won’t change! http://popandsizzle.com

    Like

    • Hi Rachel
      thanks.

      To make your Navigation menu to be centered in twnty Twelve theme
      .main-navigation {
      margin-left: auto;
      margin-right: auto;
      margin-top: 1.71429rem;
      text-align: center;
      width: 55% !important;
      }

      Regards
      Om

      Like

      • theamazonian says:

        Thank you so much! That is absolutely perfect. I have one last question (I swear!) – how do I delete that “Home” option up top? My header leads there and it seems pretty unnecessary. Thanks!

        Like

      • Hi Rachel
        thanks.. to remove the “Home” Option from the navigation menu of Twenty Twelve theme use the following code

        .nav-menu ul li:first-child {
        display: none;
        }
        Regards
        Om

        Like

  20. windowzphone says:

    Thanks for your great post, it resolve some of my problems but I have the following questions:

    1. how can I move my header image a little bit towards the top of the page?

    2. I need to add a separator between the header image and the post that come after the image. How can I do that?

    3. How can reduce the space between each separator and the title of post that come after the separator?

    Many thanks in advance Om!

    Mike

    Like

    • Hi Mike
      thanks for ur comments

      1. To move ur Header image to the top of the page use this code
      hgroup {
      display: none !important;
      }

      2. if you are asking about top header and content section seperator would u mind to check this code pls?

      .site-header {
      border-bottom: 2px solid grey;
      padding: 1.71429rem 0;
      }

      3. To Reduce Seperator and Title of Next Post of Twenty Twelve theme

      .site-content article {
      margin-bottom: 2.14286rem !important;
      }

      let mek know it is Ok or not

      Om

      Like

      • windowzphone says:

        Thank you so much Om! They worked perfectly. However, as you can notice in my website (windowzphone.com), there are separators between posts in the main page. How I can change the color of this separator ?

        Also, how I can change the color and size of each post title in the post page (not in the main page)?

        Is there any way to change the margins of a widget background color?

        Many thanks again,

        Mike

        Like

      • Hi Mike
        thanks…

        1.) TO change the seperator color in Twenty Twelve theme use the following code

        .site-content article {
        border-bottom: 4px double red !important;
        }

        2.) To change the Post title color only in Individual or single post page ( keeping intact the main/home page post title) use the following

        .single .entry-title {
        color: red !important;
        }

        3.) if you want to use padding in your widget section of twenty twelve theme use the following code

        .widget-area .widget {
        padding: 12px !important;
        }

        Regards
        Om

        Like

  21. windowzphone says:

    Sorry forgot to mention my website: http://www.windowzphone.com

    Like

  22. jome22012 says:

    Hello, your blog is great, you cover all the possible topics about editing Twenty Twelve theme, except how to remove or hide “This entry was posted…”. If you could just help me with that too.

    Thank You!

    Like

    • Hi Jome
      thanks for your comments

      1. If you want to remove “This entry was posted…” from the footer portion of Twenty Twelve theme

      footer.entry-meta {
      display: none !important;
      }

      Regards
      Om

      Like

  23. windowzphone says:

    Hi Om,

    Is it possible to add separators between the title and the links as well as the links themselves in the sidebar widget “Recent Post”.

    Thanks,

    Mike

    Like

    • HI Mike
      didnt understand ur requirements would u mind to clarify pls?
      Om

      Like

      • windowzphone says:

        Sure…I have a side bar widget in my site that lists the links to my previous posts (please see http://www.windowzphone.com). I need to add a line separator between these links on this widget. also I would like to add a line separator between the title of this widget and its content.

        Like

      • HI Mike

        thanks…
        1. To use border or line seperator between the List of recent post title in Widget section

        .widget li:last-child {
        border: none;
        }
        .widget li a {
        text-decoration: none;
        }
        .widget li {
        border-bottom: 1px solid grey;
        }

        2. To use line seperator or border below the widget title use the following css

        h3.widget-title {
        border-bottom: 1px solid grey;
        }

        Regards
        Om

        Like

  24. windowzphone says:

    Thanks! It worked well!

    Like

  25. scrapisimo says:

    Hi Om!

    Is there a way I can center the title and description in Twenty Twelve theme? Thanks in advance.

    Like

  26. Wow, this is amazing! Thank you!
    I have one annoyance that I can’t figure out…
    I would like to vary the font size in my posts but even if I mark a piece of text as Heading 1, it all comes out the same size. Here’s an example post http://www.leahwhitehorse.com/2013/03/10/new-moon-in-pisces-march-2013-waves/
    The subheader ‘The Aspect Picture’ is actually marked as Header 1 but as you can see, the size is the same as everything else in the post. Any help would be much appreciated🙂

    Like

    • Hi Leah Whitehorse
      thanks a lot for ur comments and sorry for the late reply…
      to make ur h1 to be looked like ur post or page title (as big) pls try this

      h1 {
      clear: both;
      color: #222222;
      font-size: 26px !important;
      font-weight: bold !important;
      line-height: 1.5em !important;
      padding-bottom: 0.3em !important;
      padding-top: 15px;
      }

      Regards
      Om

      Like

  27. lewin says:

    does anyone know how to change the background color in the text area of a post on the twenty twelve theme. Am trying to change this one to tan and can not find a setting. This is not the overall background area. I am talking about the white space where the text is published in the post.

    Like

  28. Hi Om,

    I have another quick question if you’d be so kind! (You really are the best.) I’m trying to position my top nav FIXED at the top, with the header beneath, so that when I scroll down the top nav stays at the top.

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

    And here’s an idea of what I’m looking for: http://paulina-farro.squarespace.com/

    Would love any tips! (I may have double coding that’s preventing the changes I’m making… not sure, still learning!)

    Like

    • Hi Rachel
      pls check the code below

      .main-navigation {
      margin-left: 119px !important;
      margin-top: 1.71429rem;
      position: absolute !important;
      text-align: center;
      top: 3px !important;
      }

      #masthead hgroup {
      margin-top: 55px !important;
      }

      it will help to make ur navigation menu to go to top and the header beneath the nav…

      though it may solve the issue but there is another way… for which ur header.php code may need to change

      Om

      Like

  29. Esben Raakjær says:

    i was wondering if anybody on this site knows how to remove the background, when using mobile, it seems to split my webpage in half, and use half the page to show the background. i have tried literally everything, so i am open to new ideas.🙂
    see it at http://filovision.dk

    Like

  30. esben2112 says:

    Hey, i was wondering if anybody know how to get rid of the background when using mobile, because it seems to split my page in half, and i have tried just about everything i know to get rid of it.
    see what i’m talking about here: http://filovision.dk

    Best regards, Esben Raakjær

    Like

  31. mjmoser007 says:

    Hi Om,

    I have learned a lot about CSS by reading this post and playing around – thank you for sharing this information!

    I’ve noticed that when I add in a tiled background image in the Twenty Twelves theme, it shows up even behind the text, which makes the text unreadable.

    What would I do to make the text of my pages have just a sold creme color behind them and just the true background (outside the widest lines) have a pattern?

    Thank you for any help or direction!
    Melissa

    Like

    • Hi Melissa
      for ur Content section background color of Twenty Twelve theme try this code

      body .site {
      background-color: #222222 !important;
      }

      For your Sit’s body background color of Twenty Twelve theme
      body {
      background-color: darkRed !important;

      }
      Regards
      Om

      Like

  32. jenny says:

    Hi, this is all very helpful. I am searching for a way to change the color from white to black in the content background. In twenty eleven they at least had the ‘dark’ option which gave you a nice dark gray, but there doesn’t seem to be anything built into twenty twelve. Thanks for all the other info!

    -jenny

    Like

  33. Hi Om,

    Another question here. What would I do to reduce the space between the header image and the top of the page (not including the background)? And for the footer area and the bottom of the page (again not including the background)?

    I would like to reduce the space slightly for this site, particularly the space above the header, so that I can get a few more pixels of the main picture up higher. See: http://victoriafacelli.com/

    Thank you!!!
    Melissa

    Like

    • Hi Melissa
      would u mind to check the following code pls

      *** it will help to reduce your site’s Header spacing in Twenty twelve theme

      .site-header {
      padding: 0.714rem 0 1.71429rem !important;
      }

      Also
      To Reduce the spacing of footer in Twenty twelve theme pls try this code

      footer[role=”contentinfo”] {
      margin-top: 0 !important;
      padding-bottom: 0.714rem !important;

      }
      pls let me know if that helps or not

      Om

      Like

  34. Hi Om,

    How do I get rid of the lines at the bottom of the text on my pages? There is already a line above the footer so it’s just extra lines. Two of them. I was looking at my css file and was getting confused trying to see which code controls this.

    See the example of the double lines on this page: http://victoriafacelli.com/bed-rest-care/

    Thank you for any help or direction!
    Melissa

    Like

    • Hi Melissa
      thanks for ur comments

      To Remove the Double lines or borders at the end of articles or pages in ur TwentyTwelve theme pls try this code

      .site-content article {
      border-bottom: medium none !important;
      }

      Pls let me know it helps or not

      Om

      Like

      • That totally worked! You know so much about CSS.

        Is there anywhere online that you suggest new people go to learn CSS? Or is it best just to learn by trial and error?

        Thanks so much (again),
        Melissa

        Like

      • Thanks a lot Melissa
        actually here i tried to help…
        i dont teach it anywhere online🙂

        and…yes.. Trial and Error is the best way to learn it

        and..if u have any other issue dont forget to let me know

        Om

        Like

  35. twosoybeans@gmail.com says:

    Om, thank you so much! Wasn’t sure where to put it at first, but figured it out and it did the trick. Thanks again.

    –Jenny

    Like

  36. simbarashe says:

    I’m building a new website in WordPress (am using Twenty twelve theme) and I’d like to hide the site title and tagline as my header image contains that information. And I want my header image to occupy that space where the site title and tagline are. I am not good with this coding stuff – is they no plugin to make this easier?

    Like

  37. Hi,

    I’m super new at WordPress. I have the twenty twelve theme and I’m wanting to add a google container snippet so I can use Google Tag Manager. It gives you the snippet (I’ve pasted it below) and it says: “Place it immediately after the opening tag.”

    Where on earth is the tag?! I am just using the basic ‘visual’ editor, and so there is no code. So when I cut and paste the snippet, it comes up on the web page as text (http://enchantusensemble.wordpress.com) – but even using the text editor, I can’t see .

    I’m just using wordpress online, I don’t have an app or anything. Any ideas? I just want to improve the way my site shows up in google😦

    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
    new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
    ‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,’script’,’dataLayer’,’GTM-2L9J’);

    Like

  38. Can you tell me how to get rid of the shadow line at the top of the page above the header?
    I have already removed the background image from the header. Thanks.

    Like

  39. simbarashe says:

    Hi, you really are an expert… keep it up. here is my problem: My website address is http://www.simmanamike.com I want to bring down my navigation bar so that it comes under my header image. And also to remove the other ‘HOME’ that is below my header image.I am stuck…

    Like

  40. simbarashe says:

    Hi, i messed up my wordpress twenty twelve Theme functions. I only changed the following code:

    function twentytwelve_page_menu_args( $args ) {
    if ( ! isset( $args[‘show_home’] ) )
    $args[‘show_home’] = true;
    return $args;
    }
    add_filter( ‘wp_page_menu_args’, ‘twentytwelve_page_menu_args’ );

    In line three I changed true to false. i wanted to delete the default “Home” tab. And now I am getting the following error message when trying to access the website:

    Parse error: syntax error, unexpected ‘;’ in /home4/chayaz/public_html/wp-content/themes/twentytwelve/functions.php on line 194

    Any thoughts on how I can access my website again.

    Like

  41. bradyonline says:

    Hi, I am trying to get my header and nav bar to span the full width of the screen, while keeping my body/content how it is. how would i do this? Thanks!

    Like

  42. bradyonline says:

    Simplemoneycode.com/blog

    Like

  43. Blomma says:

    Hi Om, At the bottom of every post, I would like to remove the link for category and tags. I would also like to keep the date, but put it at the top of my posts, may be just above “replies”. Thanks a lot for your help.

    Like

  44. MacPieter says:

    Hi Om,
    Great post!
    Could you help me on this:
    I’d like to put a logo next to the headertext above the menu.
    Where can I adjust that?
    This is the url…:
    http://voedingsadviespraktijk.net/wp/

    Thanks in advance…
    Macpieter
    Holland

    Like

  45. shaye nelson says:

    Hi, I just sent you $5 because your post really helped. Also my boyfriend’s name is Om. Thank you!!!!

    Like

  46. Magda says:

    Hi, love your blog and thank you for sharing your advices and tips with your readers. I was hoping you could help me with one of the issues I am having. I would like to decrease the space around the body and header to make it 960px and align with the body content (my page page http://www.beyondautosales.com/) but i used many commands but nothing seems to be working. Maybe you can give me some advice. Thanks again!

    Like

  47. magpiwo says:

    It worked! Thank you so much! You are THE BEST!!

    Like

  48. Maggie says:

    Hello,

    Wanted to ask you and was hoping you could help me out. I am trying to decrease space around We Value Your Business! on my site http://www.beyondautosales.com, i tried everything and nothinh works :(( please please help….

    Like

    • Hi Maggie
      pls try this code

      .home #primary .entry-meta, .home #primary .entry-header {
      margin: 0 !important;
      }
      .home #primary {
      margin: 0 !important;
      }
      .home #main {
      margin-top: 0px !important;
      }
      .home #masthead {
      padding-bottom: 0px !important;
      }
      .home #primary h1 {
      margin: 0 !important;
      margin-bottom: 13px !important;
      }

      Om

      Like

  49. Angela says:

    Having great trouble. Have made a child theme for 2012. Some of my css styles are working but some are not. I have now added those styles (not working in my css file) to my header.php file and they work. These are the styles I have added to my header.php file
    h1 {
    color: #2079bd;
    }
    h3.widget-title {
    color: #3F6;
    }

    but they do not work if I add them to my style.css file

    Any help would be greatly appreciated.

    angela

    Like

  50. Hi Om,

    I’m running into an issue in which the content on my page is affecting my drop-down menu. Under “photos” there are 3 sub items but you can’t see the third one on the home page (it shows up on the bio page, for example). Here is the test site so you can see what I’m talking about:

    http://greatfastcheap.com/wordpress/

    Is there CSS I can use to make sure the menu appears in front of whatever is posted below?

    Thank you for any help or direction,
    Melissa

    Like

  51. Hello Om,

    I am new to web site development. I have started a blog and I would like to center the widget titles. I have used the following for my ‘Free Report”:

    .widget-title, .Free Report { background: #eac359; color: #fff; display: block; font-size: 14px; margin: 0 0 1.5em; padding: .75em 0; text-align: center; text-transform: uppercase; width: 100%; }

    I have a REALLY basic question. I am not sure where to actually paste this coding.

    Right now I have tried pasting it in the title area and the body area of the widget and neither have worked.

    Perhaps its not working because I haven’t connected my domain yet and my blog is still hosted by wordpress.com?

    I have not purchased the custom design. I will move my domain from WIX to host gator once the minimum time frame is up (I bought my domain from WIX without knowing I couldn’t transfer it out immediately). Once this is done, I think I am supposed to go into host gator somewhere and change the code somehow with CSS.

    If so, could you tell me the steps to changing the css stuff from within host gator, i think the file management area.

    Thank you (all of this is really confusing but I have learned a lot so far and have made some real progress🙂

    Samantha

    Like

    • Hi Samantha
      yes..to utilize the css…u have to purchase custom design (css) from wordpress.com
      though wordpress.com hosted site allows only css changes…not the major php file changes
      so it depends on u what u will choose

      Om

      Like

      • Michael says:

        Hi Om/Samatha,
        I run a purchased custom design (css) from wordpress at http://talk.ibiblestory.com. I followed good advise to copy/create/activate my twentytwelve child theme. I adding code in style.css below following allaboutbasic (# 7.) to remove spacing between Menu itme and Post Title. Spacing did not change – Nothing changed. What’s wrong with the way that I follow instruction? 😦

        @import url(“../twentytwelve/style.css”);

        .site-content {
        margin-top: 2px !important;
        }

        .widget-area {
        margin: 2px 0 0;
        }

        .site-header {
        padding: 1.71429rem 0 14px;
        }

        Michael

        Like

      • Hi Michael
        seems the style u added is not effecting the mail site
        though it would better if i could check

        but..for now…u copy header.php into ur child theme and put the code between ur code

        Om

        Like

  52. Michael says:

    Thanks Om,
    When are you available to coach me via donations? #1.1 Customize header Image to css below. #1.2 Merge my Site Title .with Menu. #NEW Add twelve items using Easy Digital Download plug-in installed for my pull-down LI. Item and PP Configuration is about 1-2 hours.

    Michael

    Like

  53. Hi,

    I keep coming to your blog since I got many useful tips

    Would like to seek your help for my problem :
    How to reduce the space betwen lines / rows in my post ?

    My web i.e. http://www.metrokidwear.com

    Appreciate for your help.

    Thanks,
    Liany

    Like

  54. Thanks for the link, Om.
    Unfortunately I need payment button for goods, not donation.

    I hope you don’t mind if I may often visit to seek your advise later

    Thanks again.

    Liany —

    Like

  55. Hi Om,

    Like many of the other people who have found your site: I am VERY grateful that you share your CSS wisdom! I’m still in the (very) early stages of setting up my blog, but I would love to know how to put the navigation bar below my header image, and raise my header so it’s higher on the page. Is there a way to to it so it will be responsive on various screens?

    Also – I’m more than happy to donate for all of your invaluable information! Do you accept paypal?

    thnx again!

    Like

  56. Steve says:

    Hey bud excellent work you have done. Greatly appreciate your effort.
    But for some strange reason I am not able to change my css is it because I am using Child Theme?

    Like

  57. This is a great resource, thank you! Please could you tell me
    1. how to make my menu / nav bar stay in a fixed position even when the page scrolls, and
    2. how to center the footer text, where the copyright is described.

    http://ourdigitalwedding.co.za/champagne/

    Thank you
    Michael

    Like

    • Hi Michael
      sorry i was travelling outside….

      for ur issue 2
      pls try this

      div.site-info {
      width: 24%;
      display: block;
      margin-left: auto !important;
      margin-left: a;
      margin-right: auto !important;
      }

      Om

      Like

  58. PinkNoam says:

    Just want to say thank you for this post, it’s been incredibly helpful, you’re a genius!

    Like

  59. Testing out some WordPress themes and found your quick guide useful. Especially the code for rounded corners. Thanks

    Like

  60. Superb, I have been searching for this and I think yours site should be one of most intuitive site. My site is mohanmekap.com and using this theme. thanks.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: