40 CSS Code You Can Use To Customize And Improve An OptimizePress 2.0 Blog

by KM Lee

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.

RELATED POSTS:

» 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

by KM Lee

KM Lee has been a self-employed geek since 2008. Currently he's working full-time from home online. You can also connect with him:

follow me on twitter

Comments on this entry are closed.

Jackie Allum May 22, 2014, 7:19 pm

Thank you so much for these, I can finally get my site looking how I want it to look. Most appreciated. Thanks.
1. KM Lee May 22, 2014, 8:06 pm
  
  Hello Jackie,
  
  You’re most welcome and thanks for your comment.
  
  Glad to know that you have found this post helpful.
kenneth May 24, 2014, 2:36 pm

Cool! info… I have one question, how can I make the Alongside Navigation into a button?
1. KM Lee May 26, 2014, 1:47 pm
  
  Hello Kenneth,
  
  Thanks for your question.
  
  The easiest way I can think of is to use a menu item as a ‘button’ itself. What you can do is change the background color and hover background color for that menu item.
  
  Here’s an example of what I mean → Alongside navigation button screenshot
  
  Here are the steps…
  
  #1 Turn on CSS classes in your WordPress advanced menu properties.
  
  #2 For that menu item, name anything in the CSS classes (Optional) option → CSS classes screenshot (I use ‘orangeback’)
  
  #3 Add this CSS code to Blog Settings → Modules → Other Scripts → Custom CSS:
  
  .orangeback a {
  color: #FFFFFF !important; /* Edit text color */
  background-color: #FEA211; /* Edit background color */
  }
  
  .orangeback a:hover {
  color: #FAFAFA !important; /* Edit hover text color */
  background-color: #FFB94C !important; /*Edit hover background color */
  }
  
  If you want to change the alongside navigation size, please refer to #4 Edit Size Of Alongside Navigation above.
  
  I hope that answers your question.
Jeff May 28, 2014, 2:42 pm

Thank you SO MUCH! I’ve been trying to find css to customize my OP2 site forever. New OP users, bookmark this page.
1. KM Lee May 28, 2014, 4:52 pm
  
  Hey Jeff,
  
  Thanks for stopping by.
  
  I can see you’ve a really great looking OP 2.0 site there.
Eric Moeller May 29, 2014, 4:00 pm

Hi KM,

A HUGE thank you to you! This is really helpful for those of us who are not very comfortable with CSS!

You are very generous with your knowledge, thank you so much.

Cheers,
Eric
1. KM Lee May 29, 2014, 4:25 pm
  
  Hello Eric,
  
  Really appreciate you taking the time to leave a comment here.
  
  You are welcome and all the best in your copywriting business!
Anthony Manganiello May 30, 2014, 3:19 am

KM:

Thank you SO MUCH for this. I’ve been able to use it to make a few changes I really needed to make.

One question regarding the font color in the footer. What is the code to change it. The default is black, but I need to make it white so it will show up against the darker color of the footer background now that I know how to change that. Thanks!
1. KM Lee May 30, 2014, 3:31 am
  
  Hello Anthony,
  
  You’re more than welcome. Glad you find the code here useful.
  
  You can actually change the footer font color directly at:
  
  Blog Settings → Brand → Typography → Footer Text Colour
  
  Refer to #34 and #35 on how to change the footer link and footer link hover color.
Anthony Manganiello May 30, 2014, 3:29 am

One more question KM…

Is there a way to change the color of the “Theme 1” border around the blog content? It’s currently a light grey color and I would like to explore other options.

Thanks KM!
1. KM Lee May 30, 2014, 11:17 am
  
  Hi Anthony,
  
  You can easily do that by applying this CSS code:
  
  .main-content {
  background-color: #FFFFFF;
  border-left: 6px solid #000000; /* Edit color */
  border-right: 6px solid #000000; /* Edit color */
  border-top: 6px solid #000000; /* Edit color */
  }
  
  Just replace the black color #000000 with the hex color you want.
sandy May 30, 2014, 2:19 pm

Thank you KM – This code was very helpful.

