Support » Plugin: TinyMCE Custom Styles » Strange error caused by Caching

  • Resolved Jackalope Co.

    (@thedonquixotic)


    I installed TinyMCE Custom Styles to make it easier for me to apply styles when I am writing blog posts. After developing my custom theme locally I deployed it to my host.

    After deploying it, I decided to add caching using W3 Total Cache plugin. For some reason, my admin panel is now loading my shared-styles.css file and applying the styles not just the the parts contained within the post, but everything outside of it too, making it almost impossible to read some parts of the website.

    So what am I supposed to do here? Why is the shared styles being loaded like this on the admin side?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tim Reeves

    (@tim-reeves)

    Hi David,

    perhaps the problem is not due to the Cache plugin, but a misconception:

    The shared style sheet file is enqueued to be included on frontend pages (via the usual <link> tag in the <head> area) using the standard WordPress function wp_enqueue_style.

    So, as with most other stylesheets, the statements in it will automatically apply to the whole HTML page. What you need to do, is to define class names which will not collide with any already in use by the theme – and never define styles for html elements without a limiting class name which would apply to all elements of that tag type.

    Bad: li { font-size: 2em; }
    Good: li.jlbig { font-size: 2em; }

    Hope this helps, let me know.

    Tim

    • This reply was modified 1 year, 4 months ago by  Tim Reeves.
    Plugin Author Tim Reeves

    (@tim-reeves)

    An afterthought after re-reading your post:

    You mention that styles are being applied to the backend of WordPress? That sounds like a problem with the cache plugin.

    Both stylesheets are passed to tinyMCE by calling: add_filter(‘mce_css’, …)

    What this causes to happen is that they are linked in to the HTML document which is the source for an <iframe>, which is the editing area of tinyMCE. So there is no (normal) way that they could also apply to the main HTML backend page. If they are, then something has gone severly amiss, and I can only suggest that you debug the actual output page and see what is happening.

    Cheers,

    Tim

    Hey @tim-reeves Thank you for responding! The issue turned out to be me enqueueing my styles wrong. I was enqueuing them but not registering them so it was applying the styles to all pages regardless of if the person was front or backend side.

    Also I was wondering what the compatibility with the plugin is with Gutenberg? I’m thinking about switching just because my editor experience has been kind of meh recently, and was thinking it might be good to early adopt before it ships in 5. But also love your plugin and don’t want to use that functionality!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Strange error caused by Caching’ is closed to new replies.