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

[Resolved] Change just one link color

Home Forums Support Change just one link color

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #49977
    Maarten

    Hello,

    Is there any way to override the general CSS-style and to change the text color of just one link?
    Using CSS, I added a button in a widget on a page of my website, but the text color always turns blue (this is the color of all the other links on the website), but I’d like just this link color to be white all the time.

    Here’s the .css of my button:

    .btn {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    font-size: 20px;
    background: #e86850;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    }

    .btn:hover {
    -webkit-box-shadow: 2px 2px 9px #666666;
    -moz-box-shadow: 2px 2px 9px #666666;
    background: #e86850;
    background-image: -webkit-linear-gradient(top, #e86850, #e62e0e);
    background-image: -moz-linear-gradient(top, #e86850, #e62e0e);
    background-image: -ms-linear-gradient(top, #e86850, #e62e0e);
    background-image: -o-linear-gradient(top, #e86850, #e62e0e);
    background-image: linear-gradient(to bottom, #e86850, #e62e0e);
    box-shadow: 2px 2px 9px #666666;
    color: #ffffff;
    text-decoration: none;
    }

    Many thanks in advance!

    #50029
    Dee

    Maarten –

    I’m just learning, but I think this is just basic CSS stuff. You have to style the link using the a designation. The order of link styles matters. They have to be in this order below. Here’s an example from my css.

    /*product links in Google blue*/
    .myproduct {
    color: #0266C8;
    text-decoration:underline !important;
    }
    
    a.myproductlink{ 
    color: #0266C8;
    text-decoration:underline !important;
    }
    
    a.myproductlink:visited{
    color: #660099;
    text-decoration:none !important;
    } 
    
    a.myproductlink:hover {
    color: #0266C8;
    text-decoration:underline bold !important;
    } 
    
    a.myproductlink:active {
    /*color #0266C8;*/
    }
    #50099
    Tom
    Lead Developer
    Lead Developer

    All of the above CSS should work, but remember you need to add the class to the link itself, like so:

    <a href="URL" class="btn">My link</a>

    If the link has that class, your styling should work just fine.

    Let me know 🙂

    #50117
    Maarten

    But it doesn’t! If you want to take a look, you can find the button on this webpage! Many thanks Tom!
    I added the CSS using Simple Custom CSS

    #50348
    Tom
    Lead Developer
    Lead Developer

    The button seems to be working for me? Red background and white text?

    Let me know.

    #50355
    Maarten

    I’m sorry for all these silly questions Tom, but I checked on several systems and the text is only white while hovering over, I’d like the text to be white all the time and I don’t know what I’m doing wrong anymore 🙂

    #50356
    Maarten

    Resolved it 🙂 didn’t know about adding the !important tag in CSS, never had to use this before! You can close this subject! Many thanks anyway!

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