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

Comments on this entry are closed.

1. Michael Estevez March 18, 2015, 4:31 am

   KM, do you have code for making a row’s height narrower?

   1. KM Lee March 18, 2015, 11:02 am

      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.

2. Justin March 18, 2015, 9:46 am

   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!

   1. KM Lee March 18, 2015, 11:23 am

      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.

      1. Justin March 20, 2015, 8:14 pm

         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!

         1. KM Lee March 20, 2015, 9:00 pm

            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. :)

3. Justin March 18, 2015, 9:49 pm

   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.

   1. KM Lee March 19, 2015, 1:41 am

      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.

4. Fairuz March 29, 2015, 8:56 pm

   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

   1. KM Lee March 29, 2015, 11:53 pm

      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.

      1. Sofia January 17, 2016, 10:07 pm

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

         1. KM Lee January 18, 2016, 10:58 am

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

5. Korina April 3, 2015, 12:40 am

   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!

   1. KM Lee April 3, 2015, 1:14 am

      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!

6. Rory April 4, 2015, 9:54 am

   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

   1. KM Lee April 4, 2015, 2:15 pm

      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.

      1. Rory April 4, 2015, 9:16 pm

         Thank you so much!

7. Dr. Linette Montae April 5, 2015, 3:43 am

   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!

   1. KM Lee April 5, 2015, 1:01 pm

      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.

      1. Dr. Linette Montae April 5, 2015, 10:44 pm

         Thank you very much. Works perfectly!

8. Andrew April 15, 2015, 12:19 pm

   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

   1. KM Lee April 15, 2015, 11:58 pm

      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.

      1. Andrew April 16, 2015, 4:40 pm

         Thanks for that.

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

         1. KM Lee April 16, 2015, 7:59 pm

            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.

9. Jaime April 30, 2015, 4:33 am

   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.

   1. KM Lee April 30, 2015, 5:04 am

      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.

10. Douglas May 1, 2015, 2:05 pm

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

    Keep up the good work!

    1. KM Lee May 1, 2015, 9:34 pm

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

11. Darren May 1, 2015, 2:18 pm

    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

    1. KM Lee May 1, 2015, 9:27 pm

       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.

12. Devin May 16, 2015, 9:14 am

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

13. Nick June 21, 2015, 12:16 pm

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

    1. KM Lee June 22, 2015, 6:01 am

       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.

14. Peggy August 3, 2015, 8:21 pm

    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!

    1. KM Lee August 4, 2015, 3:08 am

       嗨 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 */
       }

15. Rob August 7, 2015, 2:59 am

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

    1. KM Lee August 7, 2015, 8:25 am

       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.

16. Frank September 18, 2015, 9:15 am

    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?

    1. KM Lee September 22, 2015, 1:59 am

       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.

       1. Frank September 25, 2015, 7:55 am

          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.

          1. KM Lee September 25, 2015, 11:43 am

             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.

17. Dr Linette Montae October 4, 2015, 3:25 am

    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.

    1. KM Lee October 4, 2015, 11:57 am

       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.

       1. Linette October 17, 2015, 10:40 pm

          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??

18. Shirley Solis October 20, 2015, 4:42 am

    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!!! :)

    1. KM Lee October 22, 2015, 10:16 pm

       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.

19. NickF November 11, 2015, 11:23 am

    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).

    1. KM Lee November 14, 2015, 11:49 am

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

20. Peter December 8, 2015, 10:50 am

    Hi KM Lee,

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

    Thanks,
    Peter

    1. KM Lee December 8, 2015, 11:00 pm

       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.

21. Glenford Smith February 1, 2016, 12:25 am

    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!

    1. KM Lee February 1, 2016, 10:20 am

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

22. robi February 8, 2016, 12:24 am

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

    1. KM Lee February 8, 2016, 10:32 am

       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.

23. DJ February 25, 2016, 8:23 am

    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!

    1. KM Lee March 5, 2016, 9:20 am

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

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

24. Jimmy Tran February 29, 2016, 11:55 am

    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

    1. KM Lee March 5, 2016, 9:04 am

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

25. Adam Judish March 1, 2016, 6:12 am

    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!

    1. KM Lee March 5, 2016, 9:16 am

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

26. David March 31, 2016, 9:14 pm

    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

    1. KM Lee April 1, 2016, 11:40 am

       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.

27. Anderson April 6, 2016, 3:23 am

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

28. Steve April 16, 2016, 12:12 am

    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.

    1. KM Lee April 16, 2016, 2:55 pm

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

       1. Steve April 16, 2016, 10:03 pm

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

          1. KM Lee April 17, 2016, 2:38 pm

             Gradients only work when you use it for background.

29. Dean April 28, 2016, 9:18 pm

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

    1. KM Lee April 28, 2016, 11:10 pm

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

30. Jose Luis April 28, 2016, 11:54 pm

    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

    1. KM Lee April 29, 2016, 12:49 am

       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.