[Resolved] How To Add Color In H2-H3 Links and underlined links

[Victor]

Hello, I would like to know how to add color to the links in H2 and H3 tittles; when I add a link in the text it appears with the link color that I have selected, but when I add a link in a H2 or H3 tittle the text continues in black color, and then the reader will not know that this tittle is a link.

I also would like that when I pass the mouse over a text with link that text would appear underlined. There is any option where I can configure that? Or any CSS code that I can add?

My web is http://expertomascotas.com/

Thanks!

[David]

Hi there,

The post grid element on the home page is created by Thrive. I would assume there is a setting for styling the hover colors within that?
If not this is the CSS Thrive is using and you can use to override them:

:not(.inc) .thrv_text_element h2 a:hover,
:not(.inc) .thrv_text_element h3 a:hover {
    color: #f00;
}

[Victor]

Hello David, I am not talking about the post grid, I am talking about any H2 or H3 with link: for example, in the url https://expertomascotas.com/camas-para-perros/ , there is a H3 tittle with link named “Cama viscoelástica para perros Petfusion”. When I add the link and I put the mouse over it, it looks green (the color I have selected for my link texts), but when I also put that text like a H3 tittle, the color is always black, and I want that the color changes to green when I put the mouse over like in any other text link of the web.

I also would like that, when I pass the mouse over a text with link, the text would appear underlined. There is any option where I can configure that? Or any CSS code that I can add?

Thanks.

[Leo]

Try this:

.entry-content h3 a {
    color: #00a810 !important;
    text-decoreation: underline;
}
.entry-content h3 a:hover {
    color: #000000 !important;
}

[Victor]

Hi Leo,

Thanks for your answer. Yes, I have added the CSS code and now the H2 and H3 tittles with link appears with the same color, but when I put the mouse over the text does not change the color like in all the other texts with link of the web. Please, can you help me?

And as I asked in my last email, I also would like that, when I pass the mouse over a text with link, the text would appear underlined. There is any option where I can configure that? Or any CSS code that I can add?

Thanks.

[Leo]

Try the edited CSS above:
https://generatepress.com/forums/topic/how-to-add-color-in-h2-h3-links-and-underlined-links/#post-1455735

I’m surprised you can’t do this using the page builder.

[Victor]

Thanks Leon, with the edited CSS code it looks that works good.

I haven’t seen any option in the page builder to change this; if it exists, please let me know where is it.

And about the other question of the underlined? Do I have to open another ticket?

Thanks.

[Leo]

I haven’t seen any option in the page builder to change this; if it exists, please let me know where is it.

I’d assume so but you’d need to check with their support team.

As for underline, try this CSS:

.entry-content a {
    text-decoration: underline;
}

[Victor]

Oh, sorry Leo, I confused Thrive with GeneratePress. Before write you I tried with Thrive, and the said me that it was a GeneratePress problem, sorry.

Thanks for the new CSS code!! it works perfectly. Only one last thing: the text links now appear underlined, but I would like that when I put the mouse over the text, the underlined disappear (I think that is better for the reader experience). Can you give me any CSS code for that?

A lot of thanks.

[Leo]

Add this:

.entry-content a:hover {
    text-decoration: none;
}

[Victor]

Perfect, thanks Leo.

[Leo]

No problem 🙂

[Author]

Posts