SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to change colors of links

    I have a wordpress site and am trying to change the color of a couple links on one page of my site. I try changing the <p style=""> but it doesn't work. It works with normal fonts but not with links, which retain the color from the style css. Could someone tell me how I would change the color of a link on a page?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You have to color the link itself. E.g.

    a {color: red;}

    However, that will most likely color all links red, so you need a way to target just the links you want to. We'll need to see your page code to suggest how to do that. Do you have access to the HTML?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there, and thank you very much for your help. OK, here is the html. The link I want to change the color of is: CLICK HERE TO GET STARTED NOW, which appears near the top of the page:

    <p style="font-size: 16px; color: #868686; text-align: left;"><img class="size-full wp-image-2571 alignright" style="margin-left: 30px;" title="team" src="http://mindfulnessangermanagement.com/wp-content/uploads/2011/04/team.jpg" alt="conflict resolution" width="318" height="242" />Our 8 Week <em><span style="color: #3ca328;">Mindfulness Approach Anger Management</span>™</em> program can help you with/p>
    <p style="text-align: left;"><em> </em></p>

    <ul>
    <li style="text-align: left;">anger problems in marriages</li>
    <li style="text-align: left;">conflicts with co-workers or boss</li>
    <li style="text-align: left;">anger from a separation and divorce</li>
    <li style="text-align: left;">feelings of frustration, insecurity, and disappointment</li>
    </ul>
    <p style="font-size: 16px; text-align: left;"><span style="color: #3ca328;"><strong><a href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO
    GET STARTED NOW</a></strong></span></p>
    &nbsp;
    <div class="testimonial"></div>
    <div class="testimonial">

    <span style="color: #3e74ac; font-size: 15px; font-family: tahoma,palatino; font-style: italic;">“Mindfulness Approach Anger Management™ is a brilliantly designed program, coming from the fiery inner-depths of someone who has truly transformed his own volcanic anger into powerful wisdom. I can assert with confidence that, if you follow this course faithfully, you too will transform, finding peace and joy in your life, even if before it was littered with the wreckage of your anger.”</span>

    <span style="font-style: italic; font-size: 13px;">- Dr. Timothy Walker</span>
    <span style="font-style: italic; font-size: 11px;">Psychotherapist and author of
    <strong>The Healing Circle</strong></span>

    </div>
    <div class="testimonial">

    <span style="color: #3e74ac; font-size: 15px; font-family: tahoma,palatino; font-style: italic;">"Mindfulness is at the cutting edge in the field of anger management. <em>Mindfulness Approach Anger Management</em>™ is an excellent resource for utilizing mindfulness practice as an effective anger management tool."</span>

    <span style="font-style: italic; font-size: 13px;">- Dr. Richard Pfeiffer</span>
    <span style="font-style: italic; font-size: 11px;">President
    <strong>National Anger Management Association</strong></span>

    </div>
    <span style="font-size: large; font-weight: bold; color: #3ca328;">Mindfulness Meditation: A Powerful Antidote to Chronic Anger</span>

    If anger is sabotaging your quality of life and destroying your peace of mind, there is a strong and effective antidote—one that’s been implemented for thousands of years and has been proven more recently through scientific research. It’s accurate to say that mindfulness is a centuries old and yet completely up to date anger management methodology. Mindfulness meditation is actually a very simple technique, and is especially effective in relieving the anger burdened mind.
    <blockquote>Studies show that mindfulness helps anger management problems in a variety of ways. Extensive research shows that mindfulness increases emotional well being, improves overall satisfaction with life, creates a more flexible mind that is less easily triggered to anger, and more.</blockquote>
    This research supports the thousands of years of anecdotal evidence, proving what the ancients have known all along: <em><strong>mindfulness works</strong></em>.

    </em>
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  4. #4
    Non-Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try changing the <p style=""> but it doesn't work. It works with normal fonts but not with links, which retain the color from the style css. Could someone tell me how I would change the color of a link on a page?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    If you just want to style all links on the page, then do this:

    Code:
    a {color: red;}
    a:hover {color: blue;}
    Of course, change to colors to suit. You have to target the actual <a> element to color it. Otherwise it will get the browser default (which is usually blue).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Looking at your sig link, I see this in your CSS:

    Code:
    a, a:visited, a:link {
      color: #006699;
    }
    That's what's coloring your links currently.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you just want to style all links on the page, then do this:

    Code:
    a {color: red;}
    a:hover {color: blue;}
    Of course, change to colors to suit. You have to target the actual <a> element to color it. Otherwise it will get the browser default (which is usually blue).
    I don't want to change all the links, just one on this page. I have tried to alter the <span style>, as I mentioned in the original post but it didn't work for me.

    Can you say more about what you mean by target the <a> element?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fifthhouse View Post
    Can you say more about what you mean by target the <a> element?
    Which<a> to you want to color differnelty? By targeting it, I mean creating a rule just for that one. For example, if you had this setup:

    Code:
    <p class="lala"><a href="">This is a link</a></p>
    you could "target" that <a> with this rule:

    Code:
    .lala a {color: pink;}
    Then those styles will just target that link inside the paragraph with the class of lala.

    So, again, which link do you need to target?

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted the one I want to change earlier:

    "The link I want to change the color of is: CLICK HERE TO GET STARTED NOW, which appears near the top of the page:"

    The code is:

    <p style="font-size: 16px; text-align: left;"><span style="color: #3ca328;"><strong><a href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO
    GET STARTED NOW</a></strong></span></p>

    So you're saying I have to make an addition to the style.css to change the link. I can't do it from within the page html itself. OK I can do that...

    Thank you again for your help. It's much appreciated.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Your best option is to put a special class, say, on the containing <p> and then target it in you style sheet: e.g.

    HTML
    Code:
    <p class="start"><a href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO<br>
    GET STARTED NOW</a></p>
    CSS
    Code:
    .start a {
      font-weight: bold;
      font-size: 16px;
      color: #3ca328;
    }

    You could, of course, place all those styles inline (that is, in the HTML), but it's not very efficient—especially if you want to use the same style somewhere else.

    Code:
    <p><a style="font-weight: bold; font-size: 16px; color: #3ca328;" href="http://mindfulnessangermanagement.com/anger-management-programs/">CLICK HERE TO<br>
    GET STARTED NOW</a></p>

  11. #11
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @fifthhouse: As a best practice in future work you should consider removing all inline styles from the HTML. Try to keep all of your CSS in a CSS file.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OH this is great. And thanks for the heads up about css files. I"m a complete hack and have very little idea what I'm doing, so that's a good piece of advice for me, gives me a little more sense of how things work.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  13. #13
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a hack...just learning


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •