editor-style.css not loading in the front end

  • Resolved mahsaad

    (@mahsaad)


    8 years, 8 months ago

    Hi,

    I’m using the latest version of advanced tinymce v4.1.9, and my theme is the Vantage from siteorigin.

    The theme doesn’t come with the editor-style.css loaded, so i’ve followed the instruction in the Advanced Tinymce settings I was able to add the Format drop down list loaded with the css classes that i’ve added in the editor-style.css

    When applying a style from the list on an element, i can see the style is being applied on the element in the editor, on the front end of the site it’s not getting applied.

    After some debugging, I looked in the page source, the class is added in the element, but not getting applied

    Furthermore, I looked to see if the editor-style.css is loaded in the page, and it wasn’t.

    I cleared the browser cache, tried a different browser, used incognito didn’t help

    after reading in a lot of forums, some mentioned to make sure that the function wp_head() is loaded in the header.php, i checked and it was there.

    I also use the plugin Simple Custom Css, thought it might be causing a conflict, deactivated it, tried again, same issue

    I deactivated all my plugins except for the Advanced Tinymce, same issue

    Any suggestion would be very appreciated

    Thank you,

    https://wordpress.org/plugins/tinymce-advanced/

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

    (@azaozz)

    8 years, 8 months ago

    The theme’s editor-style.css is supposed to be a subset from the theme’s style.css. It has to contain only “simple” styling applicable to the post content (not all of style.css). In addition it has to “work well” with the default stylesheets loaded in the editor.

    If you’ve made editor-style.css yourself, add it to the bottom of style.css. If you make changes in one, make sure to sync them to the other. Or you can do some @import url( ... ); in style.css to add both the front part and the editor part, etc. More info: https://developer.mozilla.org/en/docs/Web/CSS/@import

    Thread Starter mahsaad

    (@mahsaad)

    8 years, 8 months ago

    Hi Andrew,

    Thanks for the reply.

    I find adding the style in 2 different files is a bit not practical, the @import is better

    Even though, I’ve added the @import in the theme style.css didn’t do the trick (I’ve made sure that the path of the editor-style.css is the correct one)

    Anyway, I’m using the custom css plugin, so I just add styles there, of course it won’t be accessible in the format ddl.

    I was wondering if it’s possible in the next release to add more font sizes, say up to 72px. Before updating the plugin to the latest version, I’ve added extra sizes in the tinymce-advanced.php, which worked fine, but of course after updating to the latest version all gone.

    The reason, it’s sometimes want to use bigger font size for the heading tags on the home page, but not on the other pages

    If the editor-style.css worked, that wouldn’t be a problem

    Thanks again Andrew

    Regards,

    Plugin Author Andrew Ozz

    (@azaozz)

    8 years, 8 months ago

    You can use another plugin to set the TinyMCE options directly: https://wordpress.org/plugins/advanced-tinymce-configuration/. Then uncheck the checkbox in TinyMCE Advanced to replace the font sizes drop-down setting.

    The editor-style.css is meant to make the editor look as close as possible to the front-end. You can use it to pass some class names into the TinyMCE menu, but that is best set and synced by hand.

    Thread Starter mahsaad

    (@mahsaad)

    8 years, 8 months ago

    Hi Andrew,

    Thanks for the reply

    I’ll check the other plugin

    Thanks again,

    Regards,

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘editor-style.css not loading in the front end’ is closed to new replies.