Elxisitalia.com!
All about CMS Elxis open source.

italian english

Use custom CSS in the editor WYSIWYG Elxis CMS.

Email

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.

Creating file editor.css

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.)..

Configure mambots "TinyMCE WYSIWYG Editor"

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:

  • Template CSS classes: NO
  • Custom CSS Classes: enter the url as http://www.youdominename.com/templates/nome_template/css/ editor.css
  • Save the configuration.
  • Quit Elxis and restart your administration area.

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.

Use the file editor.css 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

How to solve the problem of the background color in the WYSIWYG editor.

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

Polls

Quali estensioni desideri?

Results

User Login





No account yet? Create account

Who's online

We have 30 guests online
Valid XHTML 1.0 Transitional!
CSS Valido!
RSS 0.91
RSS 1.0
RSS 2.0
ATOM 0.3
OPML