Modifying and Tinkering with Twenty Twelve WordPress theme

Twenty Twelve Theme

Twenty Twelve Theme

If you are using Twenty Twelve WordPress theme like I am, here are some coding pointers to get you going. TwentyTwelve is a great theme and is one of those themes that has great potential to tweak.  I’ve commented some useful css classes and IDs and believe they’ll be useful to assist you in customizing your best wordpress experience.  If you have other ideas, suggestions, please share!

/*Make the theme full width and make background white*/
.site {
 max-width: 100%;
 background-color: #fff;

/*Give header some zest by making it black*/
.site-header {
 background-color: black;
padding: 0 !important;

/*Adjusting the spacing around the title and description*/
.site-header h1 a {
color: #fff !important;
padding: 8px 0px 0px 35px !important;

/*Headerbackground and padds*/
.site-header h2 {
color: #fff !important;
padding: 0px 0px 0px 35px !important;
/*Adjust the padding to make room and play with sidebar width and 
reset blank spaces */
.site-content {
margin: 0;
padding: 1% 0% 0% 1%;

/*Adjusting the sidebar*/
 .widget-area {
 margin: 0;
 widget: 30%;
 padding: 10px 0px 0px 10px;
/*Adjust the search bar*/
.header-search {
 padding: 0px 15px 0px 0px;
/*Adjusting the navigation*/
 .main-navigation {
 margin-top: 0px;
 text-align: right;
 padding-right: 15px;
/*Remove navigationg spacing*/
.main-navigation div.nav-menu > ul {
 border-top: 0px;
border-bottom: 0px;

/*Navigation Color*/
.main-navigation li a {
color: #fff !important;

/*Dropdown color*/
.main-navigation li ul li a {
background: #000 !important;

/*removing extra top space and remove twentytwelves iconic box-shadow*/
body .site {
margin-top: 0 !important;
box-shadow: none;

/*WordPress contentinfo adjustment*/
Footer[role="contentinfo"] {
Max-width: 0px !important;


There ya go!

Leave a Reply

Your email address will not be published.