Skip to main content

For your blog posts and clips, we have an "image-centric" mode that displays the title as an overlay on the images, like so:

Screen Shot 2015-11-25 at 5.16.32 PM

It looks great that way, but some sites like to add background shading to the title text as well, so it looks more like this:

Screen Shot 2015-11-25 at 5.08.37 PM

To achieve that affect, you'll want to add this CSS to your site:

.title-image-title h2, .title-image-title h3 {
padding:5px;
background-color:rgba(95, 158, 160,0.4);
}

You can easily change the background color to what you want using the specific RGB code you desire.  

In the example code above, the RGB color value is 95, 158, 160, while 0.4 represents the transparency level (zero being fully transparent and one being fully opaque).

Here's a tool for converting hexadecimal colors to RGB as well:

http://www.javascripter.net/faq/rgbtohex.htm

Note that the code example above will impact both blogs and clips in image-centric mode. If you only want the effect on blog posts, use this:

.title-image-title h2 {
padding:5px;
background-color:rgba(95, 158, 160,0.4);
}

Or, if you only want the effect on clips, use:

.title-image-title h3 {
padding:5px;
background-color:rgba(95, 158, 160,0.4);
}

Attachments

Images (2)
  • Screen Shot 2015-11-25 at 5.08.37 PM
  • Screen Shot 2015-11-25 at 5.16.32 PM

Add Reply

×
×
×
Link copied to your clipboard.
×