How do I change the color of links through wordpress?

[websitemakernoob]

I realize that this question is probably about the simplest thing that I could ask, but I need to know and it's making my brain hurt trying to figure it out.

Save Money Fund Life ? Helping you save money, so you can do the things you love. is my website, how do I turn all of that blue text, green? Thank you in advance for helping me out with this.

[mlseim]

You will need to edit the "style.css" file. In most cases, I would recommend using child themes, but don't have time to get into that now. When you edit any files like "style.css", your changes will remain unless you update or re-install the theme. Updating wordpress isn't an issue, but if you update the "Simple-White-Lite" theme via the authors 'theme updates', it will erase, or overwrite your changes.

On your admin panel, you should find the "editor" where you can edit theme files. In your case, you want to open and edit "style.css".

You will see these lines:

a{
color: #128ee9;
}

That is where they assign the blue color to all links, in the case where all 'a' tags are used <a href .... >

Change it to another HEX color. You can work with HEX color picking here:
https://www.w3schools.com/colors/colors_picker.asp

Or, just pick pure green if you wish:
color: green;

You may want to make a safe unchanged copy of "style.css" before you modify it. Just in case you have to restore it back to original.

EDIT: On a side note, if you scroll through that "style.css" file, you'll see many other style properties you can mess with. Notably, lines like this:

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .top_links {
        display: inline-block !important;
    }
}

Those lines control what CSS properties will change when the screen width gets to a certain pixel width. Example, you might want something different for a tablet user, or smartphone user ... as compared to a desktop user. I mention this because the theme is very basic and you may want to change the layout for people using smartphones VS desktops.

[websitemakernoob]

Thank you so such for the answer. It was so easy for me to follow yet it took effort on your part to write. This really helped me a lot. Follow up question for you or to anyone else reading, is this. That changed the color of most of the links but not all of them, if you go to my website you can see what I mean. I want the link to my articles to be green too. But links within my articles I do want to remain blue.

I get the HTML color code thing, I just don't know what line of code means what and am nervous about proceeding by myself.

[mlseim]

Depending on which browser you use, you can view the HTML source code of the page you're on. In this case, I use the main page because it has the menu link in blue. I then find the section where the menu links appear:

<div class="menu"><ul>
<li class="page_item page-item-28"><a href="http://savemoneyfundlife.com/how-to-...ney/">Complete Guide to Saving Money</a></li>
<li class="page_item page-item-5"><a href="Complete Guide to Saving Money ? Save Money Fund Life to Refinance your House</a></li>
</ul></div>

The links are wrapped in the class called "menu" ...

So now, we'll look for that in the "style.css" file ...

Look at the lines below ... again, in the "style.css" file:

.menu a {
    color: #128ee9;
    display: block;
    line-height: 41px;
    padding: 0 10px;
    text-decoration: none;
    font-weight: normal;
}
.menu ul li:hover > ul {
    display: block;
}
.menu li:hover > a,
.menu ul ul :hover > a {
 color: #ccc;
}

[mlseim]

Expanding more on HTML to CSS interpretation ....

<div class="menu"><ul>
< li class="page_item page-item-28"><a href="http://savemoneyfundlife.com/how-to-...ney/">Complete Guide to Saving Money</a></li>
< li class="page_item page-item-5"><a href="Complete Guide to Saving Money ? Save Money Fund Life to Refinance your House</a></li>
< /ul></div>

class="menu" ...
You'll see in the CSS file, the class shows up like this:
.menu (a period means class).

So we want to affect things wrapped in the class, between <div class="menu"> and </div>

Now, in the CSS,

.menu a {
color: #128ee9;
display: block;
line-height: 41px;
padding: 0 10px;
text-decoration: none;
font-weight: normal;
}
.menu ul li:hover > ul {
display: block;
}
.menu li:hover > a,
.menu ul ul :hover > a {
color: #ccc;
}

It is grouped by class and tag ...

.menu a

This would be anything wrapped in the menu class that is an HTML tag of a ... <a href>
So you can modify the color. color: #128ee9;

Looking further ...

.menu ul ul :hover > a {
color: #ccc;
}
This digs deeper and specifies how the links within <li> should be styled.
When you hover over it, the color changes to gray (#ccc).

So that's how you sort of go between the HTML and CSS ... determining what to change.

[websitemakernoob]

Thank you so much.

[websitemakernoob]

Hey so the wordpress theme updated and now I can't figure out how to change it back. I only managed to change the links that take me to other articles green, the rest are blue now.

I looked through the entire style.css file and I can't fix it back. Save Money Fund Life ? Helping you save money, so you can do the things you love.

BTW I'm not sure if I should ask here or not, if this is considered resurrecting a dead thread I'll delete this and start over, I looked for the forum rules and didn't see any, so let me know.

[websitemakernoob]

By the way, when I link my site, why does it look like that instead of just the url?

[mlseim]

In a previous post, I mentioned the correct way is to use child themes .... and the reason is, if you update the theme, it will overwrite your changes. But at the time of that post, you needed to make it work, so child themes were not used. Well, your WP theme got updated and viola, it overwrite your changes. Unless you saved a copy of the style.css file, you'll just have to work your way through it.

Fast forward to now, where the changes you made were overwritten. This time you should use child themes. Child themes are a way to force your own CSS style changes and script changes to an existing WP theme. If the WP theme is updates, the child themes are not, so they continue to overwrite the theme scripts.

The problem is, it takes a bit to learn how to use them.

There are some WP plugins that help:
https://www.google.com/search?safe=o...k1.wZpokObsn_E

You may want to do some Google searches on tutorials that describe more about child themes and how they work.

The answer to your question about URL's on this forum get changed to the 'title' line ... it's just the way this forum software works. I think you can edit it manually, but it is what it is. Most of us are used to it.

Sorry I don't have a better answer, or better help on restoring your changes. I feel for you ... I do the same thing from time to time.

[websitemakernoob]

The thing is I can easily change it back and do the code changed you mentioned earlier. But now it only changes the links in the side bar, or whatever it's called considering it's on the top of my page.

It doesn't change the header or titles anymore. I'm not sure if the update changed something or if I did something else and forgot what it was, but I've combed though the whole css.style file several times and I don't see anything that stands out to me as what I need to change.