-1

I make changes to my style.css file but they do not take effect on the website. Style.css is located here: /wp-content/themes/academy/style.css

I have made changes to it previously and the changes did take effect, but now I'm making new changes and they're not. I have tried adding the CSS with the changes via FTP, and I have also tried using the "Editor" from the Wordpress menu. If I view the source of the CSS file in the browser the changes do not appear. I can pull the file off my server with FTP and look at the code and see that the CSS is there. I can also see the CSS in the Wordpress editor. I have cleared the cache and cookies, refreshed the browser, used different browsers (Firefox and Chrome). The CSS that I am entering is valid. Just a simple:

#bg-image {
 position: fixed; 
 top: 100; 
 left: 0; 
 min-width: 100%;
 min-height: 100%;
 }

I've waited about an hour thinking there might be a delay. It's still not working. My main questions are:

1.) Do I need to somehow "trigger" the new file to actually take effect? 2.) Is Wordpress doing something internally to cache the old file and if so, can I turn this feature on/off when I need to?

1 Answer 1

1

A couple of thoughts for you.
--Are you creating a new theme from scratch? If so, drive on. If you are modifying an existing theme, changing another's theme style.css file can be trouble. If you are modifying an existing theme, stop what you are doing, and spend 30 (yup, 30!) minutes to learn how to use a child theme. Totally easy thing to do, will save you loads of time later. (Think of a child theme as magic tissue paper that you 'lay over' a theme... you can see thru it to the existing theme, but whatever you place on the tissue paper will override the content below it... And when it comes time for an upgrade to the original theme your work doesn't get erased. Been there, done that. Ugh.) Its also handy in that you can turn the child theme off with once mouse click. That is good for checking if an issue came from something you did or was present in the original theme...

--When using firefox with firebug or chrome, and you look at the style usage, its possible that something is overriding your settings. (Use firebug addon to Firefox, or in Chrome, right click on Inspect element.) When there is an override you will see the style specifics lined out. You can generally tell what the override is (but not always..) Not sure why, but sometimes what Chrome shows doesn't match what Firebug shows in the browser. Try to look at the code on both browsers. Sometime nothing shows up. I had an issue today with an element not visible. Spent an hour looking thru the browser feedback. Couldn't find a thing. I tried scanning thru the template style.css with the classname. The doggone theme developer had deliberately shut the combo off with a CSS of display:none. An neither Chrome or Firebug found that line of code.

--Also, Don't forget the CSS Specificity rules. Not very intuitive, but consistent. its possible your settings although valid are overwritten by something else with greater specificity value.

--Don't forget that with responsiveness, the same entry could be done multiple times within the same style.css sheet, with very minor changes. You should be able to see this in Chrome (inspect element) or in firebug, but its unnerving. You have to copy the @media settings to completely override. (and here's a stupid question.. if folks look at the site on cell phone, or on an ipad or even by desktop why are there ten (not three, ten!) different @media settings? ugh.)

--Its possible that you have a cache issue. (I doubt it, but it is possible.) You might try clearing the cache. (note: generally on a cache issue, the site works on one browser but not the other...if both fail, I doubt its a cache thing)

Good luck with this stuff.

Not the answer you're looking for? Browse other questions tagged or ask your own question.