A neat CSS customizing for WordPress

In case you’re interested, here is the CSS customizing for Twenty Twelve Template that is used on this WordPress site. I suppose that you’re familiar with CSS & Inspecting Elements on browsers. Please note that additional customization might be needed. For example, optimized ads (WordAds), Tablet & Mobile view, …

I use repeat-x URL img for {body} and background of #f9f9f9. This still needs more work to adjust the small differences on Chrome in case you’re using font larger than 100%!

Removing borders and shadows of the main container – you can identify the width here if you like:

#page {
padding: 0;
margin: 0 auto;
position: relative;
background: #f9f9f9;
border: none;
box-shadow: none;
overflow: hidden;
}

Adjusting the header to change the title & description and to add logo:

#masthead {
padding: 0;
position: relative;
}

.site-title {
background: #186288;
height: 66px;
}

.site-title a {
color: #ffffff !important;
position: absolute;
left: 150px;
top: 10px;
letter-spacing: 3px;
font-family: Arial;
outline: 0;
}

h2.site-description {
font-family: Courier New, Courier !important;
font-size: x-large !important;
color: #ffffff !important;
position: absolute;
left: 430px;
top: 11px;
}

#masthead:before {
content: url('https://mohamadkarbi.com/wp-content/uploads/2017/02/logomk.png');
position: absolute;
left: 20px;
top: 12px;
border-radius: 50%;
border: 10px solid #f9f9f9;
background: #f9f9f9;
}

Adjusting the width of the article & widgets column if you like:

#primary {
min-width: 72%;
}

#secondary {
max-width: 25%;
}

To add radius corners to widgets:

.widget {
background: #fbfbfb;
border: 1px solid #dddddd;
padding: 20px;
border-radius: 10px;
}

In case you want to remove this radius and borders from specific widget(s):

.widget_facebook_likebox {
border: none;
border-radius: 0;
padding: 0;
}

I created my own text widget for social links (#text-30):

#text-30 {
position: absolute;
top: 19px;
right: 20px;
padding: 0;
border: 0;
box-shadow: none;
background: none;
}

Now, let’s fix the article view:

.site-content article {
margin-bottom: 30px;
background: #ffffff;
padding: 30px 30px 20px;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
box-shadow: 1px 1px 3px #eeeeee;
}

.entry-title {
border-bottom: 1px solid #e17842;
padding-bottom: 10px;
}

More beautiful Navigation Menu:

#site-navigation {
height: 40px;
}

.nav-menu {
position: absolute;
left: 150px;
top: 66px;
border: none !important;
}

.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

.nav-menu li {
float: left;
margin: 0;
overflow: hidden;
}

.nav-menu li a {
line-height: 1 !important;
padding: 12px;
display: inline-block;
color: #666666 !important;
background: #ffffff;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #bedef0;
}

.nav-menu li.selected a, .nav-menu li a:hover {
color: #000000 !important;
background-color: #fdf8f5;
}

Move the Search Box to the upper corner of the site with some adjustments:

#searchform {
border-left: 1px solid #bedef0;
border-bottom: 1px solid #bedef0;
background: #ffffff;
position: relative;
}

#searchform #s {
height: 24px;
border: 0;
outline: none;
}

#searchform #searchsubmit {
position: absolute;
top: 4px;
right: 0;
background: #ffffff;
outline: none;
box-shadow: none;
border: none;
}

.widget_search {
position: absolute;
top: 66px;
padding: 0;
border: 0;
box-shadow: none;
background: none;
}

Give Comments Area the same look as articles. Otherwise, each comment will be in a separate box:

.commentlist {
background: #ffffff;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
box-shadow: 1px 1px 3px #eeeeee;
}

.commentlist li:last-child {
overflow: hidden;
}

.comments-area article {
margin: 0;
box-shadow: none;
border: none;
}

.comment-author {
margin-bottom: 14px !important;
padding-bottom: 12px;
border-bottom: 1px solid #dddddd;
}

.children .comment-content {
font-style: italic;
}

Few Extra Tweaks to add your own copy rights, to remove borders from blog images, and to move the reply link to the top corner of the article:

.site-info:before {
content: "© MohamadKarbi.com - ";
}

.site img {
border: none;
box-shadow: none;
}

#content .post {
position: relative;
}

#content .comments-link {
position: absolute;
top: 8px;
right: 50px;
}

Don’t forget to adjust CSS for Tablet & Mobile view. For example:

@media screen and (max-width: 600px) {
.widget_search {
position: relative;
padding-bottom: 60px;
margin-top: -66px;
}

#text-30 {
position: relative;
padding: 10px 0 60px 30px;
margin: 0;
}

#content .comments-link {
position: relative;
top: 0;
right: 0;
}

.site-title a {
position: relative;
left: 0;
}

h2.site-description {
position: relative;
left: 0;
top: -20px;
background: #186288;
margin: 0;
}

#masthead:before {
content: none;
border: none;
}

#secondary {
max-width: none;
padding: 14px;
}

#site-navigation {
height: 100%;
}

.nav-menu {
position: relative;
left: 0;
top: 0;
}

.nav-menu li {
float: none;
}

.nav-menu li a {
background: none;
}
}

Do you have other suggestions or tweaks? Let’s know please…