WordPress.org

Ready to get started?Download WordPress

Forums

Can't Figure Out How to Change Hyperlink Color in Style.css (8 posts)

  1. NateAnglin@gmail.com
    Member
    Posted 1 year ago #

    Good afternoon,

    With my current website template it's standard for the hyperlinks just to be bolded, however I would like them to be the normal blue, and fade to the purple once clicked. Below is my entire style.css for my domain. I can't find where to change this anywhere. Thank you!

    [ commercial theme's entire stylesheet of 519 lines redacted ]

  2. Digilodger
    Member
    Posted 1 year ago #

    You didn't have to paste the entire CSS here; you could have just give us the link to your site or the theme demo. As long as we have the link, we can access the CSS easily.

    Also, since you've paid for this commercial theme, you probably want to direct your questions to this theme's developer instead of us. :-)

    ------------------------

    Anyhow, please add this to your custom CSS or child theme CSS. Or if you have the latest version of WordPress JetPack, please go to Appearance --> Edit CSS:

    /* Custom link appearance, you can use colorpicker.com to pick out the #value for the colors */
    
    a, a:hover, a:visited, a:active { font-weight:normal; /* make all links appears normal instead of bold */ }
    
    a { color: #0C85C2 !important; /* color of links */ }
    a:hover { color: #9B28FA !important; /* color of links when hover mouse over */ }
    a:active { color: #0C85C2 !important; /* color of links when active */ }
    a:visited { color: #0C85C2 !important; /* color of links after user has visited it */ }

    You didn't specify which links you would to like to change color so I assume that you want to change every link, which is what the lines above do. :-)

  3. echofoxtrot
    Member
    Posted 1 year ago #

    Nice fix, Digilodger! And good advice.

    I just would add that, in general, NateAnglin (or anyone) might take a look at the Firebug plugin for Firefox. Using Firebug, you can drill down and locate the element (such as your links) whose CSS you would like to change. This will give you the style(s) that have been applied to that element as well as the selectors for that element. Then you can put your desired CSS into your child theme's style sheet, or the custom CSS area of your theme if it has that, using those same selectors but your own styles, thus overriding the original. For example, you might see, in the original stylesheet:

    nav#main ul.primary li a {color:#f00;} //Giving you a red link
    And you could put into your child theme style sheet (or the theme's custom css area):
    nav#main ul.primary li a {color:#009;} //Giving you a blue link

    Hope this helps.

  4. NateAnglin@gmail.com
    Member
    Posted 1 year ago #

    Thank you very much for your help. A dang novice, so I apologize for my lack of knowledge...like posting the entire CSS. I downloaded Jetpack, pretty neat and I entered the custom CSS, however I should have specified that I need just the hyperlinks in my posts to change colors, not everything. What should I add in the Custom CSS to resolve that?

  5. Digilodger
    Member
    Posted 1 year ago #

    Um, I'm sorry but apparently the mod has removed everything, including the link to the theme demo. It isn't possible for me to edit something that I can't see.

    Could you please repost the link to your site or at least to the theme demo? (Not the entire CSS again, just the link to your site or to the theme demo alone, please.)

    Thanks! :)

  6. nateanglin
    Member
    Posted 1 year ago #

    Okay, no entire CSS this time, lol.

    My website is http://www.nateanglin.com.

    Thank you very much for your help, I REALLY appreciate it.

  7. Digilodger
    Member
    Posted 1 year ago #

    So we only want to change the colors of links in the single-post view, while leaving everything else as default, right?

    Two things:

    1. Could you please go back into your posts and remove the manually-added colors and underline that the editor (whoever wrote those posts) has implemented on the links? Those are overwriting whatever CSS code we use.

    Thanks!

    2. Please remove the old CSS code and replace them with these:

    .single-content a, .single-content a:hover, .single-content a:visited, .single-content a:active { font-weight: normal; /* not bold links in single posts */ }
    
    .single-content a { color: #0C85C2; /* color of links in single posts */ }
    .single-content a:hover { color: #9B28FA; /* color of links when hover mouse over in single posts */ }
    .single-content a:active { color: #0C85C2; /* color of links when active in single posts */ }
    .single-content a:visited { color: #0C85C2; /* color of links after user has visited it in single posts */ }

    Feel free to replace the #colorvalue as you see fit; visit http://www.colorpicker.com/ to choose colors.

  8. NateAnglin@gmail.com
    Member
    Posted 1 year ago #

    That worked. Thank you SO much!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags