Archived topic
How do I highlight text on a page post?
8 replies · Started by Michael on January 13, 2019
How do I highlight several words in a paragraph?
I would like to highlight them yellow.
Thanks
Hi Michael,
So you can do this for the HTML content part:
<span class="highlight">some highlighted text</span>
Then add this CSS:
span.highlight {
background color: #f7f30c; /* Change color accordingly */
}
Using one of these methods:
https://docs.generatepress.com/article/adding-css/
Hi there,
sorry the orginal CSS in the email had a typo ie. hyphen missing:
span.highlight {
background-color: #f7f30c; /* Change color accordingly */
}
Still no luck after trying everything you listed.
Where are you adding the CSS?
I just added it to the head of the page in browser tools and it works.
EDIT: Just noticed you added it to an inline style on the following P tag. Remove it from there and add it to Customizer > Additional CSS
Ok so I wasn't adding the CSS to the head of the page. How do I do that?
Just put the CSS;
span.highlight {
background-color: #f7f30c; /* Change color accordingly */
}
In the Customizer > Additional CSS.
I included his short video showing you what I'm doing. Am I missing something?
https://www.useloom.com/share/2c14ddb26fad4ab38fc8aceb694a5fbe
OK, remove the blocks that you have created. And:
1. Just add the following markup to your paragraph block:
<span class="highlight">some highlighted text</span>
2. Go to Dashboard > Appearance > Customizer > Additional CSS and paste in:
span.highlight {
background-color: #f7f30c; /* Change color accordingly */
}
Then whenever you want to highlight some text you just need to wrap the content in the span as per point 1.