\
**Category:** Questions\
**Created:** [October 9, 2018, 6:52am UTC](https://forum.litium.com/t/add-style-to-html-editor/273 "2018-10-09T06:52:20Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 9, 2018, 6:52am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/1 "2018-10-09T06:52:20Z")
Hi,
Is it possible to add style-options to the html editor? I’m looking for a way that the user can simple add a pre-defined class to any element.
Litium version: 7
---
**Author:**  [@marten](https://forum.litium.com/u/marten)\
**Post date:** [October 9, 2018, 6:53am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/2 "2018-10-09T06:53:56Z")
[https://docs.litium.com/documentation/get-started/configure/configure-the-html-editor](https://docs.litium.com/documentation/get-started/configure/configure-the-html-editor)
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 9, 2018, 8:27am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/3 "2018-10-09T08:27:44Z")
Thanks, I will try it out. Is it the same configuration in Litium 7? I am currently working on the beta version.
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 9, 2018, 1:49pm UTC](https://forum.litium.com/t/add-style-to-html-editor/273/4 "2018-10-09T13:49:43Z")
This configuration should be the same in V7 maybe with maybe minor adjustments.
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 18, 2018, 8:54am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/5 "2018-10-18T08:54:32Z")
I have tried to add a file at ~site/cms/editor/styles.js but I cant see any new styles in the html-editor. Should the file be placed anywhere else?
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 19, 2018, 8:12am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/6 "2018-10-19T08:12:12Z")
Did you solve this?
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 19, 2018, 8:19am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/7 "2018-10-19T08:19:39Z")
No, still the same…
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 19, 2018, 8:56am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/8 "2018-10-19T08:56:06Z")
I tried the example from Docs and it works fine, maybe some code is wrong in your js file.
You can add your js content here so we can check it (if not too long).
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 19, 2018, 9:00am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/9 "2018-10-19T09:00:26Z")
I did copy the js example from the docs and created a file styles.js and added it to the folder Site/CMS/Editor.
```
CKEDITOR.stylesSet.add('litium',
[
// Block-level styles
{ name: 'Blue h2', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red h3', element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Green', element: 'span', styles: { 'background-color': 'Green' } }
]);
```
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 19, 2018, 9:19am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/10 "2018-10-19T09:19:53Z")
Works fine in my solution, I just Rebuilded the solution and it’s there.
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 19, 2018, 9:21am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/11 "2018-10-19T09:21:05Z")
Are you using Litium 7?
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 19, 2018, 9:23am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/12 "2018-10-19T09:23:17Z")
No you chosed Litium 6.2.1 at the end of your query on top.
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 19, 2018, 9:33am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/13 "2018-10-19T09:33:46Z")
Ok, I can see that I was not clear in the first post. This issue is in Litium 7
---
**Author:**  [@steve.redstorm](https://forum.litium.com/u/steve.redstorm)\
**Post date:** [October 19, 2018, 9:36am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/14 "2018-10-19T09:36:58Z")
Ok then, this is a bug in V7 and product team know about it 🙂
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 19, 2018, 9:42am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/15 "2018-10-19T09:42:31Z")
Ok, thanks for info.
---
**Author:**  [@ullmark](https://forum.litium.com/u/ullmark)\
**Post date:** [October 19, 2018, 10:19am UTC](https://forum.litium.com/t/add-style-to-html-editor/273/16 "2018-10-19T10:19:58Z")
@emilsjog I don’t know if this helps but in our Litium 6.2 this is what I did to have it work the way I wanted.
As you’ve discovered the correct place for the files should be ex. “/Site/CMS/Editor/config.js” which was a bit unclear for me after reading the documentation (could be updated now).
I did a sass file that imported a subset of my styles (the one that makes sense in the editor) and had it be compiled into “/Site/CMS/Editor/editor.css”.
The only way I was able to alter the configuration of CKEditor was if I reconfigured it entirely in my “config.js” file, so I copied the configuration Litium does and made some changes:
```
CKEDITOR.editorConfig = function (config) {
config.resize_minWidth = 500;
config.resize_minHeight = 500;
//config.skin = 'litiumCustom';
config.templates_replaceContent = false;
config.extraPlugins = "iframedialog,netspell";//,divarea";
config.coreStyles_bold = { element: 'b', overrides: 'strong' };
config.coreStyles_italic = { element: 'i', overrides: 'em' };
config.allowedContent = true;
config.toolbar = [
['Cut', 'Copy', /*'Paste',*/ 'PasteText', 'PasteFromWord', '-', 'SpellChecker'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Link', 'Unlink', 'Anchor'],
['Image', /*'Flash',*/ 'Templates', 'Table', 'HorizontalRule', 'SpecialChar'],
['Maximize', 'ShowBlocks'],
'/', ['Styles'],
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['NumberedList', 'BulletedList'/*, '-', 'Outdent', 'Indent'*/],
['Source']
];
config.toolbarCanCollapse = true;
config.templates_files = [
'/Site/Cms/Editor/templates.js'
];
};
```
The changes I did was the following;
1. Remove unnecessary buttons like “flash” and stuff you don’t want the editors to add…
2. Removed the plugin “divarea”. This plugin changes so CKEditor is rendered in a “div” instead of an “iframe”. The problem with having it as a div, is that the styling from Litium Backoffice will leak into your editor and make your “editor.css” hard to get right.
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [October 29, 2018, 2:37pm UTC](https://forum.litium.com/t/add-style-to-html-editor/273/17 "2018-10-29T14:37:41Z")
This was confirmed a bug. Anyone know if it’s fixed in Litium 7?
---
**Author:**  [@patric.forsgard](https://forum.litium.com/u/patric.forsgard)\
**Post date:** [October 29, 2018, 3:49pm UTC](https://forum.litium.com/t/add-style-to-html-editor/273/19 "2018-10-29T15:49:10Z")
The bug didn’t make it for the 7.0.0 release but is fixed and will be included in next minor release included updated instructions on docs site.
Release date: TBD
---
**Author:**  [@PontvsXlent](https://forum.litium.com/u/PontvsXlent)\
**Post date:** [January 8, 2019, 2:45pm UTC](https://forum.litium.com/t/add-style-to-html-editor/273/20 "2019-01-08T14:45:34Z")
Edit: I missunderstood the part of “minor release” as 7.0.1, works great now in 7.1.0
We have tried adding some easy styles and it hasn’t worked in 7.0.1 for us:
Litium.Accelerator.Mvc/Site/Editor/styles.js:
CKEDITOR.stylesSet.add( ‘litium’,
[
// Inline styles
{ name: ‘Font: Amatic’, element: ‘p’, styles: { ‘font-family’: ‘“Amatic SC”’ } },
{ name: ‘Font: Lato’, element: ‘p’, styles: { ‘font-family’: ‘“Lato”’ } },
{ name: ‘Font: Open Sans’, element: ‘p’, styles: { ‘font-family’: ‘“Open Sans”’ } }
]);
---
**Author:**  [@emilsjog](https://forum.litium.com/u/emilsjog)\
**Post date:** [February 11, 2019, 2:28pm UTC](https://forum.litium.com/t/add-style-to-html-editor/273/21 "2019-02-11T14:28:11Z")
I’m trying to add the color button but it wont work. Anyone that has installed any plugin to the editor?
> **[Text and Background Color - CKEditor 4 Documentation](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_colorbutton.html)**
>
> Learn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plugins, widgets and skins are explained here, too. API reference and examples included.
[Next page](https://forum.litium.com/t/add-style-to-html-editor/273.md?page=2)