I am not a total “newbie” but I was having some minor technical issues that I could not find a solution too …very frustrating since the issues were (I’m sure) not difficult or uncommon, KM helped me solve them.

KM is responsive, helpful, and very knowledgeable.

Take a look around – you might just learn something from him as well!!
1. KM Lee May 30, 2014, 2:39 pm
  
  Hi Sandy,
  
  Thanks for your kind and supportive words.
  
  I can see that you finally managed to change the alongside hover background color.
Darren May 30, 2014, 10:02 pm

Hi KM,
Could you give the code to Edit banner/header image width please? I need to change it from max 960px to fit my 976px banner image if possible. This was the header I had on my previous OP1 site.
1. KM Lee May 30, 2014, 11:21 pm
  
  Hi Darren,
  
  For blog, you can upload a banner/header image up to 975px in width. You also need a repeating header background image (or background color) to match with it.
Trent June 1, 2014, 10:27 pm

KM,
Thank you for sharing these tips. I’m newer to this and your post is very informative and helpful. I’ve attempted to insert the code for centering the main navigation under the header and adjust the padding around the font. Neither of the entries are seeming to show up on my site.

I’m also having trouble figuring out how to fix a couple of issues with my sidebar navigation. I selected a drop down style nav bar and the main link will not redirect to the actual page and I can’t seem to figure out how to change the color of the font in the sub menu.
1. KM Lee June 2, 2014, 2:29 am
  
  Hello Trent,
  
  Thanks for your comment on my post. I can see that you’re using Theme Style 1 for your blog. To center the bottom navigation, please refer to code #8. I’ve personally tested this code on my demo site and it works. (You can also find the code in OP Knowledgebase)
  
  To change the color of the font in the sub menu, you can do it directly at:
  
  Blog Settings → Layout Structure → Header & Navigation Preferences → Blog Primary Navigation → Dropdown Link Text (AND) Dropdown Hover Link Text
  
  Obviously, it’s not practical for me to solve all OP 2.0 related issues. In this case, I think the best way is to contact the support team and have them look at your issues.
Michelle June 4, 2014, 5:21 pm

Hi there,

Is it possible to change the feature area on the homepage to images rather than just picking a color? Thanks :)
1. KM Lee June 4, 2014, 8:53 pm
  
  Hello Michelle,
  
  Thanks for stopping by.
  
  Yes, it’s possible to change the feature area to a background image.
  
  Just throw this code to your blog custom CSS area:
  
  .featured-panel {
  background-image: url(‘IMAGE_URL’); /* Replace your URL */
  padding-bottom: 20px; /* Adjust padding if needed */
  padding-top: 20px;
  }
  
  Hope that helps.
  
  P.S. Nice blog you have there. The color combinations look pleasing :)
Vincent June 5, 2014, 3:47 am

Hello,

I have been struggling with making 2 simple changes to my website and it’s quite frustrating.

I want to be able to make my header and video optin page similar to this website: wealthwithmatthew(dot)com

However, I don’t know how to upload the correct size banner because it doesn’t stretch all the way across properly, and I don’t know how to change the dimensions of anything on the site. Please help and let me know if this makes sense.
1. KM Lee June 5, 2014, 9:24 am
  
  Hello Vincent,
  
  Your blog header size is too big. You can only upload a banner/header image up to 975px in width. You need a repeating background image as well, which will be tiled horizontally on your header.
  
  To upload the blog banner, go to:
  
  Blog Settings → Brand → Setup your blog header → Upload a Banner Image (AND) Upload Repeating Header Background Image
  
  To adjust the height of your banner/header, refer to #6.
  
  Hope that helps.
Romjan Dhayan June 7, 2014, 2:44 am

Hi KM lee

For the first time i visit your blog. This is a very nice post. I hope this will help me in future. Thanks for sharing
1. KM Lee June 7, 2014, 9:27 am
  
  Hello Romjan,
  
  Thanks for stopping by.
  
  You’re welcome and good luck in whatever you do.
Therese June 8, 2014, 3:13 am

Hi KM,

Thank you very much for this very informative and helpful blog post you did.

I would just like to ask, is it also possible to highlight a certain title from the navigation menu if you are on that page? I was able to change the color of the Navigation Hover Link Text color but once I click on that certain menu, it just goes back to the original Navigation Background color. I want the color that I used for the Navigation Hover Link Text to remain highlighted just to indicate that that particular page is open in my browser.

I hope it makes sense. :)

Thank you so much in advance!
1. KM Lee June 8, 2014, 9:43 pm
  
  Hello Therese,
  
  I’ve just published another PDF to show people how to make the current page highlighted in the navigation menus (above, alongside, and below).
  
  You can find the CSS code here (No opt-in required).
  
  Let me know what you think!
  1. Therese June 13, 2014, 12:25 am
    
    Hi KM,
    
    Thank you so much!
    
    Wow! That’s exactly what I was looking for. You’re such an angel. :)
Mark Toughill June 10, 2014, 6:56 pm

Hi KM Lee,

Thanks for your reply in the OP forum as regards changing the sidebar widget link text color. I have looked at the CSS codes you kindly sent me but I do not know where to find the part of the CSS style sheet that I would need to alter and more importantly how I go about the actual editing of the codes.

When I go into the CSS style sheet from the wordpress editor, I don’t see what I am looking for. I fired up Firefox Firebug to see where it would be on the style sheet but I am confused as the style sheet that Firebug shows up is not the same as the CSS style sheet in the editor, so I am totally confused. If it is there, then I must be doing something wrong. I do not have a lot of experience with the style sheet, but have used it on other sites occasionally.

I only really require a little knowledge to change a few small minor things on the style sheet, so any advice would be gratefully appreciated.

Many thanks,
Mark
1. KM Lee June 10, 2014, 8:13 pm
  
  Hello Mark,
  
  Thanks for your comment.
  
  You don’t have to mess with the CSS style sheet. If you read the beginning of my post carefully, all you need is copy and paste the CSS code into:
  
  Blog Settings → Modules → Other Scripts → Custom CSS
  
  I’ve included the PDF document at the end of the post in case you want it.
  
  Hope that helps.
  1. Mark Toughill June 11, 2014, 4:48 am
    
    Thanks KM,
    
    I now see what you mean. I followed your instructions and got to where I need to paste the code in. One thing I am not sure about though. The CSS code No: 17 seems to be the one that I require from your list of 40 codes.
    
    Do I copy and paste all the code in their or just the part that refers to the widget sidebar?. Also for some strange reason, I cannot seem to be able to copy and paste any of the code from your site or anything for that matter, but I am able to do it from any other site. (strange)!, what do you think?
    
    Any suggestions?
    
    Many thanks.
    Mark
    1. KM Lee June 11, 2014, 10:33 am
      
      Hello Mark,
      
      You don’t need to use all the code. I think the 1st and 2nd plus the 5th and 6th code will do the job for you.
      
      I’ve disabled the copy functionality here. You can find the PDF version at the end of the post. Just copy from there.
      1. Mark Toughill June 11, 2014, 7:31 pm
        
        Thanks KM for your help.
        
        I’ve successfully downloaded the pdf and will proceed to add the code as per your instructions. Will let you know how I get on.
        
        Also really looking forward to exploring your blog and learning from you.
        
        Much appreciated,
        Mark
Chel June 13, 2014, 2:03 am

Hi KM,

I hope you can help me with my concern regarding using own image button. I uploaded my own submit button image (circular shape) to the side bar opt in through Blog Settings –> Modules –> Side Bar Optin. First, I’ve uploaded the minimum size which is 150×150 px but the button image is showing up bigger than the actual sidebar optin box. I tried to upload a smaller image size which was 80×80 px but it doesn’t make any difference.

How do I customize the submit button image size?

Thank you and looking forward to your reply.

