How to get CSS changes to take effect

First we need to get that child theme set up right – your style.css file should not be a copy of the parent one – it should only have this at the top:

/*
Theme Name: Responsive Child
Author: Your name here
Template: responsive
*/

@import url("../responsive/style.css");

Then you will add only your changes there.

okay I did that now how do I make changes I can’t write code from scratch I just want to change a color code or font size

Try this plugin https://www.ads-software.com/extend/plugins/ultimate-tinymce/ for post/page content.

I want to change the theme elements colors etc. how do I do that just give one example of how to write for say the header menu text color change

The best and easiest way to do that is by using a browser tool such as Firebug – it shows you the CSS code that is setting the color and you can copy that code to your child theme and make the changes there. So for example, it shows this for the menu:

.menu a {
    border-left: 1px solid #585858;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    margin: 0;
    padding: 0 0.9em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 #000000;
}

If you just want to change the color, only copy that and change it to whatever you want:

.menu a {
    color: red;
}

I want to change the theme elements colors etc. how do I do that just give one example of how to write for say the header menu text color change

That’s not possible without writing code.

Okay, I tried that and it doesn’t take effect on the website. I’m using Mozilla with firebug to identify the code. it appears as you posted earlier but doesn’t take effect. I even went into the actual theme css file changed that one color code updated and see no change so I then changed back. I’m confused. This is the only code in the child style sheet right now. Is it correct should it change the text color of the menu

/*
Theme Name: Responsive Child
Author: Joe Isaac
Template: responsive
*/

@import url(“../responsive/style.css”);

.menu a {
color: 1dfa05;
}

That’s not what is in your child theme style.css file – you have all kinds of other stuff still there. You also are missing the hash tag before the color code.

Also, are you using the style.css file or Custom CSS (option in your theme)?

Okay I deleted the entire responsive child and going to start over. Any pointers before i start

I understand you shouldn’t modify the original theme css sheet because you will lose your modifications with future updates. So we create a child and make our changes there. What I don’t understand is why don’t changes I make to the original theme CSS file take effect on the website as I tried this just to verify if I was modifying the correct file. I changed one color code as discussed above and cleared my cache and had no effect on the published website. My logic makes me think something else is wrong your thoughts.

joe

why don’t changes I make to the original theme CSS file take effect on the website

Possible reason;
– Syntax errors in the stylesheet
– Your server/browser is caching old version of the webpage
– Your changes are being overwritten elsewhere in the stylesheet or other stylesheets. See CSS Specificity.