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…
Everything is very open with a precise explanation of the issues.
It was truly informative. Your site is very helpful.
Many thanks for sharing!
Very useful. Thank you for sharing.
Thank you for this. Very helpful! ♥️
Nice post sir…🙂🙂🤗