There’s always a time during a creative moment when you just want to add that extra bit of sparkle to your work. Bring in a small touch of colour to compliment another image or enhance a focal point on your landing page.

When using OptimizePress to build your marketing pages you have the flexibility to add custom styles to every page.

In this article, we are going to share some CSS hacks to make your blogs and pages look even more awesome than they already are. Let me walk you through and explain what CSS stands for and avoid confusing some of you. CSS is short for Cascading Style Sheets.

This is where you apply a piece of styling code in a file (or inside the HTML head) and it can be referenced many times throughout a web page.

OptimizePress allows you to add site-wide CSS, meaning it’s applied to all your pages. You have the option to add CSS to each individual blog post or LiveEditor Page.

This flexibility allows you to have unique design elements across your entire site or on every single page.

The three areas where you can apply CSS into

  • Blog Settings – This is where you can apply CSS code to your blogs.
    Go to the OptimizePress Dashboard > Blog Settings > Modules > Other Scripts > Choose ‘Custom CSS‘ in the drop down.
    Styling and CSS Hacks for OptimizePress | Blog Settings Other Scripts
  • OP Dashboard – This is where you can apply global styles that will work on all OptimizePress LiveEditor generated pages.
    Go to the OptimizePress Dashboard > Global Settings > Custom CSS (Sitewide)
    Styling and CSS Hacks for OptimizePress | Blog Settings Custom CSS (Sitewide)
  • Page settings – This is where you can add CSS to only load on the single page.
    When inside the LiveEditor go to Page Settings > Other Scripts > Choose Custom CSS from the dropdown. If you don’t already see a CSS text area click the Add New button and then choose Custom CSS.
    Styling and CSS Hacks for OptimizePress | Insert Custom CSS

Below is a bunch of useful CSS codes you can apply to your site. Some of the code comes from are from Kevin, Head of Technical Support.  Some from OptimizePress user KM Lee. Not forgetting some snippets from James’s swipe file and code the I have played around with myself.

Understanding the Code

The examples below may look a little confusing. A comment in CSS is when you see the forward slash and Asterix used in the CSS code.

It looks like this:

/* CSS Comment Here */

/* = opening the comment.

*/ = closing the comment.

This means you can write comments in your CSS code as a note to yourself or others, explaining what the code is or what it does. The comment is not displayed on the web page.

We’ve created this post so you can click your mouse and copy the code from this page and paste it freely into your own site. You can leave the comments in or remove them. They play no role in how the CSS builds the styles on your pages. The comments explain how the code performs.

CSS for Pages Created with LiveEditor

These CSS tweaks any of your LiveEditor pages.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* MOVE LOGO TO THE RIGHT SIDE */
.container .eight.columns {
width: 300px;
float: right;
}
body .container .navigation #navigation-alongside {
float: left;
}
.container .eight.columns {
width: 300px;
float: right;
}
body .container .navigation #navigation-alongside {
float: left;
}
[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* CHANGE CURRENT ACTIVE MENU ITEM TEXT COLOR */
body .container .navigation ul .current-menu-item a {
color: #ff9900 !important;
text-decoration: underline;
}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* FULL WIDTH BOX STYLE WITH BORDER SHADOW */
.container {box-shadow: 0px 10px 40px #888888;max-width:1060px;}
body {background-color: #ededed;}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* CHANGE CONTENT TOGGLE COLORS */
.toggle-panel {
border: 1px solid #ccc;
background-color: #ededed;
}

[/feature_box_creator]

Print mode CSS is used if you want to style how the pages look when they are printed.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

@media print {
/* put all styles here to control how site looks in print mode */

}

[/feature_box_creator]

Dashed Border On Row

We know some people really want to spice up their pages and break up rows with different styles. This CSS adds a dashed border effect to your rows. See the example image below:

Styling and CSS Hacks for OptimizePress | Dashed Border CSS
Dashed row top border

The first thing is to name your style, ours is “dash-it” in this example, next add the style to the row as shown here:

Styling and CSS Hacks for OptimizePress | CSS Row Style

Next you add the following CSS to the page:

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* DASHED BORDER ON ROW */
.dash-it {border-top-style: dashed !important;}

[/feature_box_creator]

To have the dashed border on both top and bottom row include the ‘border-bottom’ like:

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

.dash-it {border-top-style: dashed !important; border-bottom-style: dashed !important;}

[/feature_box_creator]

You could also add a thinner line like this you set the pixel thickness in the OptimizePress row,

Styling and CSS Hacks for OptimizePress | Thin Dashed Border
Thin dashed row border

This CSS allows you to square off the edges on the OverlayOptimizer as shown in the image below:

Styling and CSS Hacks for OptimizePress | Square Overlay Optimizer

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* SQUARE EDGES ON OVERLAYOPTIMIZER */
.fancybox-outer {
-webkit-border-radius: 0px!important;
-moz-border-radius: 0px!important;
border-radius: 0px!important;
}

[/feature_box_creator]

CSS For Blog

Here’s some CSS to include on your blogs. It will only work for styles in the OptimizePress blog theme. Have fun and feel free to tweak and change the code to suit your design.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* HIDE POST DATE ON RECENT POST ELEMENT STYLE 1 */
.recent-posts-style-1 span {display: none !important;}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* BLOG FEATURE PANEL BACKGROUND IMAGE */
.featured-panel{
background-image:url(‘http://yoursite.com/wp-content/uploads/path-to/image.jpg’);
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* HIDE CATEGORY ARCHIVES TITLE HEADER FROM CATEGORY PAGES */
.op-page-header h2 {display:none;}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* CHANGE TEXT COLOR IN FEATURED AREA OPTIN BOX */
.featured-panel h2 {
color: #000000;
}
.featured-panel p {
color: #000000;
}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* CHANGE BACKGROUND COLOR FOR WIDGET HEADLINES AND ADD BORDER RADIUS */
.main-sidebar .widget h4 {
background-color: #4DACFF;
padding: 5px 5px 5px 15px;
color:#ffffff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
font-style:bold;
}

[/feature_box_creator]
Search Box
Here’s a piece of CSS to add focus to your search box.

Styling and CSS Hacks for OptimizePress | Search Bar Colour

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* ADD BORDER STYLING */
.search form {
border: 2px solid #4DACFF;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

[/feature_box_creator]

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* INCREASE OP SEARCH WIDGET INPUT TEXT FONT SIZE TURN OFF ITALIC */
.searchform input[type=text] {
font-style: normal;
font-size: 15px;
}

[/feature_box_creator]

Remove Blog Post Title Underline (default is underline)

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REMOVE BLOG POST UNDERLINE */
.latest-post h2 a:hover, .older-post h4 a:hover {
text-decoration: none;
}

[/feature_box_creator]

Remove Blog Post Date

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REMOVE POST DATE */
.date-extra {display: none;}
.post-meta {border-right: none !important;}

[/feature_box_creator]

Remove Author Name

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REMOVE AUTHOR NAME */
.post-meta a {
padding-left: 0;
border-left: none;
}
.post-meta a:first-child {
display: none;
}

[/feature_box_creator]

Continue Reading Text to Button

This piece of CSS can add a background and bored to your ‘Continue Reading’ text.

Change the background hex colour (#333), radius (3px), border style (solid), border size (1px) and border colour (#333) to suite your own design.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/*  ADD BORDER AND BACKGROUND COLOR */
.latest-post .continue-reading a,.post-content .continue-reading a, .older-post .continue-reading a {
padding: 11px;
border-radius: 3px;
font-size: 21px;
color: #fff;
background-color: #333;
border: solid 1px;
border-color: #333;
}

[/feature_box_creator]

This CSS will remove continue reading underline only. It could be added to the code above by including “text-decoration: none;” or you can add it separately if the code above isn’t used.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REMOVE UNDERLINE ON CONTINUE READING LINK */
.latest-post .continue-reading a, .post-content .continue-reading a, .older-post .continue-reading a {
text-decoration: none;
}

[/feature_box_creator]

Remove Featured Image

To remove the feature image from each blog post but still have it show on the blog home page, add the following code to each individual post.

The CSS option for blog post is editable for each post.

Edit the post, click the OptimizePress Settings tab as shown below:

Styling and CSS Hacks for OptimizePress | Insert Custom CSS in Blog post

Here’ the CSS code:

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REMOVE POST FEATURED IMAGE */
.post-image {display: none !important;}

[/feature_box_creator]

Some Extra CSS For Fun

Here’s how you can highlight a button in your nav menu like this example.

Styling and CSS Hacks for OptimizePress | CSS Radius Button

Go to Appearance > Menus > Click Screen Options top right > Check the box for CSS Classes.

Styling and CSS Hacks for OptimizePress | Enable CSS Classes

Go down to your menu item, expand the links and you’ll see a new text field.

Styling and CSS Hacks for OptimizePress | CSS Menu Class

Enter your CSS class EG. sign-up (Something that is not already being used) and click Save Menu.

Go to OptimizePress Blog Settings > Modules > Other Scripts as shown here:

Styling and CSS Hacks for OptimizePress | CSS Highlight Button Code

Paste in the following code so it looks the same as the above image.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* HIGHLIGHT MENU LINK */
.sign-up {
background-color: #ff6800;
background: #ff6800;
color: #fff;
-webkit-border-radius: 3px;
}

[/feature_box_creator]

Increase the radius number to add more of a curve to your button.

Sticky Banner Nav (On Blog)

When using the Navigation Along side logo this CSS will fix the banner to the top of the page on scroll.

Styling and CSS Hacks for OptimizePress | Menu Alongside Logo
Navigation alongside logo

It uses @media screen min-width so the CSS only works on larger screens like laptop and desktop but and it won’t display on mobile.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

@media only screen
and (min-width : 1224px) {
.banner {
padding: 10px 0!important;
position: fixed!important;
width: 100%!important;
z-index: 999!important;
background-color: rgba(250,250,250,0.8)!important;
border-bottom: 1px solid #404040;
}
.main-content-area-container {
margin-top: 119px;
}
}

[/feature_box_creator]

If you want it to display on all devices remove the following code form above.

@media only screen
and (min-width : 1224px) {

and the last trailing } at the bottom.

Font Based Icon

If you want to include some nice font style icon in your nav menu that’s also doable. This feature works for WordPress and OptimizePress menus, default and OverlayOptimizer buttons. Here’s a couple of examples of how they look:

Styling and CSS Hacks for OptimizePress | CSS Text
Font based icon example 1
Styling and CSS Hacks for OptimizePress | CSS Logo Button
Font based icon example 2

Kevin our Head of  Technical Support wrote an article on his blog showing how to add the icons to your site. We also created a quick video guide to walk you through the process.

How To Add Font-Based Icons

In the video below we show you how to quickly add font styled icon images to your text links.

[video_player type=”youtube” youtube_remove_logo=”Y” youtube_force_hd=”hd720″ width=”630″ height=”354″ align=”center” margin_top=”0″ margin_bottom=”20″]aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj13OFhNeERxVERxTQ==[/video_player]

This is the CSS to widen navigation for icon fonts. It’s only needed if you have big font and lots of menu links.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* WIDEN NAVIGATION FOR FONT ICON */
@media only screen and (min-width: 800px) {
.container .eight.columns {
width: 270px;
}
.container .sixteen.columns {
width: 650px;
margin-top:10px;
}
body .container .navigation ul li a {
padding: .8em .8em;
}
}

[/feature_box_creator]

Navigation (LiveEditor Pages)

When using the navigation along side logo you can make the height smaller.

Styling and CSS Hacks for OptimizePress | Menu Alongside Logo
Navigation alongside logo

This code sets the banner height:

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* INCREASE BANNER HEIGHT */
.banner {
height: 93px;
}

[/feature_box_creator]

This code reduces the logo height and may vary depending on the size of your logo (default padding 40px).

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* REDUCE LOGO HEIGHT */
.banner .op-logo {
float: left;
padding: 27px 0;
}

[/feature_box_creator]

When reducing the height of the logo you will want to bring the nav menu up. This code does just that. It will vary depenidng on the size of your logo and banner height.

Change only the number 17 (default 34px).

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* RECUCE SPACE ABOVE NAVIGATION */
@media only screen and (min-width: 1224px)
body #nav-side.navigation #navigation-alongside {
margin: 17px 0 0;
}

[/feature_box_creator]

Center Navigation

Center Top Navigation Menu Or Bottom Navigation Menu.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* CENTER TOP AND BOTTOM NAVIGATION */
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;
}

[/feature_box_creator]

Float Top Nav
Float Top Navigation right as shown in this example.

Styling and CSS Hacks for OptimizePress | Top Right Navigation
Top navigation floating right

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#f2f2f2″ bg_color_end=”” border_color=”#969696″ border_weight=”1″ border_radius=”” border_style=”solid” font_font=”Courier” font_color=”#969696″]

/* FLOAT TOP NAV RIGHT */
body .container .navigation ul#navigation-above {
float: right;
}

[/feature_box_creator]

Add Transparent Triangle To Row

A question recently came up in the comments about adding a transparent triangle below a row. After a little digging we found the code to produce the same effect.

OptimizePress-CSS-Triangle

Find the CSS code here on Gist.

Add the following class to your row in Code after row.

OptimizePress-CSS-Code-Before-Row

There’s lots more CSS you can include in your pages. We have only covered a small amount of what’s possible with OptimizePress. We will update this post periodically when we find more useful code you can use.

New ClubHouse Template

Now we’ve shown you some CSS hacks we have an amazing, new template called Chameleon! This high converting landing page template is already available in our ClubHouse, but first watch the video.

When you see the video below your will see why we named it Chameleon.

Take a look at this new template in action.

[video_player type=”youtube” youtube_remove_logo=”Y” youtube_force_hd=”hd720″ width=”630″ height=”354″ align=”center” margin_top=”0″ margin_bottom=”20″]aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1yWEdneGVTSExUUQ==[/video_player]

So what did you think of it? Did you ever wonder if it was possible to change the colour of web page using CSS?

We are super excited to see this new template working live on your sites. We recommend you split testing the pages using different colour variations. Different colours will trigger different emotions for people landing on the page.

To get the highest conversion rate on your landing pages, you will need to test many versions in your niche.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#F3F3F3″ bg_color_end=”” border_color=”#CBD2D6″ border_weight=”1″ border_radius=”” border_style=”dotted” ]

Tell Us What You Think – Please Comment Below!

We would love to hear your comments or questions. Will you be using any the CSS hacks listed? Do you like the Chameleon Template?

[/feature_box_creator]


    139 replies to "Styling CSS Hacks for OptimizePress"

    • Tim T

      I added this code to the Page CSS and it did not change any colors.
      Any ideas what to look for?
      I am fairly familiar with CSS and how it works (i.e. not a newby).

      • David Frosdick

        Hi Tim, drop us an email in support and we can be more specific with your help.

    • Klaudia

      Those CSS hacks for optimizepress are amazing. From time to time I use !important css rule, when I can’t get what I want: )
      Great article!

    • Justin Birtwell

      I tried this hack and ii didn’t work. Uhg. 🙁

      • Justin Birtwell

        I got it to work. I think they changed the configuration. All users must copy the font-awesome css files into their wordpress project.

    • Marcus Jovanovich

      Can anyone recommend any CSS for other header menu customisation’s? or are there any plugins which work well with OP?

    • Enrico Maggiolo

      Hi and thank’s for sharing this really helpful code!

      I need to change “archive category” with “categoria”… how can I do that?

      If I use your code

      /* HIDE CATEGORY ARCHIVES TITLE HEADER FROM CATEGORY PAGES */
      .op-page-header h2 {display:none;}

      I hide everything and I would like only to change the text. It is possible?

      Thank’s

    • Matthias Mühlmann

      Hi David,
      Do you have an Idea how I can change the font color of the Countdown timer?
      I need it in this color #ffffff so it is visible on a dark background. (Text – Day, Hour, Minute …)

      THX for Support

    • Roberto Cooper Bortolussi

      Hi Adelle, have you fix the problem? 🙂

    • David Frosdick

      Hi Adelle, the header text is responsive. It looked like the image on your page was too big. Might be worth reaching out to our support team on that.

    • Travis

      How do I change the OP blog from excerpt to using the more tag to truncate a full post?

      • David Frosdick

        Hi Travis, use the WP more tag within the blog post content where you want read more to appear.

    • Eduardo Ernesto Martinez Baraj

      Hello David,

      I put this code to change the color of my search box on my blog:

      / * ADD BORDER STYLING * /
      .search form {
      border: 2px solid # 4DACFF;
      webkit-border-radius: 7px;
      -moz-border-radius: 7px;
      border-radius: 7px;
      }

      But it is not changed no color.

      Please somebody help me !!!

      Eduardo.

      • David Frosdick

        Are you using the OP theme? Send us a link to your site so we can see.

    • tamara machado

      Hey, David. I’m trying to make the triangle hack to show on my page but it’s not working. I’ve pasted the css into the page scripts, is that right? Can you please help me out?
      Thank you a lot!

    • Emeka Attoh

      Hi David,

      I am trying to remove the “category archive”. I’ve tried the code shown above, but it removes the whole heading which is not what i want. I just want to remove the “category archive”

    • Joey Ragona

      would love a simple code to change color images into greyscale / black and white

    • Carmen Brablec

      Do you have a tweek for altering the ” Leave A Response” headline above the comment box in the blog?

    • Artemis Black

      do you have a Custom CSS to change the color of the field input? It’s integrated with Infusionsoft

    • Guima Scartezini

      Hey David the awesome font icons looks “italic” on my Blog primary menu. What should i do to keep them plain?

    • David Frosdick

      Hi Marcus, which part exactly in the rows are you trying to copy?

      • Marcus Jovanovich

        Hi David, its the transparent triangle on the bottom of the row (section 1) pointing down to the next section (2)

        • David Frosdick

          You could make a similar triangle image and then add that as a row background image with 0 padding top and bottom on the row.

          • Marcus Jovanovich

            yeah that is what i am doing if its a solid image, was just wondering if there were a way to make it transparent. I find the section flow to be a bit chunky on OP, otherwise I love it. do you have any recommended blogs or pages to follow for OP? I checked out your page, Great Stuff I will be following you from now on Thanks,

            • David Frosdick

              Try making a full white image 1900px wide with the transparent triangle in the middle top. Then add the image as row background positioned center with zero padding. Make sense?

            • David Frosdick

              I just done it with CSS. I’ll post it here shortly

            • Marcus Jovanovich

              Awesome Thanks.

            • David Frosdick

              Added it above for you.

    • Chris

      Is it possible to show featured image on the blog home page, for every blog post not just the top / most recent post?

      • David Frosdick

        HI Chris, you could try this. Not tested it yet though:

        @media only screen and (max-width: 600px) {
        .older-post .post-image {
        display: block;
        }
        }

    • Ronan McDonnell

      Hi, Any CSS out there to make the sidebar sticky so it moves with your scroll?

      • David Frosdick

        Hi Ronan, there’s a few plugins that do it. Search for sticky sidebar.

        • Ronan McDonnell

          Thanks David

        • Ronan McDonnell

          Got it, love it.

    • Ronan McDonnell

      Hey! Great post! I’m looking to widen my blog area, is there any code for that?

    • Dirk van Vugt

      I was strugging with changing font colors for one of my optins with the page builder. I eventually solved it with this code:

      .optin-box h2, p, privacy {
      color: #ffffff;
      }

      Since I searched for quite a bit of time I hope it’s useful for someone.

    • Merie Duesseldorf

      I have 2 navigation and plans to bring the top navigation from the top down , so that I a logo with navigation inside and underneath the other navigation . It would be great if it also css code is .

      does this work? t

      Thank you all

    • Tim Ernst

      I’m just trying to figure out how to change the width of the rows?

      • David Frosdick

        Wider or smaller? Probably easier to use a wider template and shrink a row down.

    • Robi Chan

      Thanks works great.

      What’s the css to perform the same for the footer?

    • Ivanilson Ribeiro

      How can i use two diferent background images in the same page.. for exemple 01 image for screen size little. example IPHONE .. and other imagem for the normal screen DESKTOP??

    • yangmm.sg

      I can’t remove the ‘continue reading’ link. Best if I could have all text in FULL in default home page… how can I do that?

      • David Frosdick

        Use the “no display” option in the CSS. that will hide it so only the header is the active link

    • Anna

      David, can you tell me the CSS to move the blog listing TITLE above the featured image please? I’m using OP2. Thanks. Anna.

      • David Frosdick

        Hi Ana, which blog theme 1,2? It shows above on theme 3

        • Anna

          Hi David, I’m using Blog Theme 1
          for Optimize Press 2.5.3.1

          Thanks
          Anna.

    • Sergio Junior

      as I leave the menu of my blog optimizepress identical to this blog?

    • Desiree Wolfe

      Yes! Thank you for this suggestion. I have been trying to manipulate a row background for the last two hours with no luck. I feel like I’m just playing a game of guess the correct size.

      • Rich Farina

        Desiree, as far as I know… they STILL haven’t fixed this issue. For whatever reason, they have been dodging my question and can’t give me a defined background size images should be. That’s why I have used other applications now to get better displays.

        • David Frosdick

          I’ll record a video showing how I would use background images. I would simply crop and image to the the browser size or just bigger or use basic CSS to center it. Your background image will look different depending on device you are viewing the page from.

          • Igor Murasov

            David, did you record that video? Can you give us a link to it, please?

    • Tomáš Hadžega

      Hi David, great information! Thank you. I would like to use some CSS code for fixed nav. menu on the top of page for scroll. But I created my nav. menu as a row and these CSS code for this menu doesn’t work. Could you help, what code I need to use for that? Thank you so much.

      • David Frosdick

        Hi Tomas, You would need to add the css class to the row settings. It’s not something I’ve ever tried. Search google for “css to fix on scroll” and see what you find. I’ve asked the team if they know of any code.

    • Elly Hurley

      This is a great post David and I refer to it and have used it often. Hoping you can help with one more bit of CSS Code – I’m using OP2 Theme 1 for my blog and would like to show the date on my posts. Is this possible and how do I make it happen? Cheers

      • David Frosdick

        Hi Elly, It’s not possible with CSS in that theme.

    • Phil Benham

      These are all fantastic customizations! I have a pretty pressing request: how can I create something like a full-width blog (blog page and single posts)? Not all the way full-width, really; but more like Medium with a full-width featured image and the body full-width to a maximum of 960px…Really, I’d just like to NOT have a side bar… Thanks for any suggestions as I want it to continue being responsive, too.

      • David Frosdick

        Hi Phill, that’s a compex layout and would require a lot of CSS. I’m not totally certain if the current blog layout will allow the full image width as the content container might be blocking that.

        I guess we would set the entire page to full width and then restrict the text width to a percentage like 70%

    • MRC

      Hi David,

      great collection of CSS hacks you gave us. I’m using quite a lot of them! 🙂

      I wonder if there is a CSS code for “CHANGE CURRENT ACTIVE MENU ITEM TEXT COLOR” for the current blog page? I’ve tried several codes, but none of them are working. :/

      Hopefully you have a solution for this! 😉

      MRC

      • David Frosdick

        The active menu (text link) colour can be configured in the blog settings > Layout Structure > Header & Navigation Preferences > Blog Primary Navigation.

        • MRC

          Hi David,

          thanks for your answer! 🙂 However I was looking for a code to make the blog site underline with a specific color, when its a active menu. This code below is only working on live editor pages…

          /* CHANGE CURRENT ACTIVE MENU ITEM TEXT COLOR */

          body .container .navigation ul .current-menu-item a {

          color: #ff9900 !important;

          text-decoration: underline;

          }

          So I need a different code for the blog css. It would be cool, if you have a solution to this! 😉

          MRC

    • RB

      Hi,

      I would like to use the navigation header as follows:

      – alongside of header I would like to place a call to action button
      – navigation below header

      So I would like the top row (header) to just be the logo and call to action button (right justify), with the navigation menu below the header.

      I can create a row for logo and call to action, but then I lose the navigation feature below my ‘header’ row.

      Is it possible to do this?

      Ron

      • David Frosdick

        Hi Ron, it’s not possible yet with that exact layout. You could highlight a button in the nav menu as though it’s a Call To Action button.

    • André Brik

      Hi! Thanks for the tips! Awesome fonts are really awesome, but when mines are going Italic. Why?

      • David Frosdick

        Hi Andre, it’s probably easier if you open a ticket with our support team so we can help out.

    • David Frosdick

      Did you open a ticket regarding this?, if so let me know the ID and I can reply there and try to help more. I’m sure it’s a case of tweaking the row setting or image size.

      • Rich Farina

        David, I did try to submit a ticket, but the answers didn’t really address the purpose of my inquiry. As per what you’ve read above, a good set of row background image guidelines and settings would really help. My frustration with the hit-n-miss approach to resizing my ROW Background Image to be able to see enough of it is quite frustrating. Perhaps you can address this and setup the parameters so we know EXACTLY what size the ROW Background Images should be. Thanks.

    • Matthew Houghton

      Hey David is there a code to completely remove the continue reading link so the whole blog post shows??

    • Nikolay Solabuto

      how to do that would be on the front page of the blog entry pervyya vyvodila with a small picture?

      • David Frosdick

        Hi Nikolay, can you explain your question again? Not sure what you are trying to do?

        • NRG27

          Hi David, i see you have the full width shadow box code there at 1060px. I try putting that code on my page and decrease it down to 700px but it appears only the right section decreases and the left side stays the same. All the content and video inside this box were screwed up even after i change their sizes. Do you have a code for 700px and doesn’t screw up my content? It would be greatly appreciate.

    • Nikolay Solabuto

      how to make a picture that would be the beginning of the blog does not stretch

    • Joseph Spada

      This is AWESOME!

      I’m trying to add CSS styling to make ROUND IMAGES.

      I know one of the new OP template has this built in, but how to I set this up so I can make rounded images in other pages or templates?

      Thanks for any help.

    • Junis

      How do you remove the standard navigation menu from the home/landing page? It seems a total mystery to me.

      • David Frosdick

        It’s controlled in the layout settings. If you open a ticket explaining exactly what you want removed even provide a screenshot, we can help more.

    • Mattia Paganelli

      Hi David!

      How could I change the width of the Template Style 4?

      Thank you!

      • David Frosdick

        Hi Mattia, it would require some custom CSS to widen the fixed width. Easier to start with a new wider template (Book Launch) and then copy over your rows.

    • David Frosdick

      Thanks for sharing the code!

    • Ed Ferrigan

      David, how do I just change the width of my OP 2 page? Looking all over for the CSS to do that but unable to locate….thanks for the other tips as well! Awesome tips.

      • David Frosdick

        Hi Ed, in the latest version the book template uses wider layout with CSS. You could start with that template. I’ll check with the team and come back to you.

    • Will

      Font based icon example 2 has an orange box as if it’s a button. I’m sure I’ve missed something, but how do I do that in my menu? Thanks for a brilliant post by the way, I love learning how to make the site look the way I want.

    • David Frosdick

      HI Steve, to stretch the banner you could add some CSS padding between each link. Are you wanting to stretch it? The reason I ask is the banner are the full width but you don’t wont the menu to be full width (?)

      • Steven Logreira

        David, no I don’t want to stretch the Banner, I want to control the width of the Primary Naviagation Menu so that It doesn’t stretch the width of the entire page, but rather remains the same width as the banner.

        • David Frosdick

          OK, that’s a little more advance CSS. You have to locate the nav width, then set the width and possibly reduce the padding between the nav links. It would take some digging into

          • Steven Logreira

            Thank you for looking into it

          • Steven Logreira

            David, were you able to figure this out? I could really use this advise on a blog I’m working on right now. Thank you 🙂

        • Steven Logreira

          So proud of myself, I actually figured it out. Here’s the code:

          body #nav-bottom.navigation {

          background: #DBD09B; /*Changes header background color*/
          margin-left: 187px; /* Allows me to shoft the menu bar over */
          padding-left: 20px; /*Moves the menu items over */

          width: 955px; /* Adjust width of menu bar so it lines up with header */

          }

    • Steven Logreira

      I asked this before and did not see my question or an answer. How can I make the menu bar the same size as the banner in the blog format when not using full width? The menu bar goes the full width.

    • Jose Luis Galvis

      Is there any plans for OP to develop an option for the COUNTDOWN to be cookie based instead of FIXED DATE? It would be very helpful since there are many countdowns out there but very buggy, incomplete or not very customizable…

      • David Frosdick

        Hi Jose, not at this time but we can add it to the list if we feel it’s ethical 🙂

    • Joanne Moore

      Thank you so much for this article, it’s answered so many questions that I’ve spent a long time trying to find answers to. Thank You!

      I do have one more question though… I’ve seen your styling around WordPress page titles (in particular the section which shows you how to remove the category archives page title). Do you know what code I would need if I wanted to change the styling of my WordPress page titles to headline style 17 (one of the optimize press elements)? I’ve tried variouss things through trial and error, but have not had any success yet!

      Thanks once again for your help, and I look forward to hearing from you 🙂

      Joanne

      • David Frosdick

        Hi Joanne, thanks for your feedback. To remove any styling you can try using display: none !important; – the same used above on the blog post date.

        If you are still stuck open a ticket with support and we’ll help you out, if it’s possible,

    • Jose Luis Galvis

      How can I ADD a Countdown on the Right Side of the BANNER…? I don’t use a menu but I really would like to use that empty space for a Countdown… Any help?

      • David Frosdick

        You can’t add it to the right side of the banner but you could create a new 3 column row, turn off the header, add your logo to the left area and timer on the right, leaving a space in the middle.

        • Jose Luis Galvis

          Hi David. I appreciate your comment. That’s exactly what I did and worked as supposed… Thanks for your time to reply. ~ JL

    • Jose Luis Galvis

      Hi. I need to decrease the height of the banner to make it thinner. Can you please help me with the CSS for this? I tried using the CSS height snippet with a negative value but It didn’t work.

    • Joanne Moore

      Hi there, this is an awesome article, thanks for sharing! I have a quick question – I see you’ve got one there to center the top and bottom navigation. Have you got one to center the footer navigation?Thanks! Joanne

    • Erik O

      I would like to see the same arrow on this page that sends “page to top”. Maybe I have missed it in the settings, but I have never seen a page to top option in a theme or globally.

      • David Frosdick

        Hi Erik, I’ll dig up some code for that.

    • Kirk Du Plessis

      How do you just center the bottom footer navigation? I’d like to put some social media icons there, center the menu and remove the copyright stuff

      • David Frosdick

        If it’s part of the actually footer you can override the FLOAT Left stye.

        Are the social icons small and grouped in another element? If so you could use the default “div align=center”

        That’s a guess without seeing the page.

      • KM Lee

        @kirkduplessis:disqus: just do a quick search e.g. ‘center footer’ at OP Knowledgebase and you’ll find the answers.

        To remove the copyright in pages, try this CSS…

        .footer-copyright {
        display: none;
        }

        For the blog copyright, try this CSS…

        .footer p {
        display: none;
        }

    • Nicole Gebhardt

      Nice article – answered several of my questions about CSS codes. Thanks!

      • David Frosdick

        No problem Nicole! Lovely site you have BTW!

    • Chris Coney

      I love OptimizePress however…

      This is starting to sail away from the point of using OptimizePress. This stuff needs to be automated an integrated into the UI.

      I was very surprised when I starting using OP2 when it launched because after creating various pages, a change to the styling in the OP2 dashboard did not update all the pages.

      This is where I felt OP2 had taken a step backwards by breaking CSS.

      Now it seems to ‘repair’ a basic feature of web page design, there’s extra work to do.

      • David Frosdick

        Hi Chris, I can understand your points but many of these tweaks are changing default WordPress styling. These snippets of code are used on multple WordPress themes and some of the extra bits are minor tweaks to enhance the page.

        You can still build beautiful pages without using any of the CSS above 🙂

        Building more styling options into the UI is never ending, where would we stop (?)

        • Chris Coney

          That wasn’t my main point.
          Every other WordPress theme I’ve used allows the user to centrally control the CSS site wide.

          In my experience, OptimizePress 2 doesn’t allow this.

          • David Frosdick

            The Theme does allow for you to add site wide CSS to all the pages and or the blog. I think you may be referring to editing CSS via the appearance menu (?)

    • Karen Rudkin

      Please excuse me being a beginner, I would love to change my
      logo site wide but it seems I have to go into every page and edit it. Sooo
      painful. Can I get around this? The site wide setting doesn’t seem to override
      the page setting and because I didn’t know what I was doing during set up – I
      am stuck changing every page whenever I want to update things. Such a time
      waster! Any suggestions appreciated.

      • David Frosdick

        Hi Karen, you could replace the logo image file with the new updatded (if the logo is the same on all page).

        We have another way to bulk update the header, however it’s the entire header, not just the logo. Would that help?

    • Susan Youshock Pruyn

      Happy, happy, happy… this is why I continue to use this product and recommend to others. Thank you for always offering so much value… I will absolutely be using these to customize! A few I have already had the need for, now I have the solution – thanks again!

      • David Frosdick

        That’s great to hear Susan! We will add to the list and keep bring you more tips and tricks 🙂

    • Workout Anywhere

      Is there a CSS hack for the About the Author box in your blogs David?

      • David Frosdick

        I’v been looking into the author box. We coded that into the main post.php template so it’s too technical to add on this list as it will probably generate a few problems for people. Let us see if there’s another way around it.

    • Michael Somerville

      Anyone else experiencing issues with copy/pasting test into the Optimize Plugin ? When I am create a page and pasting text into a text block it doesn’t take on insert and outputs “null” … anyone ?

      • David Frosdick

        Hey Michael, can you open a ticket with the support team and we will try and replicate the issue our end.

    • Workout Anywhere

      Awesome work! Is there any hack yet for making the mobile navigation menu something else other than the toggle? An app like menu would be best.

      • David Frosdick

        Not a hack a such. The navigation is a complex piece of coding to rework it to that style. It’s can’t be done with just CSS at the moment.

        • Workout Anywhere

          Thank you David. Is there a good way to leave a couple links in the header instead of using the top bar nav?

    • Rich Farina

      David and everyone at OP! Thank you SOOOOOO much for providing this information. I can’t wait to start trying some of them on my sites. Excellent work, everyone! Keep the innovative ideas coming! Rich Farina

    • Bryan Crawford

      AWESOME that you are sharing this with us. Most OP2 users are not developers, but need to know some basics to tweak pages just enough for the extra push. Great job and than you once again to the OP team for taking care of us as always.

      • David Frosdick

        Your are welcome Bryan! We will continually add this list when we find useful snippets.

    • bcarse

      Thanks for these hacks and code snippets. Would love to see more of these. Anything to be able to push the design of OptimizePress even further. Thanks again, David.

      • David Frosdick

        We are working on some new design elements but the CSS hacks are always useful for making simple tweaks here and there. I’ll add to the list as I test code on other sites. Thanks for commenting!

    • KM Lee

      Thanks for sharing. The FontAwesome tip is truly awesome!

      • Kirk Du Plessis

        I agree with KM – about author box would be killer 🙂

        • KM Lee

          @kirkduplessis:disqus: thanks for the shout-out. just sent you an email regarding the Rainbow Border ‘hack’ you asked previously 🙂

      • David Frosdick

        It’s a little piece of custom coding. I’l look into how complex it is.

      • David Frosdick

        OK…, you asked so we coded it for you!! Watch this space 🙂

        • KM Lee

          just updated to version 2.5.0. and boom! 🙂

          • David Frosdick

            🙂

            Kirk will be happy as well.

            • KM Lee

              @David_Frosdick:disqus thanks for the response. I’ve a client who already tried that. he told me the Author Box doesn’t look good on his end. I’m away from my desk and haven’t tried to style it (I noticed it doesn’t look nice if the description is short). If possible, do cover some styling tips for the Author Box.

          • Steven Logreira

            What new things are in version 2.5? I have not seen any documentation on that.

            • David Frosdick

              We’ve been working on LiveEditor performance, new author box on blog, larger fonts, some autoresponder tweaks and more

Comments are closed.