[Support request] Text Highlighting in articles

[Vijaykumar]

Hi
Is there any way or CSS change that can highlight text in articles and add different color boxes around text?
See an example in the webiste url field.
I’ve provided an example URL. The sections I am referring to are “Free Bonus” “Note” with the different background color.

[David]

Hi there,

are you using the Gutenberg Block editor? If so the text block has background colors. If not then you will need to use some HTML. Let me know.

[Vijaykumar]

no I am using the classic editor as block editor had some issues with functionality that we wanted to keep from the classic editor.

what HTML do I need to use? Can it be added as hook or CSS?

[David]

HTML would be something like this:

<div class="alert-box alert-yellow">
    <p>my content in here</p>
</div>

Then your CSS:

.alert-box {
    padding: 1em;
    box-sizing: border-box;
}

.alert-yellow {
    background-color: #ebb205;
}

You can create different alert-color classes if you need different backgrounds.

[Vijaykumar]

Perfect. Thanks. With few border and corner mordifications here is the final I used:

.alert-box {
padding: .75em 1em;
box-sizing: border-box;
margin-bottom: 1.125rem;
border: 1px solid transparent;
border-radius: .25em;
}

.alert-yellow {
background-color: #ffeeba;
border-color: #f1da95;
}

.alert-blue {
background-color: #dfebf5;
border-color: #c9e3f9;
}

[David]

Glad to be of help and thanks for sharing your final solution.

[Author]

Posts