Chel
1. KM Lee June 13, 2014, 3:07 am
  
  Hello Chel,
  
  EDIT: I skimmed through your question too fast. Thought you just want to insert a button image to the sidebar.
  
  Anyway, it depends on which opt-in style you used on your sidebar. Here’s the CSS code for 150x150px image:
  
  .sidebar-form .op-signup-style-stylexx button {
  height: 150px;
  width: 150px;
  margin-top: 10px;
  margin-left: 33px; /* Adjust the left margin */
  }
  
  *Replace the xx with the opt-in style number you used.
  1. Chel June 14, 2014, 12:08 am
    
    Hi KM,
    
    Thank you for very prompt reply! You are so accommodating and I’m so happy that I’ve found your very helpful blog.
    
    I tried the code you provided but it didn’t work. :( I think I described my issue unclear.
    
    The layout design I chose was style layout #6. I would like to change the submit button of that layout to my own button image but whenever I change it, the size of the image that I’ve uploaded becomes much bigger than the size of the sidebar optin box. So if for example the width of the sidebar optin box is 300px, when I upload my own image button, it’s exceeding to like 400px x 400px even if I already re-sized the image to 150×150 or even down to 80×80.
    
    And also, is it possible to change the font color of the title and form header of that style layout #6 sidebar optin? The default color is blue, I hope to change it to green. :)
    
    Thank you so so much in advance. :)
    
    Chel
    1. KM Lee June 14, 2014, 3:04 am
      
      Hello Chel,
      
      Can you show me your blog URL?
      
      FYI, I’ve tested the code on my demo blog for .sidebar-form .op-signup-style-style15 button (red and blue stripes at the top) and it works. Maybe you want to change to style 15 and see if it works on your end.
      1. Chel June 16, 2014, 10:47 pm
        
        Hi KM,
        
        I tried style 15 and I can see that it has not exceeded to the width of the entire sidebar optin but it’s not showing up correctly. The blog is still not live as I am still working on the backend. Is there any way that I can just show you a screenshot?
        
        Thanks,
        Chel
Mark Toughill June 13, 2014, 7:41 pm

Hi KM,

I tried putting in just one of the codes, number 5 in the section 17 of your list and it didn’t work. Should I have put in all of these codes 1,2,5,6 as you suggested and maybe that’s what is wrong. I think I was correct in thinking that I would have to change the color code, which I did and there was still no change.

My other question is, does this only apply to the live editor pages/posts links on my side bar or will it show up on normal pages/posts links on my side bar. I have installed OptimizePress as a theme and not as a plugin.

Sorry but this is new to me!

Kind regards,
Mark
1. KM Lee June 13, 2014, 8:25 pm
  
  Hi Mark,
  
  Sorry to know that the code doesn’t work on your site.
  
  Can you add code 1 and 2 in #17 as well?
  
  FYI, the code I shared above were tested on my OP 2.0 demo blog before I shared. Although the code worked for most people so far, but there’s no way I can guarantee it will 100% work on every OP 2.0 blog because there are many factors to consider… i.e. theme style you used, the settings you have set, how you add the code, etc.
  
  With that said, I’d recommend you to hire a developer who knows CSS to customize your blog, so that you can focus on publishing content without messing with the code.
  1. Mark Toughill June 14, 2014, 4:35 am
    
    Hi KM,
    
    It worked, only thing it did do was turn my header image into a logo size for some strange reason, but that was easily fixed in the blog header settings. Overall though it worked. Thanks again KM!
    
    Mark
Tim June 15, 2014, 10:34 pm

Thanks for the great codes.

The one for changing the menu container size or color didn’t appear to work.

Also would you know what is needed to add a shadow with rounded bottom edges to the menu containers when white.
1. KM Lee June 15, 2014, 10:41 pm
  
  Hello Tim,
  
  Can you share your blog URL so I can inspect it myself? Also, let me know which code # you were referring to.
  1. Tim June 17, 2014, 8:15 pm
    
    I realise that maybe it is because it is the header/menu in pages I am trying to edit rather than blog.
    
    It was #3 and 4 plus the menu colour for current page in the additional pdf you provided (although that might be due to having drop down menu for the only page in the optimizepress part).
    1. KM Lee June 18, 2014, 12:08 am
      
      The code above is for customizing the OP 2.0 blog. You certainly can customize the pages with CSS, but the code is slightly different (I won’t go into pages here).
      
      For the menu color for current page, it works only for a single menu item.
Valters June 16, 2014, 5:20 pm

Hi KM!

Thanks for great codes!

One question – i need a centered logo on OP blog layout. On default align is – float: left. It will be great, when you share edited css code here.

