Archived topic
How To Add Color In H2-H3 Links and underlined links
11 replies · Started by Victor on September 23, 2020
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!
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;
}
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.
Try this:
.entry-content h3 a {
color: #00a810 !important;
text-decoreation: underline;
}
.entry-content h3 a:hover {
color: #000000 !important;
}
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.
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.
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.
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;
}
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.
Add this:
.entry-content a:hover {
text-decoration: none;
}
Perfect, thanks Leo.
No problem :)