How to change site wording color?

Hi Lisa,
If you can post a link to your site, it will be easier for someone to help you with this kind of CSS stuff.

sorry about that, here you go!

https://www.artfulmusestudio.com/testingsite/

Does that theme have custom CSS or have you added that via a plugin? You really don’t want to modify the original theme files – as your changes will be overwritten and lost when the theme is updated.

It looks like most or all of those greenish blue items are links – and that color is set here:

a {
    color: #54B196;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
}

a:visited {
	color: #54b196;
}

So you can change that by adding this to custom CSS:

a, a:visited {
	color: #XXXXXX;
}

Obviously change the XXXXXX to whatever color you want. BTW, that site looks really pretty so far :).

Perfect! Thank you so much! Yes, I’m using a CSS plugin. So how would I figure out the code to do the same thing for changing font colors in nav bar, main titles and headings? Appreciate your help.

The best way to work with CSS is by using Firebug (addon for Firefox) – you can use it to see which CSS is setting the styles for any element – and then copy that code to the custom CSS and make the changes you want there. It takes a bit of playing around to learn Firebug – but it’s pretty easy and cool once you get it – there’s good info on the Firebug website. You can also make changes in Firebug – to see how they look before you make them in your actual site – and that’s really useful.

And you’re welcome too :).

– Open your website in Google Chrome
– Right click on a menu item and select ‘Inspect element’ [screenshot]

A new toolbar appears. That should reveal a bunch of CSS selectors on the right side of the toolbar. Try targeting them until you can get the colour change.

E.g;

.main-navigation a {
 color: red;
}

Nothing is working, I’m having the hardest time with this. Most everything is in uppercase and I want it to be just regular with uppercase first letter then lowercase. I need to also change the color and sizes. I’ve installed numerous plugins and none of them will work correctly.

I always use firebug as suggested above and am still having issues. I’m totally lost at this point. Some plug ins fix some of it but not all. There’s got to be an easier way to do this. Didn’t realize font sizing, color and uppercase was such a difficult thing to change. Sorry to be a pain but I’m dead in the water at the moment. I’ve tried everything I can think of, I’m out of ideas.

Can anyone help?

Which elements do you want to change?

I want to remove the uppercase from my nav bar pages, the blog post titles and the main logo wording, everything that is in uppercase. Also, I installed a plugin for the custom CSS and wondering if when I do any updates to the theme or wordpress if that stays in tact or not. I’m not changing the parent theme or any code in the stylesheet. Is it better to use a child theme for the custom CSS changes or is it o.k. to use the CSS Manager plugin I installed?

Also, another issue that popped up yesterday with this theme is I tried deleting a page which deleted fine from the dashboard but when you view the site the page still appears in my menu, it won’t go away. The only thing I can think of is I installed a couple different plugins trying to set up a gallery or portfolio page for the site and couldn’t figure out how to do it so I ended up deactivating and then deleting the plug ins but the page won’t delete now. Any ideas on how to get rid of this one page?

Thanks for your help everyone ??

You can use the custom CSS or the child theme style.css – but it’s probably easier to keep all of it in one of the other – I’d go with the child theme style.css.

These are all the places in the theme that’s transformed to capitals so you can change them all with this CSS:

.site-title a, button,
html input[type="button"],
input[type="reset"],
input[type="submit"], th, .main-navigation a, .main-small-navigation .menu a, .entry-title,
.entry-title a, .entry-meta, .page-title, .edit-link a, .comment-author cite,
.comment-author cite a, .comment-meta, .widget-title,
.widget-title a {
   text-transform: none;
}

As to the page, are you using a Custom Menu? Have you removed the page from there?