Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Multiple (Different) Link & Link Hover Colors

Home Forums Support Multiple (Different) Link & Link Hover Colors

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #488894
    generatedcadcpr

    Hi, This is probably a noob question too, but I’ve wanted to ask it before.

    I usually have several links on a page, but I want to be able to give them different colors and hover colors. I’m using Elementor to build the sites and generatepress as the backbone. There’s no option in Elementor to change link colors. (it pulls it from the theme anyways)

    I included the website im currently working on.

    For instance I want the links under Bikes, Trikes and Dealers to be yellow and maybe something like a light grey on hover.

    I can set this generatepress but it will do it for the whole page.

    On the same page I want the “read more” links under Boss Hoss Strong & Boss Hoss Riders Association to be Light Blue.

    I guess the only way to do this would be with CSS?

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #489034
    Leo
    Staff
    Customer Support

    Hi there,

    Can you add them as links first? Currently I see the Bike, Trikes and Dealers are <h2> and are getting style from Elementor:

    .elementor-5 .elementor-element.elementor-element-2ca380a .elementor-heading-title {
        color: #fff94e;
        font-family: "Raleway", Sans-serif;
        font-size: 40px;
        font-weight: 900;
    }

    If you add them as links then I can tell if they are actually getting the style from GP or not 🙂

    #490488
    generatedcadcpr

    Sure thing, I just made them into some test links.
    As you can tell too, the ones under “boss hoss strong” are now white and invisible against the white background. I’m just now sure how one goes about styling each individual link per section if you need the link and hover color to be different.

    #490491
    generatedcadcpr

    *not sure

    #490626
    Leo
    Staff
    Customer Support

    Those can be changed globally through Customizer > Colors > Content.

    To have different link styles, you need to give them a class like this:
    <a class="black-link" href="URL here">This is a black link</a>

    Then target them with CSS like this:

    a.black-link {
        color: #000;
    }
    a.black-link:hover {
        color: #fff94e;
    }
    #492279
    generatedcadcpr

    Thanks Leo, That’s pretty neat. Got it to work!

    #492356
    Leo
    Staff
    Customer Support
    #956330
    Yola

    Ah, as so often, after struggling and googling in vain I find the solution here. Perfect! I hadn’t realized…

    Just to let you know how very helpful this forum is.

    Grateful! Yola

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.