By Esquilo (Own work) [GPL], via Wikimedia Commons

Not too long ago freelancer/co-worker of mine asked for some assistance. Apparently, they had been working for hours trying to accomplish what should have been a simple task: adjusting CSS plugin style within the style.css file of their child theme.

We began to dissect the issue. We had been able to successfully ID the exact elements that we wanted the custom style applied to, by using Firebug (Firefox  browser add-on). Strangely, no matter what we tried, nothing seemed to work.

Needless to say, it became very frustrating – we tried to apply the style change in the child theme style.css using classes, we tried using IDs, we tried a combination of ID and classes, we tried all combinations we could think of along with the infamous !important. We were clearly able to see and identify the css elements that needed to be modified to effect the change yet still no change.

I cannot tell you how many times, during the process of adding changes to the stylesheet I commented, “this should work”. And yet, it did not (the “dangit” method was soon becoming much more harsh of terms).

After a while (too long a while) we decided to add the style to the plug-in stylesheet itself, and not the stlye.css. Our plan was to use this to test the ID and if we were in fact using the correct mark up. We added our modifications and saved the file. Lo and behold, the changes appeared on the front end of the website.

Keeping the code in a core plugin file meant that we would have to replace this code again anytime we upgraded the plugin. I assure you, doing this on a number of sites makes it nearly impossible to keep up with updates and leaving a plugin without an update can become a huge security risk. Although this was less than ideal, it was an option in order to continue work on the site development while having yet another set of eyes take a look for a fresh perspective.

Within minutes of asking our collaborative team, we discovered the solution.

Very near, but not quite to at, the bottom of the file was the following:

.gfield_label {

display: none !important;

)

Notice the use of ) rather than }. Due to this simple syntax error, any styling that we had added after that error was ignored.

Sometimes, what appears to be a most difficult and complex challenge ends up being resolved with a VERY simple solution.

When something ‘really should’ work, but doesn’t, you can also try the css validator: http://jigsaw.w3.org/css-validator/ .

We removed the code from the core plugin file and corrected our syntax error in the child theme style.css. Once the error was corrected, our original modifications worked fabulously and took effect exactly as expected.

The moral of the story? The result should have clued us sooner that, yes, this really should be working – especially after having actually said those words so many times throughout the ordeal.

That being said, here is a great [paraphrased] syntax error catching tip that has been shared on more than one occasion:

As a general rule of thumb, if you are making additions or modifications to a stylesheet, and they are NOT showing up – or if previously-working styling stops rendering – then you likely have a syntax error somewhere.

If it isn’t immediately clear by looking at the bottom of the stylesheet, start adding rules that you know will have a noticeable effect into the stylesheet. (Something like… “body {background:blue !important;}” that will display a blue background on your entire site)

Save and check if you can see your test code working on the front-end of your website. If it is not working, the syntax error is still located above it’s location so move your test code further up into the stylesheet until the change does appear on the front-end.

Once you see the test code display on the front-end of your site, you will know that the section below your test code and above the last line you had placed the test code in the style sheet, is where the problem is. Then look for and correct any syntax errors.

Hopefully the next time any of us have this experience we will be able to remember and apply this tip for a quick and simple resolution.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.