By: KM Lee, KhaiMun.

com

1






















By: KM Lee, KhaiMun.com

40 CSS CUSTOMIZATION FOR
AN OPTIMIZEPRESS 2.0 BLOG
By: KM Lee, KhaiMun.com

2

Where To Add The CSS Code?
Go here: Blog Settings Modules Other Scripts Custom CSS


By: KM Lee, KhaiMun.com

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 */
}


By: KM Lee, KhaiMun.com

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;
}




By: KM Lee, KhaiMun.com

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 */
text-decoration: none;
}


By: KM Lee, KhaiMun.com

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;
}

By: KM Lee, KhaiMun.com

7

body .container .navigation ul {
text-align: center;
}

body .container .navigation ul li {
float: none;
display: inline-block;
text-align: center;
}

#9 Edit Top Navigation Hover Background
body #nav-top.navigation ul#navigation-above li:hover a {
background-color: #F5F5F5; /* Edit color */
}





By: KM Lee, KhaiMun.com

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;
}




By: KM Lee, KhaiMun.com

9

#13 Hide Navigation Below Banner/Header
#nav-bottom {
display: none;
}

#14 Hide Top Navigation
#nav-top {
display: none;
}


By: KM Lee, KhaiMun.com

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 */
}





By: KM Lee, KhaiMun.com

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 {
color: #0000FF; /* Edit color */
text-decoration: none;
}

/* 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 {
color: #FF0000; /* Edit color */
text-decoration: underline;
}




By: KM Lee, KhaiMun.com

12

/* Comments link color */
a, a:visited {
color: #0000FF; /* Default #2E82BC */
outline: 0 none;
text-decoration: 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 */
}

By: KM Lee, KhaiMun.com

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 */
}



By: KM Lee, KhaiMun.com

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;
}
By: KM Lee, KhaiMun.com

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;
}





By: KM Lee, KhaiMun.com

16

#23 Edit Continue Reading Link Color
.latest-post .continue-reading a, .post-content .continue-reading a,
.older-post .continue-reading a {
color: #0000FF; /* Edit color */
}

#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 {
text-decoration: none; /* Default underline */
}

#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 */
}


By: KM Lee, KhaiMun.com

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-size: 14px; /* Default 11px */
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;
}



By: KM Lee, KhaiMun.com

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 {
font-size: 16px !important;
}

/* Comment date */
.comments-container .comment-meta span {
font-size: 13px !important;
}



By: KM Lee, KhaiMun.com

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;
}

By: KM Lee, KhaiMun.com

20

/* Name, email, website */
#leave-reply label {
font-size: 14px;
}

/* Denotes Required Field */
#leave-reply .form-submit p {
font-size: 13px;
}








By: KM Lee, KhaiMun.com

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 */
}



By: KM Lee, KhaiMun.com

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 */
text-decoration: none; /* Default underline */
}



By: KM Lee, KhaiMun.com

23

/* Tab post title link color */
.article-list li h4 a {
color: #0000FF; /* Default #202020 */
font-size: 15px; /* Default 14px */
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 {
color: #FF0000; /* Edit color */
}

/* Tab comment link hover color */
.article-list li p a:hover {
color: #FFB573; /* Edit color */
}

By: KM Lee, KhaiMun.com

24

/* Tab comment link color */
.article-list li p a {
color: #F5F5F5; /* Default 14px */
font-size: 13px; /* Default 11px */
font-weight: 700;
}

#31 Edit Sidebar Widget Title
.main-sidebar .widget h4 {
color: #000000; /* Edit color */
border-bottom: 2px dotted #999999; /* 1px dotted #DDDDDD */
font-size: 20px; /* Default 20px */
margin-bottom: 15px; /* Default 10px */
padding-bottom: 15px; /* Default 10px */
padding-top: 0;
}
By: KM Lee, KhaiMun.com

25

Blog Sub Footer And Footer
Customization

#32 Edit Sub Footer Section Background Color
.sub-footer {
background: #FBFBFB; /* Edit color */
background-image: none;
}

#33 Edit Footer Background Color And Padding
.footer {
background: #FBFBFB; /* Edit color */
padding: 5px 20px; /* Default 0 20px */
}




By: KM Lee, KhaiMun.com

26

#34 Edit Footer Link Color And Font Family
.footer li a {
color: #0000FF; /* Default #000000 */
font-size: 15px; /* Default 13px */
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 {
color: #FF0000; /* Edit color */
text-decoration: underline; /* Default none */
}





By: KM Lee, KhaiMun.com

27

#36 Edit Footer Copyright Font Size And Font Family
.footer p {
font-size: 14px; /* Default 13px */
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;
}

By: KM Lee, KhaiMun.com

28

.footer ul li {
float: none;
display: inline-block;
}

#38 Remove Footer Top Horizontal Bar (Theme style 1)
.footer-content {
background-image: none;
}








By: KM Lee, KhaiMun.com

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-image: none;
background: #EEEEEE; /* Edit color */
}

.main-content-area {
background-image: none;
background: #EEEEEE; /* Edit color */
}

By: KM Lee, KhaiMun.com

30

.main-content-area-container {
background-image: none;
background: #EEEEEE; /* Edit color */
}