is there a way to highlight certain words? (by changing their colour)

manuschwendener · Member · May 31, 2017 at 9:14 pm
Copy link

Add topic to favorites
Hi

Is there a way to change the colour of single words, letting them keep their other attributes?

Example: on https://rdm2017.wordpress.com/resources/about I would like to set ‘Key collaborations’ to #D20537, but keep the size it has from being h4.

I don’t mind doing it in the html code, if that’s the easiest way.

Thank you :-)

(Not sure if this is a CSS question at all – if not please move the thread to the support forum.)

The blog I need help with is: (visible only to logged in users)
christineoakfield · Member · Jun 1, 2017 at 12:54 am
Copy link
Hi, @manuschwendener,

You can highlight the word and then choose the Text Color icon in the Visual Editor.

Once you choose that, you’ll have color options. Click on custom and put your color in.

Extra info if needed: https://en.support.wordpress.com/visual-editor/

Happy Blogging,
~Christine
manuschwendener · Member · Jun 1, 2017 at 5:31 am
Copy link
Thank you, Christine.

I had tried that, but it didn’t work at first – now it does :-)
manuschwendener · Member · Jun 1, 2017 at 5:34 am
Copy link
Correction: I can change the colour this way, but then I lose the font size definition from h4.
christineoakfield · Member · Jun 1, 2017 at 10:46 am
Copy link
Hmm.. I did see you comment that but it worked for me.
I just tried it again and it was fine but it may be the theme.
The generated HTML is
<h4><span style="color: #d20537;">Key collaborations</span></h4>
so you can replace that but let me see if I can try it on the theme you are on and see if I get the same results. Stay tuned.
christineoakfield · Member · Jun 1, 2017 at 11:02 am
Copy link
Hi, @manuschwendener,

I have had success on the Twenty Seventeen Theme with this as well. You should not need to do anything outside of the visual editor for this to work.

What I did to test it:
manually typed in

Key collaborations

four times.

I set two to Heading 1, and then two to Heading 4 (wanted to be extra sure).

I then followed the instructions to change the color to what you want on one of each of them. The size/heading did not change but the color did.

Maybe try one more time, with a clean slate for that heading (delete it and re-type it).

Happy Blogging,
~Christine
christineoakfield · Member · Jun 1, 2017 at 11:03 am
Copy link
LOL. Now I’m button happy. Too much bold, sorry.
manuschwendener · Member · Jun 1, 2017 at 2:47 pm
Copy link
Hi Christine, thank you.

Interesting. It’s not working for me, not even if I do it directly in the html code; as soon as I set the colour, the h4 size is lost.

Never mind, it was just an idea.
christineoakfield · Member · Jun 1, 2017 at 5:43 pm
Copy link
Let’s ask staff to take a look. I typed modlook into the tags.

How do I get a Moderator/Staff reply for my question?

Some issues require staff member help. If you see or add a thread that you know needs staff intervention, you can add the modlook tag to the tags area of the thread to make sure we see it.
supernovia · Staff · Jun 1, 2017 at 9:47 pm
Copy link
Howdy @manuschwendener, since you have CSS, and since you seem a little comfortable in the code, I recommend using that, particularly if you’re going to change more than just this one word to be the same color.

Here’s one way: anywhere you want to highlight a word, edit its tag and add class=”highlight” .

As a few examples:
```
<h4 class="highlight">Key collaborations</h4>

This <span class="highlight">and</span> that
```
Then head over to Customize > CSS and add this:
```
.highlight {
  color: #D20537;
}
```
If you want to do different colors, or if you wanted all h4 tags on a page to be a certain color, etc., tell us more about what you have in mind. Thanks!
manuschwendener · Member · Jun 2, 2017 at 12:18 am
Copy link
Thank you, supernovia, this is working well :-)
supernovia · Staff · Jun 3, 2017 at 2:09 am
Copy link
Perfect :) Cheers!

No items found.