16 {{ upvoteCount | shortNum }}
16 {{ upvoteCount | shortNum }}

Code for Link Color in second style sheet

by tresfavian
14 replies
  • WEB DESIGN
    • |
My links are almost the same color as my text on my site thus not making them stand out. I have been trying to put in a new link code on a existing second style sheet.css file

I have added an attachment to show what is presently on this style sheet. I tried a few codes but it isn't working for me.

Can someone please, please help me figure out a code that will work that will
change all my anchor text links color? A light blue would work fine for anchor text color against black text.

If you need to see the first style sheet, please let me know. Tres.
#code #color #link #sheet #style
  • Profile picture of the author Brandon Tanner
    Just add this to your style sheet...

    a {color: blue;}
    Signature

    {{ DiscussionBoard.errors[2955854].message }}
    • Profile picture of the author tresfavian
      Hi Brandon,

      I cannot change the color on the first orig. style sheet - when I changed
      the numbers. My theme messed up.

      The designer had made a second style sheet to do any extra coding and
      not to mess with the original.

      I tried this code on style2.css but no changes. Any more ideas?

      Thanks for your reply. Tresa
      Signature
      Local Marketing for Business Owners
      {{ DiscussionBoard.errors[2955925].message }}
  • Profile picture of the author phpbbxpert
    One thing to remember here is that order matters.

    The last time that a selectors property is set is the one that is used.
    example

    a {color: blue;}
    a {color: red;}

    red will be used.

    The same goes when calling style sheets.
    If any rules in the last style sheet have the same selectors or dominant selectors it will over write the original style sheet rule.

    Also keep in mind that you should try not to use multiple style sheets if possible.
    It's an extra http request that is un-necessary and will just slow page load times.
    It may be minimal, but enough http requests add up.
    {{ DiscussionBoard.errors[2955948].message }}
    • Profile picture of the author tresfavian
      so what you are saying you have to reference the first color then repeat the code to change to another color, phpbbexpert?

      I have attached the first orig. stylesheet, just the link code area where you can see how he wrote this code.

      Can you tell me exactly how to write a new code for second style2 ?
      Signature
      Local Marketing for Business Owners
      {{ DiscussionBoard.errors[2956010].message }}
      • Profile picture of the author Brandon Tanner
        Along the lines of what phpbbxpert said, keep in mind that inline styles always take precedence over external styles.

        For example, a {color: blue;} is the correct external style to use to do what you are trying to accomplish. But if you have that as your external style, AND you also have the following inline style...

        <a href="http://www.somelink.com" style="color: red;">Link text</a>

        ... then that link will be red, even though you specified links to be blue in your external style.

        That may or may not be your issue here, but it's something to keep in mind.
        Signature

        {{ DiscussionBoard.errors[2956073].message }}
  • Profile picture of the author phpbbxpert
    Is there a reason why you don't just edit the code in the first stylesheet?

    If you need to add it to the second style sheet then add these to it

    a, a:link, a:visited {

    text-decoration:none;

    color:#0000ff; /* Is blue*/

    }



    a:hover, a:active {

    text-decoration:none;

    color:#ff0000; /* Is red */

    }

    But this second stylesheet will need to be linked into the header after the first to over write the first rules.

    Also make sure you clear your browsers cache, styles are cached by the browser.
    {{ DiscussionBoard.errors[2956041].message }}
    • Profile picture of the author tresfavian
      Can you explain linked into the header after the first code?
      What do you write to link into the header?

      Do you mean the header.php file by chance?

      The designer of the site made this second style sheet so not to mess with
      original css. The second sheet is specifically to make any changes to the
      original.

      thanks for that code, just need to place it and verify if I need to go somewhere else and also clear browser cache.
      Signature
      Local Marketing for Business Owners
      {{ DiscussionBoard.errors[2956092].message }}
      • Profile picture of the author tresfavian
        Brandon, your inline code is just to change one time on a single link and I have not resorted to this yet. thanks it's good to know that inline takes precedence over external.
        Signature
        Local Marketing for Business Owners
        {{ DiscussionBoard.errors[2956101].message }}
        • Profile picture of the author Brandon Tanner
          Originally Posted by tresfavian View Post

          Brandon, your inline code is just to change one time on a single link and I have not resorted to this yet. thanks it's good to know that inline takes precedence over external.
          Yeah, if your code is a big mess and you can't make heads or tales of it, then one option is to just add a "blue" inline style to each link manually (which may or may not be worth the trouble, depending on how many links you have).

          If you go that route, you can do a 'search and replace' in your text editor for each HTML page that links reside on, and replace them all at once...

          Replace all instances of a href with a style="color: blue;" href

          Not the prettiest solution, but I know from personal experience that sometimes css can cause so much grief, that any solution is a welcome one.
          Signature

          {{ DiscussionBoard.errors[2956199].message }}
  • Profile picture of the author hellunter
    you can put the style on ID.

    for example:

    <a id="test">text</a>
    <style>
    #test{}
    </style>
    {{ DiscussionBoard.errors[2956138].message }}
    • Profile picture of the author tresfavian
      I will try your way hellunter too but where is the color number or word put in
      at the #FF0000test{} ????
      Signature
      Local Marketing for Business Owners
      {{ DiscussionBoard.errors[2956195].message }}
      • Profile picture of the author hellunter
        Originally Posted by tresfavian View Post

        I will try your way hellunter too but where is the color number or word put in
        at the #FF0000test{} ????
        put #FF0000 in #test{}

        for example:

        <a id="test">text</a>
        <style>
        #test{color:#FF0000}
        </style>
        {{ DiscussionBoard.errors[2960728].message }}
  • Profile picture of the author phpbbxpert
    If the designer planned for you to use the style2.css then it is most likely already linked in.

    Look at the code in the header.php

    In the top section there should be a starting <head> and ending </head>

    Between those tags there should be something similar to

    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="style2.css" />

    Then just add the code I posted above to the style2.css
    and clear your browser cache.

    Keep in mind, that your links may also be referenced somewhere else further down in the first style sheet and using parent selectors.
    That will also matter.

    example

    .post a:link {
    color: #000000;
    }

    If that above example would be further down then the code earlier will do you no good as the .post class would also need to be included as it is the parent selector.
    (.post was an example it could be something else)

    You should use FireBug for FireFox browser and see what selectors are actually controlling the links you want to change.
    {{ DiscussionBoard.errors[2956207].message }}
    • Profile picture of the author tresfavian
      Sorry it took me a bit to implement these ideas. I did what phpbb very graciously told me. No, there must be more to it like he said with a parental selector. I will look for one but who knows what the parent is like you mention?

      The web designer certainly has his own language code. I've learned so much just trying to hanker this problem.

      So I think the best solution is what Brandon has also graciously said. To do the inline links. Your so right css is crazy, because there's more than one way to skin the cat.

      So Thanks very much, I'm going to take the Long but Easy way out and try the inline approach. Fellow Warriors, you've been Super trying to help me
      with this, I thank you, I'm learning more each time I ask for help! Tresa.
      Signature
      Local Marketing for Business Owners
      {{ DiscussionBoard.errors[2956344].message }}

Trending Topics