Website CSS Styles are not working

Support
#1

Hi There,

So all of a sudden, my website has lost it’s styles. Looking to see what might have caused this.

Site Link

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

I am having a very similar problem and here is what I’ve tracked down, so far:

  • Changes to colors made with the Theme Customizer stopped working.
  • Using Developer Tools in Chrome I found mangled CSS code in the x-generated-css section of the style codes in the index.html file.
  • The mangled sections were all related to colors and had the same erroneous leading characters “%%post color%%” before the color setting (i.e. hsl, rgb, # etc.) and an extraneous “%%/post%%” after the color setting.
  • For instance:
    .widget ul li a, .widget ol li a, .x-comment-time {color:%%post color%%hsl(0,0%,18%)%%/post%%;}

The temporary fix is to cut and paste corrections for all these instances with the Edit Global CSS, function under Custom section with the Appearance, Customize tool. For instance:

.widget ul li a, .widget ol li a, .x-comment-time {color: hsl(0,0%,18%);}

Now the annoying part is I’ll have to hunt these things down and make raw CSS entries rather than simply using the Color settings in the Theme Customizer.

This is with WordPress 4.8.1 running X theme 5.0.3, Integrity stack.

#4

Hi @mikewaid,

Thanks for writing around! This may happen due to a syntax error in your Customizer, please check Appearance > Customize > Custom > Global CSS section and look for any syntax error. You may have invalid comments in there starting with //This is a wrong comment in CSS If you have something like this replace it with /* */ and remove the double slashes i.e //

Let us know how it goes!

#5

There were no entries in Global CSS section prior to this.

#6

Hi again,

I see you’re using cloudflare-nginx, make sure to purge it’s cache. Also check for auto minifier option and make sure it’s turned off.

Let us know how this goes!