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 {



}

Documents

40 CSS Customization Code For OptimizePress 2.0 Blog