KhaiMun.com header image

KhaiMun.com

≡ 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:

327 comments… add one
  1. KM, do you have code for making a row’s height narrower?

    Reply
    1. Hi Michael,

      You don’t need code to make the height of the row narrower. You can adjust the Top and Bottom padding directly by clicking on the “Pencil Icon” for that particular row.

      Reply
  2. Hi KM,

    I bought your Ultimate Sales Page template and i want to customize my blog so it matches the style of Ultimate Sales Page. How would i do that? It doesn’t need to be exactly the same but similar so there is no “disconnect” when they go from one of my pages to my blog. What and how (css) would you customize to get a similar look?

    Thanks alot!

    Reply
    1. Hi Justin,

      Thanks for letting me know that you’ve purchased my template from the marketplace.

      Because of the limitations of the OP Blog system, I’m afraid there’s no easy way for me to give you a few lines of code so that your blog will look like the Ultimate template.

      The width of the Ultimate template is customized to a wider layout (1140px) whereas the width of the blog is only 975px. You’ll need to use quite a bit of code to make the blog layout wider and look great on any device (this is the challenging part).

      As for customizing the alongside navigation, you can use code #1, #2, and #3 above.

      If you don’t want to make stuff complicated, I’d recommend you just go for the ultra minimal look Theme Style 3 and just customize the navigation area.

      If you really want to push things further, then hire a freelancer who knows CSS and OP 2.0 to work closely with you until you get the look you want.

      Reply
      1. Hi KM,

        Thanks for the reply. I understand it would take alot of custom css to get close to Ultimate Sales Page which is beyond the scope of this blog. Is there a way to use the repeated checkered background on the blog? I think that alone would make it match the main website in terms of styling?

        Thanks for you help. Your template is absolutely stunning by the way!

        Reply
        1. Hello Justin,

          It’s possible to use the repeated checkered background on the blog. I’ve previously replied to someone (in older comments). I’ll just share the code again. All you need is change the TileURL to the actual background URL.

          .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;
          }

          You don’t need to use all the code. Test them and only use what you need. To change your footer background, refer to code #33 above.

          Hopefully that helps. Do leave me a review at the marketplace if can. :)

          Reply
  3. Hi KM,

    Purchased a template of yours and while everything is good, I need to change the color of the tabs in the tab content. I have tried so many different ways but nothing seems to work!

    The template is ‘Prime’ membership lesson page.

    Thank you.

    Reply
    1. Hello Justin,

      Thanks for reaching out to me.

      I’m sorry for the inconvenience caused to you.

      For the Prime membership template, the tab color is styled using CSS. In your LiveEditor, go here: Page Settings → Other Scripts → Custom CSS

      Search for the code which look like this…

      .tabbed-panel .tabs li a {
      background-color: #67BB8A;
      }

      If you want to change the tab hover color, look for this code (right below)…

      .tabbed-panel .tabs li a:hover {
      background-color: #F2F2F2;
      }

      Just change the hex color #67BB8A to the color you want for your site.

      Reply
  4. Hi KM,

    Great post and I find it very useful.

    I’m trying to add excerpt to my recent post. How do I go about doing this?

    Cheers,
    Fairuz

    Reply
    1. Hello Fairuz,

      I see that you’re using the Recent Posts element at your homepage. Unfortunately, OP 2.0 doesn’t come with a style where the excerpt will show along with the blog title. The excerpt will only show in the blog system not in the pages you built with the LiveEditor.

      Reply
      1. Can you remove the date from the Recent Post on a page with OP?

        Reply
        1. Yes you can. In this case, you need to insert the code in the LiveEditor page.

          Reply
  5. Hello KM,

    BLESS you for sharing all this information!! I’m creating a new website and I have been locked in battle with the blog on OptimizePress! I can figure a lot of stuff out, but I’m not a true techie, so I really appreciate all you are offering here. Thank you so much!

    Reply
    1. Hi Korina,

      Thanks for your kind words. I’ve been lacking in writing tutorials about OptimizePress lately because of some other projects I’ve been working on. But I’ll be sure to share some great information in the coming days. Wishing you all the best!

      Reply
  6. Hey KM,

    This is an incredibly helpful post. Thank you so much! I really appreciate it.

    I’ve got a few questions for you:

    #1. The stuff in green, do I need to modify that? Or is that just part of the code?

    .main-content-area img.wp-post-image {
    height 165px; /* Edit px */
    min-width: 50%; /* Edit % */
    }

    For example, this is green: /* Edit px */

    #2. Is there a way to make the image left justified around the sample / teaser copy of the post when on the main blog page?

    Thanks in advance!

    Rory

    Reply
    1. Hi Rory,

      #1. No, you don’t include the green comment in your code. All the comments in green actually provide you instructions on what to change or what the default value is.

      #2. The easiest way is to either use Theme 1 (or) Theme 2 for the blog theme style. In your WP Dashboard, go to: OptimizePress → Blog Settings → Theme

      Note that the featured image for the latest (first) post will always be a big one.

      Reply
      1. Thank you so much!

        Reply
  7. Thank you so much for the codes. I have benefited from several of them already.

    I’m back today because I simply want to change the title of my comment invitation, instead of it saying “Leave A Response”.

    I have tried everything I could find online. Do you have a code that will work with OP2?

    Thank you!

    Reply
    1. Hello Dr. Linette,

      Thanks for stopping by.

      To change the title of the comment, it’s a bit technical because you need to edit it in the OP Theme file itself. Based on your URL, I assume you’re using Theme Style 1.

      I’m also going to assume that you know how to access your site via FTP (e.g. Filezilla or FileManager in cPanel). Here’s how to change it…

      Go to: wp-content folder → themes → optimizePressTheme → themes → click on folder 1 (depends on which theme style you used) → comments.php

      View/Edit the comments.php file, then hit Ctrl+F (Windows) or Command-F (Mac) to search “Leave A Resopnse”. Change the text there and save the file.

      Note that the text might change to default each time you update to a new OP version.

      Hope that helps.

      Reply
      1. Thank you very much. Works perfectly!

        Reply
  8. Hi KM,

    These codes are awesome! Have helped me out a hell of a lot.

    I was wondering if you know how to make the live editor pages wider. eg. the same width as the standard blog page. I appreciate any help you can give.

    Thanks,
    Andrew

    Reply
    1. Hello Andrew,

      Glad you find the code helpful. Yep, I know how to make the LiveEditor pages wider; in fact, most of my recent templates are customized into a wider layout.

      Unfortunately, this is a bit technical because it involved the use of code. Also, it gets even more technical to ensure the pages you created are mobile friendly.

      If you are not a techie person, I’d recommend you hire a developer to work closely with you. Otherwise, just stick with the standard functionality in OP 2.0.

      Reply
      1. Thanks for that.

        With codes #1, #2, and #3, can they be used on live editor pages?

        Reply
        1. For #1, yes.

          For #2, you can use this…

          .banner {
          padding: 25px 0; /* Edit px */
          }

          For #3, no.

          I think you can find the answer in the OP Knowledgebase.

          Reply
  9. Hi KM,

    I’m trying to add a background picture to my blog page using optimize press 2.0. I used the color background code and it works well thanks but it is possible to add a css code to add a picture as background? Thanks KM.

    Reply
    1. Hello Jaime,

      It’s possible to use a background image on the blog. I’ve previously replied to someone (in older comments). I’ll just share the code again. All you need is change the URL to the actual background URL…

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

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

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

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

      You don’t need to use all the code. Test them and only use what you need. To change your footer background, refer to code #33 above.

      Also, depends on your background image, you might want to add the following syntax:

      background-size: cover
      (or)
      background-repeat: repeat;

      You can find more about the background-size or background-repeat property online.

      Reply
  10. Hello KM, I just want to give you a big thumbs up for your excellent sharing here.

    Keep up the good work!

    Reply
    1. Hello Douglas, thank you for the kinds words. All the best to you!

      Reply
  11. Hello KM,

    Is there any reason you don’t sell OP2 Blog templates? Is that even possible? If not can you write (and sell) a guide on creating a usable OP2 blog using custom CSS (with pictures on what the CSS changes actually look like visually)? If you don’t have the time I would love to JV with you on creating such a guide. Thanks

    Reply
    1. Hello Darren,

      There are no blog templates, only blog themes. FYI, developing a new blog theme is a little more in-depth than creating a template for use in the LiveEditor.

      The team is currently working on new blog themes and I’ve been informed that this will be released in the next few months. Make sure you keep an eye on it.

      Reply
  12. Really solid work. I also enjoyed bombing through the hundreds of comments, geez louise, that took 20 minutes extra!

    Reply
  13. Love the design of everything you do! Quick question, how do you get the blog navigation bar to look like yours? :)

    Reply
    1. Hello Nick,

      Thanks for your kind words. Actually this blog isn’t running on the OptimizePress platform. So far I don’t use the blog functionality for my OP sites.

      However, I believe you can easily do that in OP simply by turning on the alongside navigation. Then adjust the top and bottom padding #2 accordingly.

      Reply
  14. Hello KM,

    Thank you for this compilation. I’m having trouble now with my blog posting and would love to seek your advice. I’ve tried to change the h2 typography so on the blog posts listing page it changes size as I told it to, but on the single post page itself, I’ve spent hours crawling through all custom CSS codes I could find on in vain. I wonder if it’s because of the Chinese characters in the post title, but that’s not the case for the h2 on the blog posts listing page.

    Please help! (You can see a test post if you go to my site) Really appreciate it!

    Reply
    1. 嗨 Peggy,

      你好. 謝謝你的評論.

      This blog post was published in May 2014. I haven’t played with the blog settings for a while, so I believe the OP Team has changed some of the CSS code.

      Having that said, can you please try the following code…

      # Single Post Title Size #

      .latest-post h1.the-title {
      font-size: 40px; /* Edit px */
      }

      Reply
  15. Do these still work? Just tried one and it didn’t do anything.

    Reply
    1. May I know which code you were referring to? As mentioned above, this post was published in May 2014, I’m not sure whether the OP Team has changed some of the CSS syntaxes. Let me know and I’ll test it again on my end.

      Reply
  16. Hello Mr Lee.

    I’m trying to change the font size of my navigation link in OP 2.0.

    How can I manage to do that?

    Reply
    1. Blog Navigation

      Go to OptimizePress → Blog Settings → Layout Structure → Header & Navigation Preferences → select Blog Primary Navigation (or) Blog Top Navigation

      LiveEditor System

      Refer to → #2 at here.

      Reply
      1. Hi Mr. Lee. Thank you very much!

        If I may ask another question, I’m trying to reduce the height of the top nav using your code here but it does not seem to work. Any idea?

        Also I’m trying to style my link with an underline on hover, how should I do that?

        Thanks you very much.

        Reply
        1. I need to see your site in order to provide you suggestion.

          For underline on hover link, refer to code #17 (second one).

          Note: The code will only work for the blog system.

          Reply
  17. Thank you in advance for continuing to be such a great resource for OP2 users.

    Is there anyway I can hide the blog post excerpt that is shown by the OP2 blog theme? I would prefer that only the blog post title show but can also live with being able to control the excerpt word length.

    Thank you again.

    Reply
    1. Haven’t tried something like that and I don’t use the OP blog system. Can you show me your blog URL? Perhaps I can help you from there.

      Reply
      1. Thank you KM.

        I have been fiddling around with my site settings and what I really need is a way to only show a specific category of posts on my blog. Can this be done??

        Reply
  18. Hi KM Lee,

    This site is always a life saver for OP users like me!! I’ve constantly referred to this post.

    Quick question- do you know of any CSS code to center the Blog Featured Area above the optin box? and do you know of any CSS code to change the font size (H2 currently) and boldness (bold now)? Lastly, I’m using FB comments and the OP blog still shows 0 comments after the posts in the side column- any ideas on how to remove it? I tried one of the codes above, but it didn’t work :(

    Thanks for any info you could provide!!! :)

    Reply
    1. Hi Shirley,

      I’m currently away from my desk. Not sure whether it’s possible to display the # of fb comments on the sidebar. Can you check with the OP Support team about that?

      Personally I don’t use the OP blog functionality myself. This post was published in May 2014 and the developers might have changed a bit of the coding. If you can let me know which code isn’t working, I’ll probably look into it when I’m back.

      Reply
  19. Any news as to when OP2 is going to have a blog that is actually usable and fast to create like their amazing live editor? Im having a brutal time with it.

    All I want is to have the header with the logo and menu the same as all the other pages (which is defaulted to OP settings).

    Reply
    1. I don’t work for OP. Perhaps you should contact the OP Team about your queries?

      Reply
  20. Hi KM Lee,

    Is there a way to remove the sidebar on your front page and leave it on the other pages?

    Thanks,
    Peter

    Reply
    1. I’m afraid there’s no easy way to do that because all the 3 OP blog themes come with a sidebar. Unless you want to go into modifying the PHP code.

      Reply
  21. Dude: Your list ROCKS! Awesome stuff. Thanks a LOT for taking time to compile this helpful list. I was busting my chops trying to figure out how to get my featured images showing on blog main page, but not on each individual post. #27 on your list made it a breeze!

    Great stuff, man! One Love!

    Reply
    1. Glad I could help a little. Thanks for stopping by!

      Reply
  22. Hi KM,

    How to set the header and footer to transparent?

    Currently using this for a parallax effect:

    /* header background for blog theme */
    .banner {
    background-image: url(); background-size: cover;
    }

    #le_body_row_1{ background: url() no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

    Reply
    1. I haven’t tried making the blog header transparent myself but I’ve seen someone did that with a ‘static background’. Not sure you can have a ‘parallex effect’ though.

      Reply
  23. Hi Lee,

    Your list is really awesome! Thank you!!!

    I have one quick question for you. Is there a way to change the size of the h1 “the-title” on OP? Anytime I access an article the H1 Title is just too big for what I like.

    Thank you!

    Reply
    1. To change the blog post h1 title, use this CSS…

      .latest-post h1.the-title {
      font-size: 40px; /* Edit px */
      }

      Reply
  24. I’m in the process to work for my website..Can you please show me how to change the color of recent post to White or Turquoise because blue not good for viewer on my site .. Here is the screencast of my questions. Waiting for your reply.

    Thanks
    Jimmy Tran

    Reply
    1. Throw the following CSS into your LiveEditor page…

      .recent-posts-style-2 a {
      color: #fff;
      }

      /* Link Hover Color */
      .recent-posts-style-2 a:hover {
      color: #fff;
      text-decoration: none;
      }

      Reply
  25. Hi KM,

    How do I remove the underline from a link when hovered?

    I still want the color to change when hovered, just no underline.

    This is would be for the blog. Thanks!

    Reply
    1. To remove the underline when hovering over a link, use this CSS (for OP blog)…

      .latest-post p a:hover, .post-content p a:hover, .older-post p a:hover, .latest-post li a:hover, .post-content li a:hover, .older-post li a:hover, .main-sidebar a:hover {
      text-decoration: none;
      }

      Reply
  26. Hi KM,

    You seem like a total OP code ninja!

    In my top navigation: Can you offer me any help in getting the text of the current Page to display a different color on my blog page? I have been able to figure out how to do this on my live editor pages, and I tried everything to get the text of the current Page in my top navigation to be a different color, but no luck.

    My home page where I’m able to get the current nav text to be a different color: Home

    Here is my blog page where I am unable to get this: Blog

    Thanks so much!
    David

    Reply
    1. Hello David,

      I’ve shared the highlight current menu code before if you were to visit the Advanced CSS link at the end of the post. Throw the CSS code below into your Blog section…

      body #nav-side.navigation ul#navigation-alongside li.current-menu-item a {
      color: #3080b1;
      text-decoration: underline;
      }

      Hope that helps.

      Reply
  27. KM Hello, Thanks for sharing the code helped me, help me to make visible the images highlights of posts on mobile devices?

    Reply
  28. Hi, thanks for your great resource, its been incredibly helpful.

    Do you know how I might be able to put a blue line under the Blog Primary Navigation menu so that I can make it match the members page I’ve created using the page editor?

    Thanks in advance.

    Reply
    1. You can add a solid color at the bottom of your navigation. Add this CSS to your blog:

      body #nav-bottom.navigation {
      border-bottom: 7px solid #1996ff;
      }

      Reply
      1. Thanks very much it works perfectly, is it also possible to do gradients in this way?

        Reply
        1. Gradients only work when you use it for background.

          Reply
  29. Is there a CSS code I can add to turn the navigation element horizontal rather than vertical?

    Reply
    1. I’m not sure because I haven’t tried something like this before.

      Reply
  30. Hi. Is there any CSS hack that allows me to display certain buttons (or whatever) ONLY in mobiles, while keep them invisible in laptop & desktop computers? Would be like a “Show ONLY on Mobile Devices” option.

    Thanks for your input, ~JL

    Reply
    1. That’s no ‘hack’ for something like this because it’s your own customization. It can be done but you need to write your own custom code for that.

      Reply

Leave a Comment