Custom CSS lost on upgrade to 4.7

@jeherve I just went through and rewrote all of the CSS from scratch. Didn’t have time to wait or try on a fix. Really a pain though since I’m already swamped with work and had to spend hours on this for a client. I really hope the issue is fixed soon, because their are lots of people who will be affected by this and have no idea how to fix it. Average users don’t check these forums either.

I’m encountering same/similar issue. My site is loading old css that I know at one time was saved in WP css editor, but I had moved my css edits to the child css file itself (I don’t think I deleted, oops!). We did an upgrade and now it’s loading this css, but it isn’t viewable in any of the expected locations (old css editor or customizer). A couple of things,
(1) css under customizer > general > custom doesn’t override old css being added
(1.A) this css field remains if I deactivate jetpack
(2) customizer > additional css offers 3 settings, but from what i’ve read above, there should be more and mine may not be loading all features? (e.g., no revision option)
(3) (and this is really weird!) when i load customizer and adjust screen size (either by opening inspect and adjust height of panel or by exiting fullscreen of browser, the old css styles go away! Goosebumps! It only happens in customizer view.

I’d really appreciate any support here. let me know if I can share screen shots.

customizer > additional css offers 3 settings, but from what i’ve read above, there should be more and mine may not be loading all features?

A few themes appear to be conflicting with WordPress’ new Custom CSS editor view in the customizer. Your theme may be one of them. I’d recommend that you try switching to one of the default themes like Twenty Fifteen for a few minutes, and see if the additional controls appear. If they do, you’ll want to contact your theme author to let them know about the conflict between their theme and WordPress’ new CSS feature.

Let me know how it goes.

@nathanielbessent I’m having the exact same issue as you have. Is your issue solved yet? I’m trying a lot of things but I can’t get it to work. My custom CSS is gone and any other custom CSS plugin I’ve installed isn’t working (anymore)…

@kadushi-marketing I wasn’t able to get the issue resolved like I would have preffered. After the WP 4.7 update, my CSS was gone and the JetPack custom CSS was being overridden by the WP 4.7 custom CSS, making options such as the CSS history not even show up.

That wasn’t the only problem I was having. After the 4.7 update, something happened in my databases where the JetPack CSS was copied to the WP CSS, creating a rogue CSS file of sorts in the database. I had a backup of my CSS, but I also found my CSS in the JetPack history backups in the database. I disabled the JetPack CSS since it was interfering with the WP CSS and copied my CSS to the WP CSS editor. However, I found that some of my CSS was being overridden by CSS marked as !important that was being stored in the database. I deleted all of the CSS backups I could find in the database, but my CSS was still being overridden by the rogue CSS file I mentioned earlier.

Here is what I did to resolve this problem. I downloaded the plugin “Simple CSS Editor” and copied all of my CSS there. Then, I cleared out all CSS in the WP editor and inserted an open comment “/*”. I didn’t close the comment. I saved the CSS and this appeared to either override or comment out the CSS from the rogue CSS backup I couldn’t find in the database. Since then, I have been using the “Simple CSS Editor” without any problems or interference from JetPack CSS or the WP CSS and any backups pertaining to those editors in the database.

I know that is somewhat of a hack and doesn’t really fix the problem, but as of yet, the JetPack CSS/WP CSS conflict has not been fixed. Not sure if that is something my theme provider needs to fix, an issue with JetPack, or an issue with WordPress, but I was on a time crunch and didn’t have the time to go back and forth with them to resolve the issue correctly.

• This reply was modified 7 years, 6 months ago by nathanielbessent.

@nathanielbessent I believe we had concluded that the problem was linked to your theme a few months ago: it effectively broke WordPress’ CSS editor.
https://www.ads-software.com/support/topic/custom-css-lost-on-upgrade-to-4-7/page/2/#post-8560833

I’m glad you were able to find a work-around, although it seems to have been quite some work.

After the WP 4.7 update, my CSS was gone and the JetPack custom CSS was being overridden by the WP 4.7 custom CSS

That’s indeed how things are intended to work; if you use WordPress 4.7 or later as well as the most recent version of Jetpack, Jetpack doesn’t store or outputs any CSS anymore. It is all handled by WordPress itself. Jetpack’s Custom CSS module is only there to add extra functionality on top of WordPress’ CSS feature (like CSS preprocessing).

However, since your theme wasn’t compatible with WordPress’ CSS feature, nothing could work. Deleting everything and relying on a third-party system like Simple CSS Editor seems like the right thing to do until your theme is fixed.

@kadushi-marketing I would recommend a similar approach:

1. Make sure you’re running the most recent version of your theme.
2. If you are and still experience issues with WordPress’ CSS feature, let the theme author know and ask them if they’re planning on fixing the issue or have a patch they could send you.
3. Until they fix the issue, delete the CSS from WordPress’ CSS editor and place it in a third-party CSS editor like the “Simple CSS Editor” plugin.

I hope this helps.

@jeherve Yes, I suspected that it was a problem with my theme since it was working fine with other themes, but you know how theme providers can be. If they don’t have an answer then they just point you back to the plugin developer or just tell you to disable the plugin. I have had some other issues with my theme and JetPack compatibility, which is supposed to be resolved in an update, but who knows when.

I should have made it more clear, but I do realize that the JetPack CSS was supposed to integrate with the WP 4.7 CSS, allowing the extra features and letting the WP CSS input and output CSS. That was just my precursor to explain that something strange seemed to have happened in that process, on the database side, that duplicated a CSS file and stored it in a location I could not find, making that CSS file override other CSS, even when !important was used.

Another solution I found for that was to use a plugin that allows you to place CSS in the header or footer, allowing your custom CSS to be loaded first or last, but that solution didn’t play well with the particular theme I was using. It may work for other themes though if someone is experiencing a similar issue.

I really love JetPack and plan to use it with other themes that are compatible, so I didn’t mean to imply that JetPack should not be used if that was implied. Even if the CSS isn’t compatible with a particular theme, there are a lot of other useful tools that make JetPack worth having.

Thanks for the extra details!

If they don’t have an answer then they just point you back to the plugin developer or just tell you to disable the plugin.

If that may help you make your case with them, you could deactivate Jetpack and show them that the issue remains when no other plugin is activated; the conflict is between the theme and WordPress itself; no plugin is involved here. Don’t hesitate to send them to this thread if they need more info!

something strange seemed to have happened in that process, on the database side, that duplicated a CSS file and stored it in a location I could not find

To clarify, when you updated to WordPress 4.7 and Jetpack 4.4.2, Jetpack did indeed take the CSS that was previously saved as a safecss custom post type by Jetpack’s Custom CSS module, and migrated that CSS over to WordPress’ new CSS feature, that is also stored in a custom post type, named custom_css. Then, Jetpack stopped looking for existing CSS content in any of the post types, and let WordPress itself take it from there. All rendering of the CSS in the customizer and on the site is handled by WordPress.

However, and as you’ve then discovered, your theme actually breaks WordPress’ CSS editor in the customizer, as shown here:
https://www.pac-kevron.com/img/additional-css.JPG

Your theme blocks the page from displaying the field where you could edit the CSS that is saved in the custom_css post type. All you are left with are the other fields on the page, actually added by Jetpack’s Custom CSS module to bring extra features to WordPress’ CSS editor. If you were to deactivate Jetpack at this point, you’ll be left with nothing in that customizer panel, short of the panel title and the controls at the bottom.

That’s why it’s hard for you to find WordPress’ CSS and edit it at this point: your theme appears to stop you from looking at your CSS in the customizer.

Your theme’s Custom CSS solution, however, still works:
https://www.pac-kevron.com/img/custom-css.JPG

I hope this clarifies things a bit. Don’t hesitate to point your theme’s authors to this thread if they’re looking for more information!

@nathanielbessent Thank you for your reply and extra info. It’s really appreciated.

@jeherve Thank you as well for your support. I contacted the theme developer but so far the problem isn’t solved. I tried to delete all custom css and activated another custom css plugin. Also the theme’s custom css functionality. Nevertheless nothing really helps. The current issue is that the website is somehow still loading some ‘old’ css that I’ve entered before the updates. As I’ve read somewhere before, custom css is still stored in the database somewhere. And because I can’t edit it (because the functionality is missing because of my conflicting theme) I can’t change it…. Very frustrating. Maybe deleting it from the database is the solution but I’m really not an database expert..

custom css is still stored in the database somewhere. And because I can’t edit it (because the functionality is missing because of my conflicting theme) I can’t change it…. Very frustrating. Maybe deleting it from the database is the solution but I’m really not an database expert..

That’s indeed tricky. WordPress’ CSS editor stores your custom CSS in the wp_posts table in your database. To edit it without touching your database, you’d need access to the customizer. To access the CSS editor in the customizer, you’d need to switch to a different theme that doesn’t break the CSS editor panel. But if you do that, the CSS won’t appear in the panel since each version of CSS stored in your database is linked to a theme; once you switch to a different theme, the CSS isn’t displayed in the customizer anymore.

I’m afraid that at this point, your theme author might be your best option as they should be able to give you an option or a line of code you could edit in your theme to disable whatever is breaking WordPress’ CSS editor; that would allow you to see the CSS editor for a few minutes, remove the CSS code there, save, and then revert the changes in the theme to get the theme back to its original state until they release a fix.