Change Links Colour on Homepage

  • I have changed the links throughout my website to be blue using the css code

    a {
    color: #3366CC !important;
    }

    a:hover {
    color: #f583a9 !important;
    }

    unfortunately this has also changed all headings of the blog posts on my homepage to be blue as well, because they are all links.

    I would like all the links on my homepage to be a dark green colour to match the same as the menu.

    How can I change this?

    thank you

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • To change the color of the links within the headings of the blog posts on your homepage, you will need to add a more specific selector to your CSS code.

    Assuming the blog post headings are contained within a specific container element (e.g., <div class=”blog-post”>), you could use the following CSS code to target only the links within that container:

    div.blog-post a { color: #008000 !important; }

    This code will change the color of all links within elements with the class “blog-post” to a dark green (#008000). You can adjust the color code to match the shade of green you want to use.

    It’s important to note that using the !important keyword should generally be avoided unless absolutely necessary, as it can override other styles and make it difficult to maintain and update your CSS code in the future. Instead, try to use more specific selectors to target the elements you want to style.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Just a suggestion: The home page can be targeted by putting “.home” in the descriptor, as in “.home a”.

    Thread Starter Charli Sklar

    (@charlisklar)

    Hello,

    thank you for your reply. I have tried what you said but it does not do anything.

    I had to use the !important previously because it would not work otherwise.

    the page I am trying to change is

    [ redundant link removed ]

    I would like all the post titles and links to be dark green. I have put the code you have given to me but they are still the same colour as the links throughout the posts

    Please go to Appearance->Customize->Additional CSS option then paste that code

    .home a{
  color: #1E9387 !important;
}
    Thread Starter Charli Sklar

    (@charlisklar)

    Yes Steven! That has worked!

    Thank you.

    But I have a new problem. Its just the block titles I want in green. I would like the categories to be in pink. They were separate colours previously before I changed the links throughout the posts.

    How would I do that?

    Please put that code

    .home .cat-links a{
  color: #f583a8 !important;
}
    Thread Starter Charli Sklar

    (@charlisklar)

    thankyou everybody! I learnt a lot today on css.

    its exactly how I would like it now

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change Links Colour on Homepage’ is closed to new replies.