Highlight short code color

Support
#1

I’d like my headings to have a back ground (i.e. look like they are highlighted).

Im currently trying to use the highlight short code. The KB info indicates the highlight color defaults to the “Link” colour set in customiser however I’m getting a different color. How do I set the highlight color?

Also is there a better way for me to get the look I’m after for all headings across my site. (i.e. can I customise my h1, h2, h3 etc.)

Using Pro with Ethos stack.

Thanks!

#2

Hey @Micjwoods,

Are you using a Headline element? If so, you can use the Background option.

For global and Classic Headlines, there’s no option to set a background so CSS is needed. Add this code in Appearance > Theme Options > Global CSS.

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	background: yellow;
}

We need to check your setup to see what is causing this issue so please give us the URL of the page where you added the highlighted text.

The Heading options available under Theme Options > Typography are font-family, color, font-weight, italic, uppercase and letter-spacing. If you need additional styles, you’ll need to add text properties to the code I’ve given above.

Hope that helps.

#3

Thanks Christian.

Currently using the Classic Headline and have tried using [highlight] on text (new), it results in a yellow highlight. [highlight type=“dark”] give me a grey highlight. However id like it to be the same magenta color i have set for my site links. (as suggested in the KB)

This would work however I only what the words highlighted not the whole row (as in screen shot above)

www.goodcleancopy.com (its currently behind the under construction extension since its still being worked on)

thanks.

#4

In this case, please give us WP Admin access in a Secure Note so we could see your setup.

Since you need to highlight the text only, you will need to use the Highlight shortcode. Other ways would need custom coding.

Thanks.

#5

Just added login details. thanks.

#6

Hi There,

Please add this to Theme Options > CSS instead.

/*custom highlighter*/
.my-highlight span {
	background-color: hsl(300, 100%, 50%); /*magenta*/
	padding-left: 5px;
	padding-right: 5px;
}

And then apply the CLASS my-highlight to the headlines that you want to be highlighted.

Hope it helps,
Cheers!

#7

Thanks that’ll work. Appreciate the help!

#8

You’re always welcome!

Cheers.

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.