40 css customization code for optimizepress 2.0 blog

By: KM Lee, KhaiMun.com

1


40 CSS CUSTOMIZATION FOR

AN OPTIMIZEPRESS 2.0 BLOG

http://www.khaimun.com/


2

Where To Add The CSS Code?

Go here: Blog Settings → Modules → Other Scripts → Custom CSS


3

Blog Navigation Customization

#1 Edit Maximum Logo Width

.banner .op-logo img {

max-width: 200px; /* Default 250px */

}

#2 Edit Logo Top And Bottom Padding

.banner .op-logo {

padding: 25px 0; /* Default 40px */

}

#3 Edit Alongside Navigation Top Margin

body #nav-side.navigation #navigation-alongside {

margin-top: 25px; /* Default 40px */

}


4

#4 Edit Size Of Alongside Navigation

/* Main menu */

body .navigation ul li a {

line-height: 1em; /* Default 1.1em */

padding: 0.5em 1.1em; /* Default 1.1em 1.2em */

text-decoration: none;

}

/* Sub-menu */

body .navigation ul ul li a {

height: auto;

min-width: 120px; /* Default 180px */

padding: 0.5em 1.1em; /* Default 1.2em 1.5em */

text-align: left;

}


5

#5 Edit Alongside Navigation Hover Background

body #nav-side.navigation ul#navigation-alongside li:hover a {

background-color: #F5F5F5; /* Edit color */

}

#6 Edit Banner/Header Image Height

.banner .banner-logo {

height:145px; /* Edit px */

}

#7 Edit Size Of Navigation Below Banner/Header

/* Main menu */

body .navigation ul li a {

line-height: 1em; /* Default 1.1em */

padding: 1em 1.2em; /* Default 1.1em 1.2em */


}


6

/* Sub-menu */

body .navigation ul ul li a {

height: auto;

min-width: 120px; /* Default 180px */

padding: 1em 1.2em; /* Default 1.2em 1.5em */

text-align: left;

}

#8 Center Top Navigation Menu Or Bottom Navigation Menu

body .navigation ul {

text-align: center;

}

body .navigation ul li {

float: none;

display: inline-block;

text-align: center;

}


7

body .container .navigation ul {

text-align: center;

}

body .container .navigation ul li {

float: none;


text-align: center;

}

#9 Edit Top Navigation Hover Background

body #nav-top.navigation ul#navigation-above li:hover a {

background-color: #F5F5F5; /* Edit color */

}


8

#10 Edit Size Of Top Navigation

body #nav-top.navigation ul li a, body #nav-top.navigation ul ul li a {

line-height: 1.1em; /* Default 1.1em */

padding: 1.2em 1.2em; /* Default 1em, 1.2em */

}

#11 Shift Top Navigation To The Right

body .navigation ul#navigation-above li {

float: right;

}

#12 Hide Banner/Header Image

.banner {

display: none;

}


9

#13 Hide Navigation Below Banner/Header

#nav-bottom {

display: none;

}

#14 Hide Top Navigation

#nav-top {

display: none;

}


10

Blog Post Customization

#15 Edit Post Title Link Color

.latest-post h2 a, .older-post h4 a {

color: #0000FF; /* Edit color */

}

#16 Edit Post Title Link Hover Color And Remove Post Title Link

Hover Underline

.latest-post h2 a:hover, .older-post h4 a:hover {

color: #FF0000; /* Edit color */

text-decoration: none; /* Default underline */

}


11

#17 Edit Content Link Color And Content Link Hover Color

/* Content link color */

.latest-post p a, .post-content p a, .older-post p a, .latest-post li a,

.post-content li a, .older-post li a, .main-sidebar a {



}

/* Content link hover color */

.latest-post p a:hover, .post-content p a:hover, .older-post p a:hover,

.latest-post li a:hover, .post-content li a:hover, .older-post li a:hover,

.main-sidebar a:hover {


text-decoration: underline;

}


12

/* Comments link color */

a, a:visited {

color: #0000FF; /* Default #2E82BC */

outline: 0 none;


}

/* Comments link hover color */

a:hover, a:focus {

color: #FF0000; /* Default #005800 */

outline: 0 none;

}

/* Sidebar categories, pages widgets link color */

.page-list li a, .widget_nav_menu li a, .widget_meta li a,

.widget_categories li a, .widget_pages li a {

color: #0000FF; /* Default #202020 */

}


13

/* Sidebar categories, pages widgets link hover color */

.page-list li a:hover, .widget_nav_menu li a:hover, .widget_meta li

a:hover, .widget_categories li a:hover, .widget_pages li a:hover {

color: #FF0000; /* Default #202020 */

}

/* Sub footer link color */

.sub-footer .col ul li a {

color: #0000FF; /* Default #404040 */

font-size: 15px; /* Default 13px */

}

/* Sub footer link hover color */

.sub-footer .col ul li a:hover {

color: #FF0000; /* Default #404040 */

}


14

#18 Edit Post Title Letter Spacing

h1, h2, h3, h4, .main-content h4, .latest-post h2 a, .latest-post h1.the-

title {

letter-spacing: 1px; /* Edit px */

}

#19 Edit Featured Image Height And Width

. main-content-area img.wp-post-image {

height: 165px; /* Edit px */

min-width: 100%; /* Edit % */

}

#20 Remove Post Date

.date-extra {

display: none;

}

.post-meta {

border-right: none !important;

}


15

#21 Remove Author Name

.post-meta a {

padding-left: 0; /* Edit px if needed */

border-left: none;

}

.post-meta a:first-child {

display: none;

}

#22 Remove Author Name, Comments, And Post Date

.post-meta {

display: none;

}


16

#23 Edit Continue Reading Link Color

