Use custom css in your WYSIWYG in Elxis CMS is very simple and we'll explain to you a small trick.
This guide of elxisitalia.com is valid only for Elxis 2009.x version.
With your favorite program (eg dreamweaver and similar) create a css file and go to define your own classes you want to use it in WYSIWYG Elxis CMS. Save this file in the template/template_name/css as editor.css .
Notice: In these css classes don't use text alignments. You'll can have problem if in your site you must use RTL languages (eg Arabic, Hebrew etc.)..
In the administrative control panel of Elxis CMS go to the menu item bots "and "sites bot".
In the bots list, selected TinyMCE WYSIWYG Editor and click on edit at the right top of your control panel.
Perform the following settings:
At this point, your css will be listed into your WYSIWYG editor.
(mosimage)
NOTE: In you don't see the css you have defined in editor css, check the url insert in the field of TinyMCE WYSIWYG Editor bot. If the url is OK, clean cache of your browser.
Not yet finished, because the classes in editor.css should be called in front-end.
With your preferred software (eg Dreamweaver or silmili) open the template_css.css file and insert in the following lines:
| @ import url ( "layout.css"), / * layout css file * / @ import url ( "editor.css"), / * editor css editor WSMYG used in the administrative area * / @ import url ( "customize.css"), / * Use this file to customize your website * / |
Save the your template_css.css file in the templates/template_name/css
Open template_css-rtl.css file and edit in the following order:
| @ import url ( "layout-rtl.css"); / * layout css file * / @ import url ( "editor.css"), / * editor css editor WSMYG used in the administrative area * / @ import url ( "customize-rtl.css"), / * Use this file to customize your website * / |
Save it in the templates/ template_name/css
If you have defined a background color in the body class in the layout.css file, the same you'll have the same backgroun color in the text field of the editor WYSIWYG too.
To solve the problem, define the body class in the customize.css file.
Finish!
Guide developed by Speck - Elxisitalia.com