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

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

Home Forums Support How To Add Color In H2-H3 Links and underlined links

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1455004
    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!

    #1455178
    David
    Staff
    Customer Support

    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;
    }
    #1455709
    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.

    #1455735
    Leo
    Staff
    Customer Support

    Try this:

    .entry-content h3 a {
        color: #00a810 !important;
        text-decoreation: underline;
    }
    .entry-content h3 a:hover {
        color: #000000 !important;
    }
    #1455766
    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.

    #1455770
    Leo
    Staff
    Customer Support
    #1455796
    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.

    #1455808
    Leo
    Staff
    Customer Support

    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;
    }
    #1455821
    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.

    #1455823
    Leo
    Staff
    Customer Support

    Add this:

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

    Perfect, thanks Leo.

    #1459023
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.