.latest-post .continue-reading a, .post-content .continue-reading a,

.older-post .continue-reading a {


}

#24 Remove Continue Reading Link Hover Underline

.latest-post .continue-reading a:hover, .post-content .continue-

reading a:hover, .older-post .continue-reading a:hover {


}

#25 Edit Latest Post Heading Background At Homepage (Theme style

1 and 2)

.main-content-area .section-header span {

background-color: #F2F2F2; /* Default #FFFFFF */

padding-right: 12px; /* Default 10px */

top: -3px; /* Default -2px */

}


17

#26 Edit Latest Post Font And Grey Bar At Homepage (Theme style 1

and 2)

.main-content-area .section-header {

background-color: #F2F2F2; /* Default #EEEEEE */

color: #FF0000; /* Default #707070 */


font-weight: 700;

height: 12px; /* Default 8px */

line-height: normal;

margin: 30px 0; /* Default 20px */

padding: 3px; /* Default 0 */

}

#27 Remove Featured Image From Each Individual Post

body.single-post .post-image {

display: none;

}


18

#28 Edit WordPress Comment

/* Comment font size */

.comments-container .comments-panel p {

font-size: 16px !important;

line-height: 26px !important;

}

/* Comment author name */

.comments-container .comment-meta a {


}

/* Comment date */

.comments-container .comment-meta span {


}


19

/* Submit button */

.silver-button {

font-size: 14px;

}

/* Comment tabs */

.comments-container .tabs li a {

font-size: 14px;

}

.comments-container .tabs li.selected a {

font-size: 14px;

}

/* Reply link */

.comments-container .comment-meta a.comment-reply-link {

font-size: 13px;

}


20

/* Name, email, website */

#leave-reply label {

font-size: 14px;

}

/* Denotes Required Field */

#leave-reply .form-submit p {

font-size: 13px;

}


21

Blog Sidebar Customization

#29 Edit Sidebar Background Color (Theme style 1, 2, and 3)

/* Sidebar background */

.main-content .sidebar-bg {

background-image: none;

background: #F5F5F5; /* Edit color */

}

/* Sidebar section */

.sidebar-section {

border-bottom: 1px solid #F5F5F5; /* Default #EAEAEA */

box-shadow: 0 2px 0 #F5F5F5; /* Default 0 5px 0 #F7F7F7 */

padding: 20px; /* Default 22px */

}


22

#30 Edit Sidebar Recent Post Tabs Widget

/* Tab */

.minipost-area ul.tabs li a {

color: #0000FF; /* Default #EAEAEA */

background-color: #CCCCCC; /* Edit background tab color */

padding: 4px 8px; /* Default 8px 10px */

font-family: 'Source Sans Pro', sans-serif; /* Edit font */

font-size: 15px;

}

/* Hover tab */

.minipost-area ul.tabs li a:hover {

color: #FF0000; /* Edit hover text color */

background-color: #F5F5F5; /* Edit hover background tab color */


}


23

/* Tab post title link color */

.article-list li h4 a {

color: #0000FF; /* Default #202020 */


font-family: 'Source Sans Pro', sans-serif; /* Edit font family */

font-weight: 400; /* Default 700 */

line-height: 1.4em;

}

/* Tab post title link hover color */

.article-list li h4 a:hover {


}

/* Tab comment link hover color */

.article-list li p a:hover {

color: #FFB573; /* Edit color */

}


24

/* Tab comment link color */

.article-list li p a {

color: #F5F5F5; /* Default 14px */


font-weight: 700;

}

#31 Edit Sidebar Widget Title

.main-sidebar .widget h4 {

color: #000000; /* Edit color */

border-bottom: 2px dotted #999999; /* 1px dotted #DDDDDD */


margin-bottom: 15px; /* Default 10px */

padding-bottom: 15px; /* Default 10px */

padding-top: 0;

}


25

Blog Sub Footer And Footer

Customization

#32 Edit Sub Footer Section Background Color

.sub-footer {

background: #FBFBFB; /* Edit color */


}

#33 Edit Footer Background Color And Padding

.footer {

background: #FBFBFB; /* Edit color */

padding: 5px 20px; /* Default 0 20px */

}


26

#34 Edit Footer Link Color And Font Family

.footer li a {

color: #0000FF; /* Default #000000 */


font-family: 'Source Sans Pro', sans-serif; /* Edit font */

font-style: normal;

font-weight: 400; /* Default 700 */

}

#35 Edit Footer Link Hover Color

.footer li a:hover {


text-decoration: underline; /* Default none */

}


27

#36 Edit Footer Copyright Font Size And Font Family

.footer p {


font-family: 'Source Sans Pro', sans-serif; /* Edit font family */

font-weight: 400; /* Edit if needed */

}

#37 Center Footer Copyright Text And Navigation

.footer .footer-left {

float: none;

text-align: center;

padding-bottom: 10px; /* Edit px */

}

.footer ul {

float: none;

text-align: center;

}


28

.footer ul li {

float: none;


}

#38 Remove Footer Top Horizontal Bar (Theme style 1)

.footer-content {


}


29

Miscellaneous Customization

#39 Edit Blog Navigation, Sub-Footer Title, And Footer Navigation

Letter Spacing

.header-nav li a, .navigation li a, .footer ul li a, .sub-footer h4, .sub-

footer .textwidget {

letter-spacing: 1px; /* Default 0.5px */

}

#40 Edit Blog Background Color

.wrapper {


background: #EEEEEE; /* Edit color */

}

.main-content-area {



}


30

.main-content-area-container {



}

40 css customization code for optimizepress 2.0 blog

Documents

navigation body

navigation ul li

navigation ul ul li

navigation menu body

size of navigation

blog navigation customization

edit content link color

edit post title link