Please upgrade here. These earlier versions are no longer being updated and have security issues.

Changing Hyperlink Color in Vanilla 2010 Theme

This discussion is related to the VanillaPress2010 addon.

Hi...Hoping someone can help. I'm trying to change the default color of any hyperlink posted in my forum to #BF0B48 so that any link posted stands out more. Right now, when I hover over link, it turns red, which is good to a degree, but the link just looks like normal text when not hovered over. I'd like all links by default to be this color, with or without hover, and also underlined.

I'm using Vanilla 2010 and I know this is a CSS alteration I need to make. I've tried editing the custom.css theme file accordingly but the changes just dont seem to be taking for some reason. I should also note I have hardly any experience with CSS so im wondering if im missing something else. I should note I've cleared my cache in both Firefox and Chrome.

This thread was the only relevant thread I could find on topic in Vanilla support forums but its not very conclusive so I'm hoping someone can clarify. I've looked outside Vanilla support for CSS help but nothing i tried is working and Id prefer to hash this out with fellow Vanilla users as it seems like a simple change for which a good thread would benefit the community in the future.

This is the relevant code currently in my Vanilla 2010 theme's custom.css file after my changes but again its not taking for some reason:

a,
a:link, a:visited {
text-decoration: underline;
color: #BF0B48;
}
a:active {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #BF0B48;
}

AND THIS IS THE ORIGINAL Vanilla 2010 CUSTOM.CSS CODE FOR WHAT ITS WORTH:

a,
a:link,
a:visited,
a:active {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}

Any help would be appreciated. Thanks.

Comments

  • Sorry forgot the code format:

    CURRENT CUSTOM.CSS CODE:

    a, a:link, a:visited { text-decoration: underline; color: #BF0B48; } a:active { text-decoration: none; } a:hover { text-decoration: none; color: #BF0B48; }

    ORIGINAL CUSTOM.CSS CODE:

    a, a:link, a:visited, a:active { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #000000; }

  • peregrineperegrine MVP
    edited July 2013

    clear you cache if the css code is correct l(I didn't check your css). but often you need to remove ini files in cache folder for css changes to take effect.

    also look in firebug (or any web tool) to inspect a link and see what the css shows. if its not what you think it is your loading the old css not the changed one.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    vrijvlinderGMoneyUnderDog
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I thought you weren't into css ? ♥♥♥♥♥

    UnderDog
  • Thanks for the quick reply Peregrine. Wasnt the cache unfortunately and I used Firebug to check CSS like you said and you were right in that it wasnt using the CSS currently on my custom.css file for some reason.

    Is there anything I should know when making CSS edits? I just edited the file via FTP, as I did with defeault.master.tpl file, and then saved it. Thoughts?

  • peregrineperegrine MVP
    edited July 2013

    Thanks for the quick reply Peregrine. Wasnt the cache unfortunately and I used Firebug to check CSS like you said and you were right in that it wasnt using the CSS currently on my custom.css file for some reason.

    see what custom.css it is looking at and what you edited. they should be the same file and removing the ini folders on your server will reload the custom.css assuming you are not using any minify or page speed plugins.

    what version of vanilla are you using as I ask the next poster for the one millionth time.

    ALWAYS POST YOUR VERSION OF VANILLA. in your question.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    GMoney
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Well if I may cut in.... if something does not want to do what you want in css you can try adding !important to it

    color: #000000!important;

    You can see in firebug what style sheets are being called. If it says custom.css then it is being called and you need to add !important to override the master style

    GMoney
  • It was the 'Minify' plugin I had enabled, as when I disabled it the CSS changes worked, and I noticed this plugin was alos recently removed from the addons database.

    Really appreciate the effort from both of you to help me on this one as it was driving me crazy. Version 2.0.18.8 for what its worth. Sorry for not including that before as I am aware of the new BETA version coming soon, which Im very excited about. Enjoy your day. Thanks again

    vrijvlinderUnderDog
Sign In or Register to comment.