The OptimizePress Live Editor has a lot of cool elements to use, one of which is the “Feature Box Creator” element. I really love this element because you can create a very attractive looking call to action box, order box, or a box for something else. You can set the background color, border color, border radius, and the kind of border you want (dashed, dotted, solid), so there is almost an unlimited number of things you can do with this. I even had one client create his entire sales letter within a feature box because he wanted it to be 700 pixels wide (you may already know changing the width of pages is not exactly an easy task). See Video Below, and further details below the video including the CSS Code for this. Be sure to watch in full screen mode for best viewing.

One of the things I was looking into for a recent project was how to make this feature box have a transparent colored background. The reason was due to having a full size background image, and not wanting to cover up the image completely with the feature box.

After inspecting the CSS of the page and tweaking it a bit, I found that it is just a matter of adding a line of CSS under “Page Settings > Other Scripts > Custom CSS” in the OP Live Editor.

Also, when creating the “Feature Box Creator” element, you shouldn’t choose a background color since we’ll be using some CSS. So make sure the settings look something like this (When adding this element, you’ll need to click the green “Advanced Options” and you’ll see these settings):

2015-07-21_23-34-14

Here is the code you will need to add to the page (I use a site called colorpicker.com for finding the colors I wish to use):

/* Transparent Background Feature Box Creator Element OptimizePress */
div.feature-box-creator.feature-box-creator-style-1 {background-color: rgba(0, 0, 0, 0.5)!important;}

So lets break this down a bit. the rgba color is the first 3 numbers there. Since the color I selected was white, then all 3 are 250. The 4th number is the transparency. The lower the number, the more transparent it is going to be. In this case, I wanted the background to bleed through a little, but not a lot, so 0.8 was good for this.

As you can see, colorpicker.com will give you both the hex value and the rgba value:

2015-07-21_23-44-46

Pretty cool right?

I will be posting more OptimizePress CSS Hacks soon. Leave your comments below!


Kevin McClellan
Kevin McClellan

I love building sites with WordPress & OptimizePress. I have been creating websites since 1998 and been using WordPress since 2004. When I'm not messing around with WP, I can be found watching Star Trek, Star Wars, or traveling to the beach whenever I want.