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

Comments on this entry are closed.

1. JJ October 20, 2014, 3:12 am

   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. KM Lee October 20, 2014, 8:24 pm

      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. JJ October 20, 2014, 11:34 pm

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

3. Richard Farina October 22, 2014, 9:38 pm

   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. KM Lee October 23, 2014, 11:59 am

      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. Mirella October 23, 2014, 7:44 am

   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. KM Lee October 23, 2014, 11:39 am

      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. Mirella October 24, 2014, 8:13 am

         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. KM Lee October 24, 2014, 8:53 am

            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. Walied October 25, 2014, 4:04 am

   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. KM Lee October 25, 2014, 9:37 am

      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. Walied October 26, 2014, 12:02 am

         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. KM Lee October 26, 2014, 11:03 am

            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. Alena October 25, 2014, 7:26 pm

   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. KM Lee October 25, 2014, 9:17 pm

      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. Rowan October 28, 2014, 9:01 am

   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. KM Lee October 28, 2014, 10:19 am

      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. Linette Montae November 2, 2014, 10:13 am

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

   1. KM Lee November 2, 2014, 1:52 pm

      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. Joe November 16, 2014, 6:11 am

   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. KM Lee November 16, 2014, 10:22 am

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

10. Kimika November 17, 2014, 3:33 am

    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. KM Lee November 17, 2014, 9:11 am

       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. Kimika November 17, 2014, 9:47 am

          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. Carla Kohlhase December 17, 2014, 7:28 pm

    Just installed OP 2.0 and bookmarked your 40 CSS customizations.

12. Byron Coke December 17, 2014, 10:56 pm

    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. KM Lee December 18, 2014, 10:35 am

       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. Matthias December 31, 2014, 11:56 pm

    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. KM Lee January 1, 2015, 11:41 pm

       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. Jared January 9, 2015, 1:00 am

    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. KM Lee January 9, 2015, 12:02 pm

       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. Trevor January 9, 2015, 11:43 pm

    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. KM Lee January 10, 2015, 1:22 am

       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. Si January 12, 2015, 11:23 pm

    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. KM Lee January 13, 2015, 11:07 am

       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. Si January 13, 2015, 7:23 pm

          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. KM Lee January 13, 2015, 8:15 pm

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

17. Steve January 15, 2015, 5:34 am

    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. KM Lee January 15, 2015, 8:01 pm

       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. Steve January 16, 2015, 12:18 am

          Perfect! Thank you.

18. Chris Wilson January 15, 2015, 7:27 am

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

    1. KM Lee January 15, 2015, 8:19 pm

       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. Michael January 22, 2015, 12:09 am

    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. KM Lee January 22, 2015, 2:08 am

       EDIT: Please refer to my reply below to Peter.

20. Peter January 22, 2015, 8:42 am

    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. KM Lee January 22, 2015, 6:14 pm

       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. Jeremy January 23, 2015, 7:55 pm

    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. KM Lee January 23, 2015, 9:11 pm

       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. Jeremy January 26, 2015, 3:42 am

          Awesome. Thank you!

22. Saad February 2, 2015, 7:46 am

    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. KM Lee February 6, 2015, 9:37 am

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

23. Jason February 5, 2015, 8:11 am

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

    1. KM Lee February 6, 2015, 9:41 am

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

24. David February 11, 2015, 1:06 pm

    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. KM Lee February 11, 2015, 4:29 pm

       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. Susan February 12, 2015, 6:23 am

    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. KM Lee February 12, 2015, 11:25 am

       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. Sheila February 13, 2015, 11:44 am

    #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. KM Lee February 13, 2015, 2:42 pm

       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. Brona February 15, 2015, 2:15 am

    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. KM Lee February 15, 2015, 10:33 am

       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. Scott February 26, 2015, 2:19 pm

    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. KM Lee February 26, 2015, 2:57 pm

       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. Gjermund March 3, 2015, 4:04 am

    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. KM Lee March 3, 2015, 11:53 am

       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. Renee March 17, 2015, 5:56 am

    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. KM Lee March 17, 2015, 10:39 am

       Hello Renee,

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

       1. Renee March 17, 2015, 9:56 pm

          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. KM Lee March 18, 2015, 10:59 am

             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. Renee March 19, 2015, 9:42 pm

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