Support ForumAdding New Colors with Transparency – Support Forum

Adding New Colors with Transparency

BurnArt — Wed, 05 Nov 2014 18:13:05 +0000

Hello,

Loving the theme so far, but I have a quick question…

In Theme Options > Color Options > Additional Colors:
Is it possible to add new colors that have a transparency value?

I’d like to add a 50%-alpha black and a 50%-alpha white that I’ll be using throughout the site as overlays.

Thanks in advance for you help.

Reply To: Adding New Colors with Transparency

IshYoBoy — Thu, 06 Nov 2014 07:08:23 +0000

Hi BurnArt,

Unfortunately such colors are not supported. You will have to style those elements with custom CSS either in a child theme or using the “Custom CSS” field under “Theme Options” -> “General Options”. You will have to use the CSS “rgba();” function instead of the standard hex code for the color value.

So instead of:

.my-overlay{
	background-color: #000000; /* Black */
	background-color: #FFFFFF; /* White */
}

.my-overlay{

background-color: #000000; /* Black */

background-color: #FFFFFF; /* White */

}

You would use:

.my-overlay{
	background-color: rgba( 0, 0, 0, 0.5 ); /* Black - with transparency */
	background-color: rgba( 255, 255, 255, 0.5 ); /* White - with transparency */
}

.my-overlay{

background-color: rgba( 0, 0, 0, 0.5 ); /* Black - with transparency */

background-color: rgba( 255, 255, 255, 0.5 ); /* White - with transparency */

}

Now you just need to set the correct CSS selector to the element you need. Hope this helps.
Please let us know.

Cheers

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

Reply To: Adding New Colors with Transparency

BurnArt — Mon, 10 Nov 2014 22:00:11 +0000

Thanks for this info. I appreciate the help!

Reply To: Adding New Colors with Transparency

IshYoBoy — Tue, 11 Nov 2014 07:42:01 +0000

Hey,

Hope it helped a little at least.

Cheers

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