Forum Discussion

bsamson's avatar
bsamson
Adept
11 years ago

Adding CSS to make clickable text blue

I have created a custom page and added links with HTML. Currently, any clickable text is appearing the same color as non-clickable text. How can I change this to be blue so that it is obvious there is a link? Lithium provided me with the following code to add to the CSS Skins. Any suggestions or advice would be great!

 

.lia-body .lia-content .lia-message-body-content a, .lia-body .lia-content .lia-message-body-content a:link, .lia-body .lia-content .lia-message-body-content a:hover, .lia-body .lia-content .lia-message-body-content a:active, .lia-body .lia-content .lia-message-body-content a:focus, .lia-body .lia-content .lia-message-body-content a:visited{ color: #47B7E6;}

#lia-body .lia-content .lia-message-unread a { font-weight: bold; color: #47B7E6;}

 

9 Replies

Sort By
  • Inactive User's avatar
    Inactive User
    11 years ago

    That code sets all links no matter the state (hover, active, visited, etc) to the same color. You'd want to set the :visited link to a new color. ie.

     

    .lia-body .lia-content .lia-message-body-content a, 
    .lia-body .lia-content .lia-message-body-content a:link, 
    .lia-body .lia-content .lia-message-body-content a:hover, 
    .lia-body .lia-content .lia-message-body-content a:active, 
    .lia-body .lia-content .lia-message-body-content a:focus, 
    .lia-body .lia-content .lia-message-body-content a:visited{ color: #47B7E6;}

.lia-body .lia-content .lia-message-body-content a:visited{ color: blue;}

    To clarify, the second line overrides the style in the first declaration. You could just not include that selector in the first declaration for improved performance/simplicity.

     

    .lia-body .lia-content .lia-message-body-content a, 
    .lia-body .lia-content .lia-message-body-content a:link, 
    .lia-body .lia-content .lia-message-body-content a:hover, 
    .lia-body .lia-content .lia-message-body-content a:active, 
    .lia-body .lia-content .lia-message-body-content a:focus{ color: #47B7E6;}

.lia-body .lia-content .lia-message-body-content a:visited{ color: blue;}

     

  • bsamson's avatar
    bsamson
    Adept
    11 years ago

    Thank you for your reply! 

     

    I believe I would want to use the second section of code you shared. Where would I put this in Studio?

  • Inactive User's avatar
    Inactive User
    11 years ago

    You'd put it in your skin's CSS. In Studio, that's underneath the 'Community Style' tab. Click the 'CSS' tab and then expand your skin from the list on the right and click 'Desktop'. Put it in the editor.

     

    I think there's a Lithium Tutorial out there. A Lithium person is going to have to provide a link to that though. I don't have it offhand.

  • bsamson's avatar
    bsamson
    Adept
    11 years ago

    Thanks! I added into the skins, but it didn't update the color...perhaps after the push?

  • Inactive User's avatar
    Inactive User
    11 years ago

    Push shouldn’t matter as long as the skin is saved. The main thing is to override any class name/ selector that’s currently on the link you’re trying to style.

  • bsamson's avatar
    bsamson
    Adept
    11 years ago

    I added the following CSS at the very bottom of the CSS Skins:Desktop and nothing changed on Stage or Production. Any suggestions?

     

    .lia-body .lia-content .lia-message-body-content a, 
    .lia-body .lia-content .lia-message-body-content a:link, 
    .lia-body .lia-content .lia-message-body-content a:hover, 
    .lia-body .lia-content .lia-message-body-content a:active, 
    .lia-body .lia-content .lia-message-body-content a:focus{ color: #47B7E6;}

.lia-body .lia-content .lia-message-body-content a:visited{ color: blue;}
  • NicoB's avatar
    NicoB
    Lithium Alumni (Retired)
    11 years ago
    Hi @bsamson,
    can you check in the "Versions" tab that the latest version has been staged? Also I would check whether the style you added in the skins are actually present in the CSS file generated by Lithium when you load the community in the browser.

    Nico
  • Inactive User's avatar
    Inactive User
    11 years ago

    Agreed. Also, depending on that style, you may need to make .lia-body --> #lia-body in order to override a style since Lithium used that ID in many of their selectors.

  • bsamson's avatar
    bsamson
    Adept
    11 years ago

    Hello there!

    Looks like the code below has already been added in "Basic Styles Override Begin"

     

    .lia-body .lia-content .lia-message-body-content a, .lia-body .lia-content .lia-message-body-content a:link, .lia-body .lia-content .lia-message-body-content a:hover, .lia-body .lia-content .lia-message-body-content a:active, .lia-body .lia-content .lia-message-body-content a:focus, .lia-body .lia-content .lia-message-body-content a:visited{
    color: #47B7E6;}

     

    I changed .lia-body to #lia-body but it didn't change anything. Any suggestions?