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.

I’ve compiled the 40 CSS code into a PDF format. 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. KM, you are awesome, way to give value bud, thanks a ton. One question. I resized my logo and found your article looking for a way to customize the boundaries of my navigation menu bar. When I add a sixth menu item, rather than wrapping down below, the menu kicks over and covers part of my logo (because I made the logo bigger). Do you know how to go about reframing the borders of the nav menu for the site and the blog so that it stays to the right of the new resized logo AND wraps to a second row (which I think it already does by default). Thanks!

    1. Sorry, not really get what you mean without looking at the actual site. What I can think of is resize your logo (default is 250px by 50px) or reduce the navigation font size.

  2. Great post, thank you! I’m a complete nubie to OP2 and am trying to display an ad for a friend in the sidebar of my site. For some reason, it just doesn’t show up. I’m using a jpg and the advertising feature is turned on. How do you get those nice graphic links in the sidebar like on your site (the ones under your Popular Posts)? Thank you so much!

    UPDATE: Nevermind, KM, I found it in the Widgets section. You have to add it there too.

    1. You’re most welcome Chris. All the best to your BizTutor site!

  3. Truly impressed with your graciousness in sharing your knowledge!

    You give lots of css code above for changing menus but I do not see anything in there to change the font attribute etc for the font size of the menu alongside the logo at Weddingvideosleeds(dot)co(dot)uk.

    I see the mention regarding ‘typography’ in the blog settings but nothing that I do there seems to change the font of size of the menu alongside the logo.

    It is easy to change the font attributes in page builder but not on the blog setup page. So, it must come down to custom css code.

    I have a set menu font and size of Source Sans Pro Style 13px Shadow and that seems to have applied well and consistently throughout the site apart from on the blog page.

    I am looking to find a way to make the blog typography the same as on the rest of the site with the attributes above.

    Can you kindly help me please?

    Regards
    Terry Bradley

    1. Hi Terry,

      You can easily change the font for the blog alongside navigation by going to:

      Blog Settings → Layout Structure → Header & Navigation Preferences → Blog Primary Navigation → Select Navigation Bar Font (optional)

      Hope that helps.

  4. Hello, I’m making new website, in czech language, please do you know any short code for change language in comments (Reply, Submit button etc) ?

    Thank you

    1. Sorry I don’t know because I haven’t built a site that’s non-English so far. Since this is related to WordPress, perhaps you can try ask in the WordPress forum.

  5. Thank you! Thank you! Thank you!

    Making my banner full width was exactly what I was looking for! Thank you!!!

    1. You are most welcome Adam. Glad you find the CSS code here useful.

  6. Hi KM,

    Thank you for this GREAT information. It’s awesome.

    I wonder, have you figured out a good way to display posts by category with thumbnails?

    The only option to list posts is the “Recent Posts” feature. I found a WP plugin “List Category Posts” and it works ok using short codes, but doesn’t seem to work with thumbnails on OP2.

    Do you have any thoughts on how I can get posts listed by category with thumbnails in OP2?

    Thanks,
    Nile

    1. You can use the OptimizePress: Page Links & Categories Tabs widget on your sidebar, but I don’t think you can have the thumbnails next to it.

    2. Hi KM,

      Thanks for the response and for the great information you generously provide here.
      I thought I would just mention that I did find a solution to adding a thumb nail to the list, using the plugin “List Category Posts” with OP 2.0.

      By the way, on the plugin “other notes” page on WordPress.com, the developer offers a suggestion that doesn’t work with OP 2.0.

      That’s why I’m sharing this one with you. It’s really easy to implement and would go well on your existing list of CSS tips.

      Thanks again for your great help!
      -Nile

      (See code below for using List Category Posts WP Plugin with OP 2.0)

      How do I display the Thumbnail next to the title?

      To see the thumbnail next to the title, you can add a class to it like this:
      [catlist id=1 thumbnail=yes thumbnail_class=lcp_thumbnail]

      Then in your theme’s stylesheet add this code:
      `.lcp_thumbnail{ float: left; }
      .lcp_catlist li{ clear: both; }`

      If you want the thumbnail to the right, just change the float: left attribute to float: right.

      1. Hi Nile,

        Thanks for sharing this great information with me. Will definitely take note of this.

  7. Hi KM,

    I have the recent posts on my home page which has the featured image. Is there any way I can increase the size of the image that is coming through the recent posts.

    I would be so so grateful if you could help.

    1. I’d recommend you just crop your featured image to the standard size (630 x 315).

  8. How about making your custom header stretch so it actually fits the width of the header area. I uploaded the recommend sizes but it still doesn’t cover the full width of the header.

    1. You need to actually upload a repeating (sliced) background image or apply a background color in order to “cover” the full width of your header banner.

  9. I see that you’ve provided code to shift the top navigation menu to the right, which is great. How would I go about changing the background color and text color? I really dislike the black background with white text and would love to invert that. Thanks!

    1. You can change the background color and text color of the top navigation by going to:

      Blog Settings → Layout Structure → Header & Navigation Preferences → Blog Top Navigation → Top Navigation Background Color, Top Navigation Link Color, Navigation Hover Link Text. (You may also want to refer to code #9)

  10. Hi, is there any what to change the link color for latest post (theme 3) on the hompage besides the blue color?

    1. You meant the link color of the post title? Refer to code #15 and #16.

  11. Greetings Sir

    I’ve a members log in box on this page: china.nzcbd.co.nz/privileged-buyer/ and it needs some custom css to put a background and boarder around the box.

    The header also needs a color defined and the text inside the form such as username, password, sign up / forgot password and remember me needs to be larger.

    Are you able to assist me here please.

    1. To add a background and border around the log in box, you can simply insert a “Feature Box” first, then add the login box within the feature box.

      That’s the simplest way to do it.

      If you need further help, just email me and I can do the css customization for a small fee.

      1. Greetings Sir

        I didn’t know you could do that so I have learnt something. You are most kind, now to get the membership site working correctly like them seeing the correct register form.

        Many blessings
        Ian

  12. Would be of great help to be able to copy the code ;) Thanks anyway!

    1. I’ve actually compiled the CSS code into a PDF file. You can find it at the end of the post.

  13. Hello KM,

    Thanks for sharing the CSS to customise an OP2 blog. It’s a useful resource that I’ve bookmarked.

    I want to slightly increase the width of the dropdown background of a below-header sub-menu because one of the menu items flows over to a second line. Using the code in #7 as a guide, I tried to do that with the code below, however, I did not notice any change in the sub-menu width. What could I be doing wrong?

    /* Change width of below-header sub-menu */
    body . navigation ul ul li a {
    min-width: 200px; /* Default 180px */
    }

    Thanks.

    1. Hello Vince,

      I’ve just tested the CSS code and #7 is working fine. I’ll just paste the code below again. Please change 180px to the px you want (Note that there’s no space for .navigation)…

      body .navigation ul ul li a {
      height: auto;
      min-width: 180px;
      padding: 1em 1.2em;
      text-align: left;
      }

      1. You’re absolutely right, KM. #7 works fine. The problem was the space in .navigation, which I hadn’t detected. Thank you for bringing it to my attention.

  14. Hey KM,

    Thanks for the great info.

    I was wondering you know of a way to make an actual blog post full width, with no sidebar? Can’t find any code/info on this.

    Thanks.

    1. Hello Sarah,

      Not sure whether you can do that because all the OP 2.0 blog theme styles come with a sidebar. The minimum sidebar width you need to set is 230px.

  15. Incredibily useful stuff here, KM. Thank you so much for posting this. I’ve bookmarked it for future reference.

    One small point – would it be possible to enable people to copy the elements of this post. I seemed unable to copy and had to resort to typing this out by hand with the obvious risk of error as a newbie. Thanks again.

    Best wishes,
    Julian

    1. Hello Julian,

      I’ve actually compiled the CSS code into a PDF file. You can find it at the end of the post.

      Btw, I like the overall look and feel of your blog. Well done! :)

  16. Thank you for this work!

    I do not understand that OptimizePress 2.0 does not provide some fields in addition to set all these colors!

    Patrick from Belgium

  17. Cracking bit of information here, highly useful to us OP2/WordPress newbies so thanks a lot for compiling this!

    I do have one question and I think it’s probably quite straightforward to do I just can’t get my head around it for some reason. Is it possible to set a background image to the blog sidebar at all, if so could you post the code please?

    Cheers in advance!
    Si

    1. Hello Si,

      Thanks for your comment. Glad you find the information here highly useful.

      Yes, it’s very possible to set a background image to the blog sidebar. All you need is do a slight modification on code #29 like below:

      .main-content .sidebar-bg {
      background: none;
      background-image: url(“ImageURL”);
      background-repeat: repeat;
      }

      I’m not sure what your background image size is, whether you need to repeat it or not; you might want to do a quick search regarding CSS background-image property.

      1. Hi KM,

        Cheers for getting back to me so promptly I really appreciate it!

        Thanks for giving me the code I shall give it a whirl now and see what happens. One question about the code though, do I put in a full URL (www.etc etc) for the image or can I link to it just using (“wp-content/uploads/file-name.jpg”)?

        I have noticed that a couple of images that I’m displaying seem to contain sub folders relating to the date they were uploaded for example:
        wp-content/uploads/2014/08/breathing-300×174.jpg

        Sorry for the ‘newbie’ question I’ve not got any experience using WP before.

        Also with regards to the size of my background image it is a fairly large file so I’ll just play around with the repeat options for now until I find the best fit :)

        Cheers
        Si

        1. You should put in the full URL. For example:
          “http://www.yourdomain.com/wp-content/uploads/2014/08/image.jpg”

          The reason you’re seeing the date ‘/2014/08‘ is because it’s the default settings. You can change that in your WordPress Dashboard.

          Go to: Settings → Media → Organize my uploads into month- and year-based folders (Untick this option) → Save Changes

          Note: This will apply to new images you upload.

          1. Hey KM,

            Thanks a lot for clearing that up for me!

            I’ve tried the code you provided and it works like a charm, thanks a lot and also thanks for the info on default settings as well!

            Cheers
            Si

  18. Hi very useful info, thanks.

    Just wondering how to get rid of the category title i.e “Category Archives: XX” and change the span color?

    Thanks

    1. The “Category Archives” only appears when people click on a certain category. I haven’t explored the category section yet. Can you show your blog so that I can take a look?

      1. I figured it out.

        .op-page-header h2 {
        visibility: hidden;
        }

        .op-page-header h2 span {
        color: #3c3c3c;
        text-shadow: none;
        visibility: visible;
        }

        1. Thanks for sharing the code here jonny. Will take note on this.

  19. Hey KM,

    Do you know how to add a caption to a featured image?

    Thanks.

    1. I believe there’s some kind of “Featured Image Caption” plugin, but I’m not sure whether it works or not. Just do a quick search online and see what turns up.

  20. Hey KM,

    Do you know how I can add a phone number and social media icons above the main navigation and floated to the right? I can’t believe this isn’t a feature of OP.

    1. Yep, this isn’t a standard feature of OP 2.0. But I’ve seen some OP 2.0 sites able to do that with custom coding. You might want to hire a developer to do that for you.

      1. I think I could do it myself if I knew which file to add the code to. Any idea what that would be?

        1. Nope, because I haven’t spent time working this out yet. Have you checked with OP Support? Perhaps they could help you out.

  21. Hi KM Lee,

    Thank you for all your help with this custom CSS. I have a tile that I want to repeat horizontally and vertically in the background of my blog. How would I do that? I want to look like the rest of my site: TheBeachAcademy(dot)com

    Thank you,
    Benny Hammond

    1. Hi Benny,

      Nice looking site you have there. I usually charge a small fee for any additional customization. However, I will just provide the CSS code to you this time:

      .wrapper {
      background: none;
      background-image: url(“TileURL”);
      background-repeat: repeat;
      }

      .main-content-area {
      background: none;
      background-image: url(“TileURL”);
      background-repeat: repeat;
      }

      .main-content .sidebar-bg {
      background: none;
      background-image: url(“TileURL”);
      background-repeat: repeat;
      }

      .main-content-area-container {
      background: none;
      background-image: url(“TileURL”);
      background-repeat: repeat;
      }

      To change your footer background, refer to code #33.

      Hopefully you find the information useful. Leave me a short review if can.

      1. Thanks a lot! I can’t copy and paste your text, is that on purpose? I can just retype it no problem. I’ll let you know how it works, thanks again!

        Benny

        1. Yep, I disabled the right click and text copy for this site. For the 40 CSS code above, you can find the PDF file mentioned at the end of the post.

  22. hi KM Lee,

    thanks for the great info. But i still have on big problem with my blog.

    How to change the URL in the title bar to tab? I try to turned on SEO OPTION. Not working. Change the SETTING GENERAL in WP…still not working.

    1. Have you checked with Support regarding this issue?

      1. Yes, already checked. But no solution and I try to search online, still no solution.

        1. I didn’t encounter this issue on my sites as well as my clients sites. Probably because you are using the Blog as your homepage. All the OP sites that I’ve worked with so far used a homepage that was built from the LiveEditor system.

          You can set the SEO title, description, and keywords inside LiveEditor.

        2. Do you have any suggestion? could you please tell me how to set up homepage blog like yours? Really appreciate it.

          By the way, I appreciate the info you provided. I implemented some of the code and tips on my blog. cool. Thanks so much.

          Only the problem mentioned above.

          1. You can set up a homepage by creating a page via the LiveEditor system. Either use a pre-made template that is available or build it from scratch.

  23. Hi KM!

    Thanks so much for sharing these customizations! I was wondering how to get rid of the grey box around the blog articles’ column. I’ve been struggling with making my blog look good… Do you do graphics and other webdesign stuff too? I may need more help in the future.

    1. Hey Jen, glad you find the code here useful. To remove the grey box, the easiest way is to use another theme style. Go try out Theme 3 and see if the look is what you want.

      I’m not a graphic person though. But if you were referring to designing marketing templates using OptimizePress 2.0, you can check out some of my work here.
      .

  24. Hi Khai, I figured it out. I overlooked the blog layout options. oops :D

    1. Glad you got it sorted out. All the best! ;)

  25. Hi KM,

    I added the following code as per #6 above to my blog settings. However, regardless of the number of pixels I specify the height of the banner stays the same. Can you think of any reason why I’m not seeing the banner height change?

    1. Hello Vince,

      I’ve just tested code #6 on my OP demo site. It works completely fine on my end.

      I’ll share the code again at below (please exclude the /* ……. */). Also double check that you upload the correct banner.

      .banner .banner-logo {
      height:145px;
      }

      1. KM,

        As usual, you’re spot on with your advice. I had uploaded the wrong banner.

        Thank you for your help.

  26. Hello KM,

    I’ve used code snippet #19 above to reduce the size of the featured image on my blog posts. As a result, I would like the blog text to wrap around to the right of the image rather than start underneath. Do you know of any way to make this happen?

    Thanks.

    1. EDIT: Perhaps you can try code #27. This will remove the featured image for each post. You can upload your image directly in WP editor and make it align left. Note that you still need to upload the featured image to make it appear at your blog homepage.

      1. Fair enough! Thanks KM.

        I actually want to retain the full size image in single post view but only show a thumbnail on the blog homepage. I’ll have to ask OP Support if that’s possible.

  27. Hello KM,

    Thank you so much for posting these tips, you’ve been more helpful than the OP2 desk. I’m trying to decrease the padding between my drop down menu items. I’m using this code:

    body .container .navigation ul ul li a {
    height:auto;
    min-width: 180px;
    padding: 0.4em 1.1em;
    text-align: left;
    }

    But for some reason it won’t render when I save the changes. Any tips?

    1. Hello Shannon,

      The code you shared is quite different than the one I shared in #4 (alongside navigation) or #7 (navigation below). Refer to the Sub-menu part.

  28. Hi KM,

    I am completely new to this world of CSS but really wanted to make some unique adjustments to give my visitors a better visual experience. Could I get a quote for some custom tweaks to my site?

    Just wanted to say a big thank you for putting this info out here I can’t thank you enough! Oh and I stayed in Malaysia for a while I love chicken rice! lol.

    Thanks again,
    Leon

    1. Hey Leon,

      I rarely do freelancing work these days as I’ve focused all my time on my own projects.

      Have you searched on freelancing sites like oDesk or fiverr? I’m aware that there’re quite a number of people who are providing OP 2.0 related services.

      Between, your blog looks great to me!

      1. Thanks KM,

        I will take a look, and thanks for checking out the site!

        Thanks for all the top quality content you have put out there – you really are making a difference to people.

  29. Hi KM,

    I’ve used the code below from #7 above to try to change the size of my below header menu. However, no matter what values I specify for line-height or padding, I see no perceivable difference in the menu’s size. I assume I’m doing something wrong because I know from experience that there’s unlikely to be a problem with your code.

    All I want to do is to slightly reduce the width of the below header menu bar. What do I have to edit to do that?

    1. It’s hard to give you an answer without looking at your site. I’ve just checked my code on my demo site and I’m able to adjust the padding of the navigation below menu. Here’s the code that I copied from my OP demo site:

      body .navigation ul li a {
      line-height: 1em;
      padding: 1em 0.5em 0.5em;
      text-decoration: none;
      }

      Obviously, I can’t promise to solve all the challenges people had with their OP Blog. If you need further help, I’d recommend you just hire someone who knows OP and CSS (look in fiverr or oDesk) to help you on your blog customization.

      1. Ok, will do. There must be something peculiar with my setup that is stopping the code from working. Thanks for your help anyway.

  30. Wholly Crap, it worked! I just changed the footer to be centered using the custom css thing and it totally worked; dude, you rock, and the more i get into op2 , the more it’ starting to suck from the BLOG standpoint, jeezuz, I hope you guys can colaborate, or James can hire you to do the real world end-user, real time stuff. THANKS KM!

    1. Hello Scott,

      Thanks for your comment and your kind words.

      Actually James did reach out to me before, but I didn’t accept the offer because I’m not used to work for someone or earning a salary. I’d prefer to work on my own stuff, contribute my knowledge whenever I can, and build my own income from there.

      I think you get what I mean ;)