Lost your custom CSS after 10.6 update? Read on…

  • Plugin Author room34

    (@room34)


    2 years, 2 months ago

    It has come to my attention that the change in version 10.6 that pushes CSS and JS file loading to the end of the page — which was done to allow the plugin to only load its files when there’s actually a calendar on any given page — may be overwriting some sites’ CSS customizations, depending on where you put those customizations.

    I am intending in the next update to add an option to revert to the old way. I would still recommend using the new way as it is more efficient, but I am aware that it can be disruptive if you’ve already established a set of CSS customizations you want to keep as-is.

    That said, you may be able to keep your CSS customizations functioning by loading them later (if possible), or by adding !important to each of the properties.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author room34

    (@room34)

    Update: Version 10.6.1 introduces a new Load CSS and JS on wp_enqueue_scripts action checkbox on the admin page. This is off by default, but turning it on will restore the old loading methods (CSS in the <head>, but loading CSS and JS on every page, not just ones with calendars.) If your CSS changes have been lost after the update, please turn on this setting and it should resolve the issue.

    We are exploring options for how you can retain your existing CSS customizations and use the new conditional footer loading method, but in the meantime this option to restore the old functionality is the recommended solution.

    Hey,

    Thank you very much for this additional option in 10.6.1. I have read the changes before updating to 10.6, but could not understand the real issue. Only when I have updated I saw, that the calendar looked really weird so I downgraded the plugin again.

    Now, with enabling the option in the admin page, it looks like before. Thanks!

    How do I need to change my CSS customizations in order to work with the new, more efficient, method? Is there somehow a guide in the internet how to structure them now? I am not an expert, therefore I need some keywords to search for it.

    Thanks and kind regards
    Greendroid

    Plugin Author room34

    (@room34)

    @greendroid The issue essentially comes down to the order the CSS is loaded. With this new method, your custom CSS gets loaded before the plugin’s CSS, so it is getting overwritten by the plugin.

    The most straightforward (but also “not technically correct”) way to address this would be to just stick !important on all of your CSS properties, like this:

    padding: 0 !important;

    (If you haven’t used !important before, it just needs to go right before the semicolon, with a space before it.)

    Of course this is kind of a “brute force” method and the better way is to either use a CSS selector that’s more specific than what the plugin has, or to load your CSS later than the plugin’s CSS. I’m still trying to think through a generalized best approach to this. In the meantime, just turning on the option to load the CSS and JS the old way is the best approach.

    Ideally I should have made this new method of loading an option you have to turn on, rather than off. I may do that with a subsequent update if this turns out to be a widespread problem.

    • This reply was modified 2 years, 2 months ago by room34.

    Ah okay. Now I understood the issue. I am already using some !important tags in my custom CSS but not all of them.

    So I will, for now, stick with the activated setting and see if you can find a better solution.

    Thanks for the great support!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Lost your custom CSS after 10.6 update? Read on…’ is closed to new replies.