Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Wysiwyg editor: how to add a stylesheet

Hi,
I would like to add a Google Font in the iframe of the editor (wysiwyg).
I would not like if possible to modify: /plugins/editor/design/wysiwyg.css
Thank you in advance for your help ! :)

Best Answers

  • x00x00 MVP
    edited December 2015 Answer ✓

    @CrazyLemon said:
    There is also this

    // If user wants to modify styling of Wysiwyg content in editor,
    // they can override the styles with this file.
    $CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');
    

    in class.editor.plugin.php
    But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

    You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

    This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

    grep is your friend.

Answers

  • You understand how style rules work right? You don't edit that file. You style over it.

    grep is your friend.

  • Apparently, it is not possible to override the style sheet because it is in an Iframe.

  • edited December 2015

    I also tried styling of WYSIWYG code and quote blocks to match the site styling but without success. @devs any plans of giving us a way to style the editor without writing into design/editor.css ?

  • edited December 2015

    There is also this

    // If user wants to modify styling of Wysiwyg content in editor,
    // they can override the styles with this file.
    $CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');
    

    in class.editor.plugin.php
    But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

    Creating a editor.css in your themes design folder will create a mess with editor styling because there will be no editor styling except the one in your editor.css. You can try it yourself, just create an empty editor.css file and check the editor disaster.

  • hgtonighthgtonight ∞ · New Moderator

    @CrazyLemon said:

    Creating a editor.css in your themes design folder will create a mess with editor styling because there will be no editor styling except the one in your editor.css. You can try it yourself, just create an empty editor.css file and check the editor disaster.

    So... copy the css file from the editor plugin to your theme and change the styles you want.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • And sync changes every time editor plugin updates? :)

  • @CrazyLemon said:
    And sync changes every time editor plugin updates? :)

    Use my solution. Therefore you are just over styling.

    grep is your friend.

  • hgtonighthgtonight ∞ · New Moderator

    @CrazyLemon said:
    And sync changes every time editor plugin updates? :)

    This is generally trivial with a decent diff program or a modern versioning system.

    I agree with @x00, cascade those styles mon!

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • I have a little problem with this solution:
    base_render_before() in class.themehooks.php is apparently loaded before base_render_before() in EditorPlugin() class

    Do you know a hook loaded later ? (for add $sender->addDefinition('editorWysiwygCSS', '...'))

  • why would this make any difference?

    grep is your friend.

  • I want to override the variable "editorWysiwygCSS". If i override this before the module editor, it doesn't work.

  • edited December 2015

    @x00 said:

    @CrazyLemon said:
    And sync changes every time editor plugin updates? :)

    Use my solution. Therefore you are just over styling.

    Tried it - multiple times. No joy.

    $Sender->addDefinition("editorWysiwygCSS", "/themes/vanilla-bootstrap/design/custom_editor.css");

    does nothing. If i replace custom_editor with editor.css then the result is messed up editor because of the already mentioned reasons.

  • Yep you are correct, it is an odd way of handling this.

    grep is your friend.

  • x00x00 MVP
    edited December 2015 Answer ✓

    @CrazyLemon said:
    There is also this

    // If user wants to modify styling of Wysiwyg content in editor,
    // they can override the styles with this file.
    $CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');
    

    in class.editor.plugin.php
    But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

    You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

    This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

    grep is your friend.

  • x00x00 MVP
    edited December 2015

    The buttons are outside the iframe. So style them normally.

    grep is your friend.

  • @x00 said:

    @CrazyLemon said:
    There is also this

    // If user wants to modify styling of Wysiwyg content in editor,
    // they can override the styles with this file.
    $CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');
    

    in class.editor.plugin.php
    But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

    You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

    This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

    Yup this works! @Clément ^
    Thanks @x00

  • Yes, It works !!! :)

    Thank you @x00 and @CrazyLemon !

Sign In or Register to comment.