KhaiMun.com header image ≡ Menu
 

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

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.

P.S. I’ve compiled the 40 CSS code into a PDF file. Click here to download if you want it.

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:

Comments on this entry are closed.

  1. You total solved a few tweaks I couldn’t figure out. Thanks! There’s one more thing on my list. It’s a footer change.

    On my other WP site (non-OP2) I asked my web pro to make the footer automatically update the current year so I never have to update it. Reads like this on the footer:
    (c) 2004-2014. My name, etc.

    This is the code she used on my other site:
    © 2004- My name. All rights reserved.

    My OP2 guy says it can’t be done with this template, but you seem to know some ninja tricks. Is it possible and can you tell me how?

    1. The CSS code is applied to change how a website look (i.e. font, color, spacing, etc).

      What you want is modifying the theme PHP functionality. I haven’t done that with OP Theme. The easiest way is still entering the year manually into:

      OptimizePress → Blog Settings → Brand → Copyright Notice

  2. I see. Thanks for getting back so fast! Have a great week.

  3. Hello. I can’t seem to get an answer to this through OP support, so I thought I would ask you since you seem to be the MASTER of OP 2.0 customization.

    I’m trying to use a smaller sized image in a Image with Text Aside element. But no matter what I do in selecting a different sized image, I keep getting the same larger sized image appearing. I’ve tried all different sizes, but I still get the same sized image. Is there some sort of workaround code that will allow me to get the exact image size I want in this element?

    Thanks for your help.

    1. Hi Richard,

      I assumed you mean the Image with Text Aside element for pages you created in LiveEditor rather than blog posts?

      I’ve resized the image before in some of my templates. The reason you kept getting the same sized image is because the default max width is 100%.

      You can change the image width to the size you want by applying the code below. There are 2 styles for you to choose for that element, I’ll give you the code for both.

      .image-text-style-1 img {
      max-width: 100%;
      width: auto;
      }

      .image-text-style-2 img {
      max-width: 100%;
      width: auto;
      }

      You can change the 100% to the exact size you want. E.g. max-width: 300px

      Hope that helps. That’s all from me. If you need further help, I’d recommend you just hire a freelancer who knows OP and CSS to help you with your customization.

  4. Hello, KM!

    Thank you very much for all this information, I have pinned it to my favorites because I don’t want to lose it ever again! :)

    I can’t seem to be able to change the image of the post though… All the other chages I made (four or five) worked perfectly, but I would like to hve the images (both in the homepage and in the post page) in a different ratio… they are now X pixels width by X/2 pixels height. Instead of having a 50% ratio I would love to have them at 75% (4:3).

    Is that possible in any way? Whatever I do to change the picture it just resizes the picture that the theme already cropped. I’ll leave it ugly so you can see what I am saying while I will post the true image I would like to appear inside the post.

    Thanks again, awesome work!

    1. Hello Mirella,

      Thanks for your comment.

      The easiest way I can think of is use code #27 to hide the featured image for each post. The featured image will still appear on your homepage.

      Then you can add the same image (the exact size you want) into the WordPress editor. Keep in mind that the default featured image on your homepage will be 630 x 315.

      1. Ok, Thanks!

        So that size of image (630×315) cannot be changed, did I understand right?

        And one last question: is it possible to change the menu (the one below the header) width? The default size takes the whole browser side to side, while I think it would look better if its size was the same as the width of the blog. The sabe as the width of the banner above it.

        Thank you again for the quick reply and help!

        1. The featured image can be changed to smaller size with some coding. You can edit the height or make the width smaller by 50%. I won’t go into details but you can refer to #19. As for the menu, I haven’t done something like that before.

  5. Hello KM Lee,

    Your tips are amazing and very helpful.

    If possible, can you guide me on how to insert small picture (Avatar) beside the titles of my posts in single posts and in the blog homepage?

    Thanks in advance

    1. Hello Walied,

      I just look at your blog. You’re using Theme Style 3 for it. If you want to display smaller images on your blog homepage, I’d recommend you go for Theme 2.

      As for the blog post, the easiest way I can think of is use code #27 to hide the featured image for each post. Then you can add a smaller image into the WP editor.

      Keep in mind that the FIRST featured image on your homepage will be 630 x 315 because of the Theme style you choose.

      Hope that helps.

      1. Hi KM Lee,

        Thanks for your reply.

        Looks like my question wasn’t clear enough. I actually want to know how to insert small pictures, either avatar or any other thing, in OP 2 using html codes. I need to learn more about the class= , src= , herf=,…..etc. I need to have control over the names given to inserted objects so that i can move them around using CSS.

        Regards,
        Walied

        1. I haven’t tried something like that before. Perhaps you want to hire a freelancer who knows OP 2.0 and CSS to work with you on that.

  6. Hi KM Lee! Great work done!

    I customized everything I wanted with your tips.

    My question is about #30 – I could not find where to edit “permalink to” in recent post widget and how to change widget width (the post title has only 2-3 words and then just…).

    Could you help me to change this?

    Thanks!

    1. Hi Alena,

      I get what you mean. Unfortunately, I haven’t tried something like that before. So far I haven’t seen an OP blog that has the title shown in full (including the OP blog itself).

  7. Hi KM Lee

    First of all, thanks for putting up really nice templates for us less-techie people and at such a reasonable price. I have purchased several of your templates and am very happy with the way my sites look. I have a question and I am willing to pay you to help me out if you think this requires a bit of work.

    I bought your Featured Sales Page from the OP Market Place Hub and when I replaced the header image with another image and edited the headline using my 15″ macbook, it looked fine and everything was in place. But when I look at the same page from my 27″ imac screen, the bottom of the image was cut off.

    Someone mentioned that #19 is the code I should use above to fix this issue. If that’s the case, what do I need to put where you’ve written “edit” to ensure what I see on my laptop is the same that I see on my desktop.

    If this isn’t a 5 minute fix then I am happy to pay you to help me out. But if this is something you could give me a quick few steps to fix, that would be much appreciated. I’m comfortable going into the back end of OP and playing with the code if you tell me what needs fixing.

    Thank you for your help
    Rowan

    1. Hey Rowan,

      Thanks for reaching out. I just look at your site and it looks great on my end.

      I haven’t tested my templates on a 27″ screen before, so I’m not sure how it looks. However, I believe that has to do with your image resolution. The one you used on your site is 1824 x 1216, can you try a higher resolution one?

      Also, the CSS code I shared here is for styling the OP Blog (posts), NOT pages you created in the LiveEditor.

      EDIT: I’ve replied your email with additional information. Please check.

  8. I appreciate you taking the time to provide this list.
    Did I overlook how to change the font size of blog post titles?

    1. Hello Linette,

      You can change the font size of the blog titles in the blog settings.

      Go to: OptimizePress → Blog Settings → Brand → Typography

      Change the H1 Heading Styles (and) H4 Heading Styles

      To change the font size of your latest post title (on the blog homepage), use this CSS:

      .latest-post h2 a {
      font-size: 46px !important;
      }

  9. Do you know of any way to make an image fade when hovered over with the mouse?

    Also…is there any way to add social media icons (which link to the pages) into the navigation (alongside)?

    1. Hi Joe, I’m afraid I don’t know how to do that with OP 2.0.

  10. KM I am so glad I found your post. I have made all the changes I needed with your code except for one.

    I want my logo to be on the top left of the navigation bar just like the rest of my website. But I also want to have my banner image. OP2 is only allowing me to have one of the other and even when I put the logo it is not on the same line as the navigation.

    May you please offer any insight?
    Thank you

    1. Hi Kimika,

      If you’re referring to OP2 blog, you can just use code #2, #3, (and/or #4) to adjust it.

      For pages you created with the LiveEditor, I’d recommend you hire someone who knows OP2 to work with you. It’s not difficult to put the logo on the same line as your navigation.

      1. Wow that was a crazy fast response! Thank you. I am referring to OP2 blog and I’m very familiar with the platform. However for some reason my logo wont go on the same line as the logo. I think it is probably some other issue that is causing this.

        Thanks a ton for your help

  11. Just installed OP 2.0 and bookmarked your 40 CSS customizations.

  12. Hi,

    I found you site by pure luck trying to come up with a solution for a minor problem I have. I recently purchased the Sensei membership bundle through the Optimizepress marketplace but I have a design issue with the login page template which I was wondering if I could get some assistance with to get it rectified.

    The problem I have is the ‘Username’ & ‘Password’ text don’t line up with the area where the values would be entered. Despite using firebug I’ve not been able to workout what to modify to get the field text areas and their corresponding text to line up.

    Any suggestions?

    1. Hello Byron,

      First of all, thanks for purchasing my membership bundle from the marketplace.

      I noticed you’re using WishList Member for your site. You’re right, for some reason, the ‘Username’ & ‘Password’ text don’t line up with both fields. I’ve shared the solution at the OptimizePress Support Knowledgebase, you can find it here. Hope that helps.

      P.S. I’d appreciate if you can spare some time to leave me a review at the marketplace.

  13. Hi KM,

    I’ve just started using your 40 ccs hack guide to do change footer stuff on my OP 2.0 blog.

    Thank you very much for these tips, they are great!

    I really like how the blog looks like now but there is just one thing I can’t stand. It’s the archive/page title that I find looks really bad. Is there any custom css code I could insert to customize both, page and archive title (size, font, font-style, font-family, weight & color).

    Thanks in advance,
    Matthias

    1. Hello Matthias,

      Thanks for your comment.

      Unfortunately I don’t use the OP Blog functionality on any live sites now, therefore I’ve no idea how the archive/page looks like or give you the exact code. But I’m sure it can be styled nicely if you were to hire a freelancer who knows CSS to work with you.

  14. Hi KM,

    I know very little about coding. Therefore I purchased your template “Vision-Landing Page” in hopes that i could do very little code.

    The only change i really needed was to simply change out the background image. . What i didn’t realize is that the image that you used was not placed into a “row section” but that the image was coded into the template.

    I’ve looked everywhere in your css coding inside the template. I can not find any clue on where i can find the image coding. Could you tell me where this code is located?

    How would i taking out your image code and replacing it with me own image? Do you have an example of what the coding might look like?

    Any direction would be highly, highly appreciated!

    Best Regards!
    Jared

    1. Hello Jared,

      Thanks for letting me know that you’ve purchased my landing page.

      To change the background image, inside the LiveEditor, simply go to Colour Scheme Settings → Page Colour Settings → Overall Page Colour Options.

      Hope that helps. Let me know how it goes.

  15. Hi KM,

    Very good work here, thank you. One question is do you have anything that can help to display the menu description on a blog home page, for I’ve tried and it seems even though I’ve the description text in the menu, OptimizePress perhaps wont support this or display it.

    Many thanks

    1. Hello Trevor,

      I haven’t tried this before, but you can do a quick google search about this. I believe this involves adding some php code into the OptimizePress theme files.

  16. Hi again KM!

    You’ve helped me out with a couple of questions in the past and I’ve found this blog post really useful for editing OP, so thanks again for creating and posting it for us all!!

    I was wondering if you’ve ever tried adding any of the OP LiveEditor elements to the header section of any of your sites such as the social sharing elements? And if you have how did you do it? I’m specifically talking about the Page Builder pages not the blog side of OP.

    Sorry if this question has been asked before, I did try going back through all of your comments here but as you know there’s quite a few :)

    Cheers
    Si

    1. As far as I know, you can add a new row (probably 1/4 1/4 2/4 column layout) and then insert the social sharing icons to the 2/4 column via the Text Block element.

      However, I’ve come across sites that used AddThis plugin to accomplish this. There’s an option to add floating social icons on the top right corner.

      Hope that helps.

      1. Cheers for that KM! I’ve had a play with the plugin and it works better for me than sticking a new row in at the top of my page thanks!

        Really wish OP would introduce the same features to the header section of the Page Builder as they have for the footer section, would allow everyone to utilise valuable page space much better!!

        Thanks again for the advice!!

        Cheers
        Si

        1. Glad to know it worked out for you. I’ll take note of that as well :)

  17. Hello, I just got your Upscale landing page template. I was wondering how to change the default photos as opposed to just covering them up.

    I assume it would have to do with the css? Thanks

    1. Hello Steve,

      Thanks for letting me know that you’ve purchased my landing page.

      If you meant how to change the background image, inside the LiveEditor, simply go to Colour Scheme Settings → Page Colour Settings → Overall Page Colour Options. You can change the background image there.

      Hope that helps. Let me know how it goes.

      1. Perfect! Thank you.

  18. Hi KM Lee, I was wondering if you are taking on web design and development projects. We would like to hire you.

    1. Hi Steve,

      No, I don’t take on freelance projects anymore as I’ve my own things to work on now. Hope you’re able to find the right person to work with you asap.

  19. Hi KM…

    Can you tell me how to edit the width of header. I expect you have to use custom CSS but I don’t see that in any of your 40 codes above. Can you help please?

    Thanks.

    1. EDIT: Please refer to my reply below to Peter.

  20. Hi KM,

    Is there any way to increase the width of the blog and make the width size of the sidebar smaller? Can you please help?

    Thank you
    Peter

    1. Hello Peter,

      I’ve tried to customize the width of the blog today. Apparently, it’s possible to increase the width with a few lines of CSS code (only if view in Desktop mode).

      However, the problem comes when view in mobile devices. The layout won’t automatically adapt to different mobile devices like tablet and smartphone. You still need to further customize your layout and this involves quite a bit of coding. Furthermore, it also depends on the theme style plus what elements you have used on your blog.

      I’m sorry I can’t help you on this one. Would recommend you just hire a developer (who knows OP 2.0 and CSS) to work with you.

  21. Hey Man. Thanks for the great resource. It’s awesome! I can’t seem to get the comments to show up after author for each blog post. Do you have a code that will do that? Thanks again.

    1. Hello Jeremy,

      You don’t need any code for that. Just make sure you have the WordPress Comments turn on for each blog post. In your WP Editor, click on OptimizePress Settings (right below the Permalink), then make sure the WordPress Comments is ON.

      1. Awesome. Thank you!

  22. Great job KM Lee!

    Thanks so much for the codes.

    I’m wondering if you know how to put the comment box before the comments on OP2. Thanks

    1. hi Saad, I haven’t tried that before. Let me know if it’s possible.

  23. How can i use margin-top code for a specific button to put it on header?

    1. hey Jason, sorry I don’t get what you mean without looking at an actual site.

  24. Hi Lee,

    I’ve one query about op templates, can we create own custom template like wordpress template in optimize press? Any idea about this please help me out ASAP

    Thanks & waiting for your kind reply.

    1. Hi David,

      Not really understand what you meant by “WordPress Template”. But you certainly can create your own custom OP Template and use it on any site that is powered by OptimizePress 2.0. Please search the OP knowledgebase for more info.

  25. Hey KM,

    These are so helpful!!! I was hoping to customize the size of the featured image when in summary view – do you know if that is possible? (Want to use a thumbnail image that would wrap with summary text.)

    Thanks!

    1. Hello Susan,

      Thanks for your comment. I see that you’re using Theme 3 for your blog. OP 2.0 comes with 3 blog layouts. Can you try either Theme 1 or Theme 2? In your WP, go here:

      OptimizePress → Blog Settings → Theme → Theme Style

  26. #8 didn’t work for me on my clients site. I’m not sure if it’s because I couldn’t copy and paste the code so I typed it in wrong or what. All it did was open all of the pulldowns permanently.

    Any suggestions? Site is MyDaughterFragrance.com. Thanks!

    1. Hello Sheila,

      The reason #8 didn’t work is because all the code here is for OP 2.0 Blog posts not for pages you created in the LiveEditor. With that said, you need to use the code below:

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

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

      .page-header .navigation ul li {
      display: inline-block;
      }

      NOTE: You can find the code if you were to search in the OP Knowledgebase.

  27. Hi KM Lee, I am trying to set up a website using OP 2.0 and I have tried entering in your CSS code above (#1) (I have never used CSS code before so am new to this). Must I simply copy what you have put at #1 and replace 200px for eg 1000px? That’s what I have tried, but it has made no difference so I must have done it wrong.

    So I put in the CSS box:

    .banner .op-logo img { max width:1003px; }

    But this didn’t make any difference – have I made a mistake? Thanks KM Lee!

    1. Hi Brona,

      Code #1 is for changing the logo width (using Logo With Alongside Navigation).

      I think you’re talking about a banner here (using Banner/Header with navigation below). Unfortunately, you can have a banner image up to 975px in width only. You need to use a repeating header background image to tile horizontally on your banner.

  28. Hi KM,

    I was wondering what the css would be to make my nav bar on a page I created with the LiveEditor transparent so you can see the background image like you see on a lot of sites these days. Any help would be greatly appreciated. Thanks.

    1. Hi Scott,

      It depends on which navigation you’re using, i.e. alongside navigation or navigation below. To make the navigation transparent, it needs to be ‘sticky’. If you’re using the navigation below (based on your hockey website), you need to remove your banner.

      But if you want your banner there, you need to use a non-transparent navigation.

  29. Is there a way to change the body width in OP2?

    Seems to be easy to change the width of the sidebar, but on a 24 inch screen, I would really like to make my readers read more words before they need to move their eyes down to the next line. Great blog by the way. :)

    1. I’m afraid there’s no easy way to change the body width for OP 2.0 blog.

      It’s possible by adding a few lines of CSS code though, but when it comes to viewing in mobile/tablet devices, you still need to mess with code a lot (depends on your blog settings) just to make sure your blog is responsive as well.

  30. My logo looks fine in Internet Explorer and Firefox, but it looks way to small in Google Chrome. Is there a way for me to correct this so that it looks normal in Chrome?

    1. Hello Renee,

      What’s your URL? If it’s the SuccessMastery site, I see your logo looks fine on my end.

      1. Yes, it’s SuccessMastery. Did you view it in the Chrome browser? Whenever I try to view it in Chrome it looks like the logo is really small. Could it possibly just be my chrome settings? If it looks fine on your end in Chrome then I guess I just need to check out my chrome settings to find out if there is a way to adjust the way it appears on my end.

        1. Yep, it looks good on my end.

          At your Chrome browser, click on the “Customize and Control Google Chrome” (top right), under “Zoom” can you check whether yours is 100%?

          1. Thank you so much for checking that out for me, love your blog.