Is it possible with custom CSS to make the content area semi transparent? I have seen a previous post that makes the content completely transparent but cant work out how to make it say 50%.

Loving the theme BTW.

Look forward to hearing from you.

Cheers – Guy

Sorry for the longer response time, Christmas preparations and stuff…

Okaaay. So first of all the “.wrapper-all” class has a solid background of #FFFFFF (white color) which makes it difficult for other boxes to be transparent as their transparency would always go above the solid white color so we need to handle that first. One option is to use the opacity CSS property but this would make it’s content transparent as well. So the only possibility is to use the rgba() function for the color instead of its hexadecimal code (#FFFFFF).

E.g.:

The values are rgba( RED, BLUE, GREEN, ALPHA). If we set alpha to 1 it means solid color and 0 means no color.

Now every shortcode has attributes “css_class” and “style”. The style can be used for inline styles E.g.:

style="background-color: rgba(239, 157, 0, 0.5)";

The css_class can be used to attach class and the use it in the CSS for further styling. E.g.:

[section … css_class=”my-transparency-50″]

and then set in the CSS or Custom CSS field:

or set it for every separate color

The reason why you’ll have to set it per-color is that the transparency set using rgba() also sets the color of the element (the R,G,B values), thuss every time color1-color4 are change these values will also have to be changed as well.

Hope this helps you get to the right direction. Use “Inspect Element” of the browser to see what classes we have used and use them for styling as well..

Feel free to contact us if you need further help.
Cheers and Merry Christmas

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market