Thanks.
1. KM Lee June 16, 2014, 8:26 pm
  
  Hello Valters,
  
  I’m not sure whether it’s possible to center the logo for the alongside navigation. What you can do is use a header/banner image with the logo center. You might want to adjust the header/banner height later (Refer to #6).
Bilal June 23, 2014, 8:33 am

Hello KM,

Thanks for all the awesome tips you provide.

I have a question, is there a way that I can add a colored border above the navigation links instead of adding a background color when I hover over my links.
1. KM Lee June 26, 2014, 12:29 am
  
  Hello Bilal,
  
  I’m afraid I don’t know how to do that. Perhaps submit a ticket to OP 2.0 support?
Nicolas June 25, 2014, 10:05 pm

Hello KM,

I’d like to change the background color of all the side-space of my landing page – to contrast the central row / text in white.

Used your suggestions for custom css (1. your #40 (no effect), 2. sidebar background and sidebar section – your #29 (again no effect) – but nothing changed on my site.

Using OP2, Theme 1. Any advice on what I am doing wrong?
1. KM Lee June 26, 2014, 12:25 am
  
  Hello Nicolas,
  
  I’ve double checked the code #29 and #40 on my demo site. It works.
  
  FYI, the code I shared is for customizing OP 2.0 blog, not for the marketing pages you built inside LiveEditor. The CSS customization for pages are different.
  1. Nicolas June 26, 2014, 9:33 pm
    
    thanks KM,
    
    Indeed my landing page is on Live editor. What CSS equivalent to your #29 / #40 can I use there?
    
    Help would be really appreciated!
    1. KM Lee June 27, 2014, 1:07 am
      
      Hello Nicolas,
      
      The CSS code you use depends on the design/layout of your page.
      
      I’d recommend you hire someone that knows CSS to customize your page because each OP 2.0 page out there has its own design/layout.
Katie June 26, 2014, 3:40 am

Thank you so much for these! I’m techy in some ways, not in others, and am SO pleased to have found these and it worked right off the bat, so I’m feeling incredibly proud of myself! And it was really all YOU. So thanks! :)
1. KM Lee June 26, 2014, 10:22 am
  
  Thanks Katie for your kind words and I truly appreciate it.
Dave June 28, 2014, 5:51 pm

Thanks for this awesome!!

You wouldn’t by chance have css to put a margin or padding on the blog Posts. They’re right to the edge of the page. Or did i miss above?
1. KM Lee June 28, 2014, 11:17 pm
  
  Hello Dave,
  
  If you are referring to your Salon blog, then try this CSS code:
  
  .main-content-area {
  padding: 0 30px;
  }
Jessica June 30, 2014, 12:45 am

Hey KM!

Thanks for your post, this has seriously helped me a ton with customizing my clients site according to what he wanted.

I am a bit confused as to my next steps because the site is not mobile friendly as OP2 sites always are (this is probably due to the customizations I have done). Would you know what I can do to adjust this (i.e., code to add, width size of my banners, options to select, or appropriate padding properties?).

I really, really appreciate your help with this!
1. KM Lee June 30, 2014, 9:42 am
  
  Hello Jessica,
  
  The OP 2.0 platform is mobile responsive by default.
  
  I’m afraid I can’t help you on this (without inspecting your site) because it very much depends on the customization you have made.
  1. Jessica July 4, 2014, 2:52 am
    
    Thank you for responding! Would you be able to do a site inspection and if so, what information would you require from me?
    
    Thank you!
    Jessica
    1. KM Lee July 4, 2014, 3:20 am
      
      Just curious, why don’t you use support? You’re entitled for 1-year support when you purchased OP 2.0. Just submit a ticket and let them know the issues you’re facing. You will get better help from there.
      1. Jessica July 4, 2014, 4:24 am
        
        Thank you! I don’t know why I didn’t think to ask them. But I appreciate it :)
Andy July 3, 2014, 3:06 am
Hi,

I use OP 2 theme plus the blog. My blog setting is option 3.

The featured image I use is 670×333. This is how I import to WP. However on the blog excerpt page the thumbnail comes out with less quality. Doesn’t look nice. To see the difference I did ad the original on my last post.

