Note: The OptimizePress 2.0 Theme has been replaced by the new SmartTheme.
If you are using OptimizePress 2.0 and want to customize the styling of your blog, you probably know there is no easy way to do it, particularly if you are a non-techie. In this post, I will share the 40 most requested CSS code you can use to customize your blog.
Add the code you want to Blog Settings → Modules → Other Scripts → Custom CSS
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 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 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;
}/* 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;
}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 */
}
#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;
}
#13 Hide Navigation Below Banner/Header
#nav-bottom {
display: none;
}
#14 Hide Top Navigation
#nav-top {
display: none;
}
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 */
}
#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;
}/* 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 */
}/* 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; /* Edit color */
}/* 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 */
}
#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: 50%; /* Edit % */
}
#20 Remove Post Date
.date-extra {
display: none;
}.post-meta {
border-right: none !important;
}
#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;
}
#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 */
}
#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;
}
#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;
}/* 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;
}/* Name, email, website */
#leave-reply label {
font-size: 14px;
}/* Denotes Required Field */
#leave-reply .form-submit p {
font-size: 13px;
}
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 */
}
#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 */
}/* 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 color */
.article-list li p a {
color: #F5F5F5; /* Default 14px */
font-size: 13px; /* Default 11px */
font-weight: 700;
}/* Tab comment link hover color */
.article-list li p a:hover {
color: #FFB573; /* Edit color */
}
#31 Edit Sidebar Widget Title
.main-sidebar .widget h4 {
color: #000000; /* Edit color */
border-bottom: 2px dotted #999999; /* Default 1px dotted #DDDDDD */
font-size: 20px; /* Default 20px */
margin-bottom: 15px; /* Default 10px */
padding-bottom: 15px; /* Default 10px */
padding-top: 0;
}
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 */
}
#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 */
}
#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;
}.footer ul li {
float: none;
display: inline-block;
}
#38 Remove Footer Top Horizontal Bar (Theme style 1)
.footer-content {
background-image: none;
}
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 */
}.main-content-area-container {
background-image: none;
background: #EEEEEE; /* Edit color */
}
There you have it! I believe I’ve covered most of the important customization that people want to make. I’ve personally tested the CSS code on a demo site. I really hope some of you will find the code here helpful when setting up your blog with OptimizePress 2.0.
I’ve compiled the 40 CSS code into a PDF format. Click here to download if you want it.
» List Of All OptimizePress 2.0 Elements You Can Add In LiveEditor
» How To Create An Ultra Clean OP 2.0 Landing Page Template
» Watch Me Design An Elegant Squeeze (Opt-In) Page Template
» How To Create An OP 2.0 Membership Site In 5 Simple Steps
» How To Set Up An OP 2.0 Membership Site With OptimizeMember
» Design A Kajabi Style Membership Using Pre-Made Templates
» How To Add Smooth Scrolling Effect To An OptimizePress Page
» How To Design A Beautifully Looking OptimizePress Navigation
» How To Build A Hamburger Style Mobile Menu In OptimizePress
» Visit OptimizeTemplates.com For More OP Pre-Made Templates
Comments on this entry are closed.
Thanks for the helpful article!
I’m setting up OptimizeMember to run 2 different levels of membership. I’m also using BuddyPress. Here’s the issue – I’ve created custom pages to go to unique sections of the website. Level 0 (free), Level 1 (pro), Level 2 (master). Each level has duplicate pages but each one allows more content and access.
I’ve also created custom menus for each membership. However, BuddyPress uses the blog pages not custom pages. Since I can’t seem to find a way to a CSS Code or redirect code from the Blog Menu that will direct Member Level back to their current level.
How do I customize the Blog Menu (both paid membership levels have access to BuddyPress) so members can go back to their current state of membership?
Thanks for your help!
I’m afraid I can’t help you on this because I don’t use OM and BuddyPress.
Hello KM,
Thanks for sharing with us your knowledge. I’ve a question – I used OP 2.0 for all my pages. I upload a Row Background Image (using LiveEditor), you can see here.
The problem is that all this images are not responsive. If you see my website with smartphones or tablets you can realize that the images are cut.
That is strange because OP 2.0 is responsive, in fact, the other part of my site is responsive. Can you help me. Is there a CSS code to fix this issue?
Thanks man for all your support.
Fabio
There’s no ‘standard’ CSS to do this. You’ll need to write some CSS manually to scale your background image on different screen sizes. Maybe you can refer here.
They are not really responsive but it was a good solution. Thanks KM!
Thank you so much for all of these great CSS tips. Question: Is it possible (If so, how?) to have top navigation right justified and bottom navigation (below header) center) Seems I can only make them both the same justification. I am using a banner image not a logo.
Quick question… I can’t find any information on how to make the Stripe form look more attractive and function more intuitively with optimize press / optimize member. Do you have any CSS tips for Stripe?
Hi brother,
How come you’re not allowing us to actually select the code? Takes ages to copy it out from your page. Thanks :o)
Hi, it would be really useful if we could copy and paste code from this page ?
thanks
I’ve shared all the CSS code (in PDF format) at the end of the post.
Ok, I’ve got this useful document and tried the code you suggest to change my copyright message but it remains the same?
Not really get what you mean. You can change the copyright text directly from the settings in OptimizePress without code.
Thank you. Is there some CSS that I can add to the Login Page to change the size and wording of the Log Me In button for the membership login element?
Great post! Any idea how to really make the page full width.. The rows are full width but the elements always seem to have margins on both sides, I’d like to have text and images showing without margins so completely fill the rows. Thanks in advance
hey, thanks for all this!
Any chance you can help get my nav and site full width? I realized it’s “easy” to do in all the settings, but for some reason it just isn’t working despite doing everything correctly. even got a web design friend on it and he couldn’t figure it out!
I’d really appreciate a fix. Thank you!
It’s definitely “not easy” to do because you’ll need to modify the column width via custom code. You also need to make sure your site looks good in all devices.
The OP platform comes with a few content templates with a wider layout. E.g. Book Launch, Long Form. If you’re a clubhouse member, there are some templates with a wider layout too. Maybe you can start with one of them.
That’s all I can suggest for now.
You have custom CSS code with your copy disabled on your blog?
I’ve shared all the CSS code (in PDF format) at the end of the post.
How can I add Images on the sidebar of a blog and posts on OptimizePress?
Did you know how to adjust the width of blog post when we choose page template with only one column when edit the OptimizePress settings in create new Post?
Hi KM Lee,
Great post, I’ve been struggling to get the blog text to shift to uppercase. I’ve been able to do it for all the live editor pages but not the blog. I also tried pasting the same code into the other scripts in the blog settings but no luck.
Any advice here?
Thanks
Jay
Got it, just needed to change the page names to uppercase in this example.
Hey KM, awesome post.
How would you change the background color of the blog navigation drop down menu?
In your WP Dashboard, go to OptimizePress → Blog Settings → Layout Structure → Header & Navigation Preferences → Blog Primary/Top Navigation → Dropdown Background/Dropdown Background Hover.
GREAT HELP! But can’t find the one thing I need. I need to change the padding around the ‘page/category’ you are presently on the ‘where you are’ heading which sits below the navigation. It’s about twice the height of my banner or navigation.
Try this code…
Hi,
It would be nice if we could select and copy these codes. Thank you!