Search code examples
ckeditorckeditor4.x

Are there scss files for moono-lisa


Are there somewhere scss files for moono-lisa theme? I found css files but I need scss to custom some elements.


Solution

  • No

    As you can read in the original depot, there are only css files :

    https://github.com/ckeditor/ckeditor4/tree/major/skins/moono-lisa

    But you can override the moono-lisa theme in creating your own including the original css files, and override theme. Take a look at this : https://ckeditor.com/docs/ckeditor4/latest/guide/skin_sdk_intro.html#the-anatomy-of-a-skin

    And specially the files editor.css with include tags

    Extract of the readme :

    Directory Structure

    CSS parts:

    • editor.css: the main CSS file. It's simply loading several other files, for easier maintenance,
    • mainui.css: the file contains styles of entire editor outline structures,
    • toolbar.css: the file contains styles of the editor toolbar space (top),
    • richcombo.css: the file contains styles of the rich combo ui elements on toolbar,
    • panel.css: the file contains styles of the rich combo drop-down, it's not loaded until the first panel open up,
    • elementspath.css: the file contains styles of the editor elements path bar (bottom),
    • menu.css: the file contains styles of all editor menus including context menu and button drop-down, it's not loaded until the first menu open up,
    • dialog.css: the CSS files for the dialog UI, it's not loaded until the first dialog open,
    • reset.css: the file defines the basis of style resets among all editor UI spaces,
    • preset.css: the file defines the default styles of some UI elements reflecting the skin preference,
    • editor_XYZ.css and dialog_XYZ.css: browser specific CSS hacks.

    Other parts:

    • skin.js: the only JavaScript part of the skin that registers the skin, its browser specific files and its icons and defines the Chameleon feature,
    • images/: contains a fill general used images,
    • dev/: contains SVG and PNG source of the skin icons.