WordPress.org

Support

Support » Themes and Templates » How to Edit Link Colour Within Posts Only

How to Edit Link Colour Within Posts Only

  • Hi all,

    I am trying to edit the link colour on my site so that it is underlined and the text is a different colour to the main body text.

    However when I change the css file it changes links for every part of the site, which is not what I would like to happen. I need it to be within post content only.

    Is there a way to do this and how?

    Thanks in advance

Viewing 15 replies - 1 through 15 (of 16 total)
  • Can you get the element that the post content is contained in, for instance <div class="entry-content"> and then put something in your stylesheet specific to those links? For instance, if the post content is contained in <div class="entry-content">, you would put: .entry-content a {}. Does that work for you?

    Sorry but I am not the most WordPress savvy of characters yet…I recently switched from Blogger – could you explain that in a little more depth? 🙂

    Thanks.

    That’s okay. Either looking at your single.php file or using the “view source” feature in your browser, find what the div is called that contains the post content. Then you can style the links as described above.

    Isn’t the information required in the .css stylesheet?

    I can send you a link to the site if needs be to take a closer look, or if anything else you need let me know.

    Thankyou.

    Isn’t the information required in the .css stylesheet?

    Yes. You get the name of the div from your source code, then style it in your css.

    Ok I had a look and I think its this:

    <div class =”post-wrapper post-page”>

    Does that make sense? What next?

    Perfect. Now put this in your CSS:
    .post-wrapper a { color: #hexadecimal-color-code; }

    In the style.css file?

    Will that change the link colour? I take it you replace the ‘hexadecimal-color-code’ bit with the colour you want your link to show as?

    Yes to all three. It will change the link unless something overrides it. If you don’t see your changes, try adding !important after the color and before the semicolon, like this: .post-wrapper a { color: #hexadecimal-color-code !important; } That will ensure it overrides any other link color styles that may be an issue.

    Just a note as well, a is for just plain links, a:hover is for when you hover over the link with your mouse, a:active is when you click on it, and a:visited is for links that are visited.

    Great thanks for all your help! I will let you know how I get on.

    In the meantime what if I want to change the visited link colour as well?

    At the moment I’m happy with the link hover colour, but would like to underline links within posts and also have the colour change once the link is visited.

    Michael

    @alchymyth

    Forum Moderator

    it is great that you are starting to learn css:
    http://www.w3schools.com/css/css_link.asp

    just make it a habit to look things up everytime you have a question or a problem.

    the w3school.com site, for instance, is a good reference.

    Hi,

    micah – sorry, where do I paste that code into the css stylesheet? (i.e. which line?)

    Can you just input it anywhere, or is there an order that need obeying?

    Thanks again.

    Hi,

    Sorry all but.. any advice on the above question?

    Thanks again.

    Hi all,

    I have tried to get this to work but still have problems. When I input the code you stated it still changes the link colours of articles not within the text, which doesn’t look great. Here’s an example:

    New Chelsea Home Kit 2010/2011

    I want to change links within articles to red. Like so:

    .post-wrapper a { color: #FF0000; }

    But within the post wrapper, the related posts, authors, tags etc all change to red as well, which looks poor.

    Is there a way to edit it so it lies specifically within the body of the content only?

    It shouldn’t be that hard, but I can’t seem to figure it out!

    Anyone know their stuff? Please advise.

    Hey,

    Did you tried this – .post-wrapper p a { color: #FF0000; }

    This will change the link color within your post.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘How to Edit Link Colour Within Posts Only’ is closed to new replies.
Skip to toolbar