Background colour for special heading element

Hey sarthakchoudhary,
If you want all special headings to have a background color, such as yellow add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

.av-special-heading-tag {
	background-color: yellow;
}

and adjust the color to suit.
If you want the background color for one specific special heading add a custom class to the special heading element, for example highlight

and use this css:

.highlight .av-special-heading-tag {
	background-color: yellow;
}

If you only want the background color to be behind the text and not the whole element use this css:

.highlight .av-special-heading-tag {
	background-color: yellow;
	display: inline-block;
}

Best regards,
Mike

Hi,
Glad that this helped, for the example, I used the color name yellow but you can replace it with a HEX color code like #ffff00
To add some transparency you would use RGBA color codes, here is a converter
So if we want 50% transparency on a HEX color code for yellow we would get: rgba(255, 255, 0, 0.5)
In the css it would look like this:

.highlight .av-special-heading-tag {
	background-color: rgba(255, 255, 0, 0.5);
	display: inline-block;
}

If this doesn’t help please include the url to the element in question so we can take a closer look at your specific use.

Best regards,
Mike

Hi,

Great! Glad to know that the issue has been resolved. Please let us know if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael