Are there somewhere scss files for moono-lisa theme? I found css files but I need scss to custom some elements.
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.
Related
Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
I want to modify the "Format" dropdown for CKEditor within Mura, because I don't like the way Mura renames the headings. For example, an <h2> element is renamed to "Heading", and an <h3> element is renamed to "Heading 2". I get why they did this, because the <h1> is reserved for the page title, but it's confusing for content editors and accessibility.
I want to remove this renaming feature.
I believe the naming being used (like "Heading 1") is part of the CKEditor itself (reference).
As far as which HTML tag is actually used for those formats, Mura allows you to customize that. Look at the contentRenderer.cfc file under your theme's folder. Within that file they are setting variables that are used to customize the editor and page layouts. Specifically this section (reference):
// The following settings allow developers to change logical page structure.
// For example, some developers prefer H1 tags for their page titles,
// some prefer H2 tags - you can adjust this here:
this.headline='h2';
this.subHead1='h3';
this.subHead2='h4';
this.subHead3='h5';
this.subHead4='h6';
I'm not 100% sure but I think those settings are also used within the CKEditor in Mura.
I am using SASS on my Symfony2 and I read few articles about recommended architecture of sass.
base/ – contains global styles, such as resets, typography, colors,
etc.
components/ – contains each self-contained component in its own .scss
partial
layout/ – contains styling for larger layout components; e.g. nav,
header, footer, etc.
pages/ – contains page-specific styling, if necessary
themes/ – contains styling for different themes
utils/ – contains global mixins, functions, helper selectors, etc.
vendors/ – contains 3rd-party styles, mixins, etc.
main.scss – output file that brings together all of the above parts
In examples they are loading all of files at the same time, but I am concerned that I should separate different page styles and their loading.
I wanted to ask if loading all of .scss files at once doesn't slow the page? Why separation is not mentioned? Inheritance of variables? Why?
Separation of files makes for easier development - not having to search through hundreds or even thousands of lines of SCSS whenever you want to make a minor change is much better - but don't worry; it won't slow down your pages.
When SASS compiles it merges the SCSS files into one CSS file and often minifies it at the same time.
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.
I'm using the telerik TreeView.
I wonder if there is a way to change the dotted line used in the TreeView to a line that is not dotted(by uploading a background image file,or if telerik a have another solution.
http://demos.telerik.com/aspnet-mvc/treeview/draganddrop?theme=default
Based on your Theme please update below highlighted (three) images.
If you used CDN URL then please create this three images and add into your project.
Then copy all the css class which was used this three images.
Then update the image source and add "!important" in the style property.
Code from Original CSS File (ehich was used 'treeview-nodes.png' image)
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Default/treeview-nodes.png')}
Updated CSS code
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('YourNewPathComesHere') !important;}