Here are the two links:
- Blog excerpt page: http://www.rueckenfit.at/blog/
- Blog post: http://www.rueckenfit.at/tipp-rueckengymnastik-ueberall-machen/
Do you know a way around this? I also would like to see the pics Retina Ready

Thanks,
ANDY

PS: I did use your tip #19. But didn’t do the job. Thanks.
1. KM Lee July 3, 2014, 10:06 am
  
  I’d recommend you use a featured image that is 630×315. If you upload anything bigger than that, the original image will be re-sized and you get the “less quality” version.
  
  You can modify the height if you want using #19, but not the maximum width.
Shannon July 3, 2014, 5:52 am

Great stuff KM – super useful.

I was wondering if you knew how to make the row background image responsive? I have it set to stretch/cover but it is not responsive unlike the videos and other images.

http://www.muscletestingtraining.com – the main image above the fold. Any help would be greatly appreciated!

Sincerely,
Dr. Weeks
1. KM Lee July 3, 2014, 10:00 am
  
  As far as I know, you can’t make the background image responsive automatically.
Allison July 4, 2014, 12:52 pm

SO happy to have found this post! I will be bookmarking this! I’m wondering, is there code that will allow both an alongside navigation with logo AND a banner (header image) together? Right now I can only use one or the other, but I would really like to use both!
1. KM Lee July 4, 2014, 5:51 pm
  
  I’m afraid you can use either one only because that’s the OP 2.0 blog functionality.
  1. Allison July 4, 2014, 10:54 pm
    
    Thanks for the help! I’m sure I can make it work with one or the other – perhaps is there code to make the top nav transparent instead of a solid color?
    1. KM Lee July 5, 2014, 9:24 pm
      
      It’s certainly doable (have done that before). People usually use a transparent navbar to make it ‘stick’ while scrolling down the page.
      
      However, it’s hard to provide the exact code without actually logging into your site and see how you’ve customized your navbar. I’d recommend you either contact OP support or hire a developer to do that. It should be a quick task.
2. Shirley July 29, 2014, 12:32 am
  
  Hi Allison or KM Lee,
  
  Did you find a solution to this? I am having the same issue- the entire site has navigation with logo AND banner, except the blog. I need it all to match. OP support say they cannot provide CSS code for this, but that it can be done.
  
  Looking forward to your answer!
  1. KM Lee July 29, 2014, 1:08 am
    
    Hello Shirley,
    
    As mentioned, there’s no direct way to customize an OP 2.0 blog. You need to mess with CSS code. If you’re not familiar with CSS, I’d recommend you hire a developer who knows to help you with your blog customization.
Jessica July 5, 2014, 5:41 am

How do I float an alongside navbar to the right and/or move navbar padding to the right?
1. KM Lee July 5, 2014, 9:19 pm
  
  Not sure what you mean. The alongside navbar is on the right by default.
simon July 8, 2014, 9:59 pm

Hi KM, thanks for the page, its a big help!

Can you tell me how to put my social icons in the header area of the blog.

Thanks
Simon
1. KM Lee July 9, 2014, 2:18 am
  
  I’m afraid I don’t know how to add the social icons to the header area. Have you checked with the support team? Let me know if you have the answers.
Peter July 9, 2014, 5:37 am

Thank you for all of those great css hacks. That is so awesome!

However, I didn’t see one here that I wonder if you know how to do.

I have the launch sequence setup using OP and I’m using Facebook comments on each page. Is there a way to remove the facebook comments date? I don’t want visitors to see when the facebook comment was made. Thanks.
1. KM Lee July 9, 2014, 10:44 am
  
  I’ve tried to customize the fb comments before. It doesn’t work for whatever reason.
Ullysee July 10, 2014, 5:39 am

Thanks for providing this excellent resource!

Would you happen to have CSS in mind that would enable ‘Sticky Footers’ using OP 2.0? I’m trying to prevent my current footer(s) from rising up the page whenever minimal text is on screen. Thanks again
1. KM Lee July 10, 2014, 4:41 pm
  
  What you can do is adjust the bottom margin (or bottom padding) for that page.

Next Comments