Changing the color scheme of a wordpress theme

0
votes

I am decent with coding in html and css, but php is very new to me. I am looking to change the color scheme of this theme: http://bwthemes.com/themes/?theme=wellness. I have searched the css files endlessly looking for where the colors are for the nav menu bg, the body, and the wrapper, but have found nothing... I am really confused at this point and am thinking that the color schemes are saved externally on a website or in a folder, but I can't find this. If you look at the page source you can see the colors, but on the actual style sheet I can't find it.

By posting this Im hoping someone has created a theme like this here and can help me out. Any thoughts/guidance helps and I appreciate it! Thanks a lot in advance.

3
phphtmlcsswordpress
Are you trying to edit the CSS or toggle themes in the dashboard? - Scott Sword
Oh I should have mentioned that. In the dashboard it allows me to switch between 4 different color schemes. I'd like to make my own scheme and add it or just manually add it. - Brian Morton

3 Answers

1
votes

Just to be clear the "Theme" is called "Wellness" and it has multiple "skins". You don't want to create a new theme you want to create a new skin. That being said it looks like you can toggle through various skins the current one that is displaying in the link above is the skin1 located at this path.

wp-content > themes > wellness > skins > skin1.css

If you go into that directory you should be able to see all of the available skins. And simply add a another stylesheet and use the same naming convention. So if the last one is skin3.css then your custom sheet should be skin4.css.

This assumes that the developer of the theme didn't hard code the skins into the theme, and in that case you will have to hack the php...which is a different engagement and w/o access to your server side code I/we can't really give you much more guidance.

0
votes

it looks like the css file is called superfish.css?ver=3.4.1

if youre using firefox.. firebug is a great tool for exploring css on a page. you could download the extension for free.

then right click on anything in the page and click 'inspect element' on the right side of the page you should see all the css properties

0
votes

Use Google Chrome's Inspect Element feature or Firebug. Both are excellent resources for web development.

For example, in Chrome's developer tools, you'll be able to see something like this when you right click on the navigation and choose Inspect Element.

You can change the styles here and see changes real-time. Also, as you can see in the screenshot below, there is a link to the stylesheet. It's skin1.css.

Of course, there are other stylesheets too. You can see them with View Source option.

enter image description here

I hope that answers your question!