WordPress.com Theme Twenty Twelve theme Modification: Modify Header,footer,font,sitebar,Titles using CSS.
September 5, 2012 96 Comments
Can you remind the Default wordpress Twenty Eleven Theme ? WordPress has now released Twenty Twelve theme and here i have come to show you how you can modify it using css. If you are using your own hosting or purchased wordpress.com Custom design you can use these techniques to give your site a new look.
Also, not only these, if you have some other issues please share me here in the comments section.
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”
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..
6. If you don’t want to show Featured Image at the top of the post of Twenty Twelve theme
.entry-header img.wp-post-image {
display: none;
}
*** If you want to remove the “Featured Post” written above the Sticky post (which has featured image)
article.sticky .featured-post {
display: none;
}
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;
}
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;
}
Want me to help you personally for CSS Issue? You can purchase gigs from me in fiverr ..
Click the Image below
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
Hi Chen.
Can u share me Your site URL to check? i will share u the code
Om
The site is still pretty empty, i just started to build it on the twenty twelve child theme.
the url is http://odedmagen.com/
Hi Chen…
for rounded corner widgets of twenty twelve theme try this code..
*** change the radious value as ur need.
.widget-area .widget
{
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
border: 2px solid #125C5C;
}
Regards
Om
It worked perfect! thanks a lot
by the way, can you recommend on a plugin for comments section to look better?
(like yous?)
Hi Chen..
You can use Disqus comments plugins …or using css u can add some style in the current comments section…
what type of look u prefer in ur existing comments box?
let me know..i will check it
Om
great post. thanks. How can I remove some white space above the top menu? thanks.
Hi,
share me ur site URL to check
Om
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.
And.. as you are kind enough to buy me coffee…u can check my this service
http://fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-related-issues
Regards
Om
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 }
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
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
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
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
Pleasure Rich…
feel free to let me know if u have any other issue in future
Kind Regards
Om
I didn’t see how to change the background for the entire site. Did I miss something obvious?
Hi Kelsang..
the css i shared ..u have to use it in style.css or custom.css
Om
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
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
Dear Om – YES that did what I was looking to do THANKYOU – a cup of coffee is warranted and a Big thank you….
It was GREAT! I was looking for such a great tutorial for twenty twelve. thanks
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?
Hi Gordon…
if it is creating problem with that width value (in PX) … try to use ( %) in width value..for example width=40% or 50%
Om
Thanks for the wonderful tutorial.
One question. How do I reduce the space above and below the menu bar?
HI Shirley
share me your site url
Om
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?
Hi Kinwin
would u mind to share me ur site URL pls
Om
Sure, the site is still in beta test:. http://drl.ee.ucla.edu/test/wordpress/
I did figure out a way to keep the Frontpage at full width but only change other pages. I added the following lines in my child theme’s style.css file.
.widget-area {
width: 20%;
}
.page .site-content {
float: left;
width: 77%;
}
.front-page .site-content {
float: left;
width: 100%:
}
HI Kinwin
Nice to know u solved it…
but http://drl.ee.ucla.edu/test/wordpress/ are you not using 2012 theme there? and also..
.front-page .site-content {
float: left;
width: 100%:
}
that code u used should not work as .front-page is not there
Om
Yes, I’m using the default Twenty Twelve theme. I made a child theme, which is just one file style.css which modifies the default styles in Twenty Twelve. As far as I can tell, the code is working fine, I get to keep the full width at the Home page, but all other pages I can adjust the width of the content area relative to the sidebar area.
Regards, /Kin
Nice Kin
if you have any other issue u can share me here
Om
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
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
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?
http://www.beardbarons.com is the url
Hi James
sorry for the late response
to reduce the gap between ur menu buttons use this code
.main-navigation li {
margin: 0 12px 0 0 !important;
position: relative;
}
Om
Can you help me remove the line started with “this entry was posted … “?
Hi Admin@fagelsta
can u share me ur site url to check?
Om
I solved it myself by adding the line below in style.css. But I will probably have more wonderings come. Thanks anyway for the quick response.
footer.entry-meta {
display: none;
}
Bye the way, my url is http://mariebrunnberg.se
Great …nice to see u solved it Marie..
Om
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!
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
Now I changed the post background color to black, but the “site” (the background is a picture) background (around the sidebar, posts, above the menu ) color is white
Hi Attila
thanks..i have checked..actually the way u r asking to do the color change will require modifcation in ur theme file to make the work easy…
only css may not be the perfect way to solve ur issue
Om
Thanks for the help! I think I leave the white. But so much thanks:) I read your post and very valuable
Pleasure Attila
Om
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
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
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!
Hi Nikolaus
thanks for ur comments
Regarding ur question
1. To Reduce Space between one widgets and the next widgets in twenty twelve theme use the following code
.widget-area .widget {
margin-bottom: 1.429rem !important;
}
2. To reduce space between widget title and widget section of Twenty twelve theme use the following css code
.widget-area .widget h3 {
margin-bottom: 0.714rem !important;
}
pls let me know it works or not
Om
Thank you very much. You resolved my problem exactly. Thanks again!!!
Pleasure Nikolaus
Om
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
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
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!
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
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
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
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
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
Sorry forgot to mention my website: http://www.windowzphone.com
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!
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
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
HI Mike
didnt understand ur requirements would u mind to clarify pls?
Om
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.
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
Thanks! It worked well!
Hi Om!
Is there a way I can center the title and description in Twenty Twelve theme? Thanks in advance.
scrapisimo, this worked for me: http://wordpress.org/support/topic/how-to-centertitle-in-twenty-twelve?replies=3#post-3930353
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
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
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.
Hi Lewin
i think u r searching this?
article.page {
background: red;
padding: 12px;
}
Om
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!)
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
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
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
Please disregard this message, i found that i accidentally had a fixed width on my header. -.- made the header width 100% when under 960px and this did the trick.
Hi Esben
nice to know u solved it
Om
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
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
Thank you, Om. That worked very well! Really appreciate your time and help. Very kind.
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
Hi Jenny
to make ur site’s background color full dark in Twenty Twelve theme pls try this code
body .site {
background-color: #222222 !important;
}
Om
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
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
Hi Om,
Both of those code snippets worked! Thank you again!
Gratefully,
Melissa
Thats great Melisa
Om
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
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
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
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
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