Elxisitalia.com!
Il portale sull'open source Elxis CMS.

Home News Downloads Guide Elxis F.A.Q. Elxis Wiki Elxis Forum Link SiteMap Info

Usare css personalizzati nell'editor WYSIWYG in Elxis CMS.

Utilizzare css personalizzati nel vostro WYSIWYG in Elxis CMS è abbastanza semplice e qui vi viene spiegato un piccolo trucco.
Questa guida di elxisitalia.com è valida solo per le versioni Elxis 2009.x

Creazione file editor.css

Con il vostro programma preferito (es. dreamweaver e simili) create un file css e definite le vostre classi che desiderate utilizzare nell'editor WYSIWYG di Elxis CMS.
Il file così creato lo salvate nella cartella template/nome_template/css come editor.css.

Avviso: Evitate di utlizzare allineamenti di testo perchè potrebbero insorgere problematiche di layout nel momento in cui dovete andare a gestire anche lingue RTL (es. arabo, ebraico etc.).

Configurazione mambots "TinyMCE WYSIWYG Editor"

Nel pannello amministrativo di Elxis CMS andare sulla voce menu "mambots" e selezionate "mambots del sito".
Dall'elenco selezionare TinyMCE WYSIWYG Editor e cliccate sull'icona edita in alto a destra del vostro pannello di controllo.
Eseguite i seguenti settaggi:

Template CSS classes: NO
Custom CSS Classes: inserire l'url esempio http://www.vostrodominio.com/templates/nome_template/css/editor.css
Salvare la configurazione.
Uscire da elxis e riavviare la vostra parte amministrativa.
A questo punto il vostro css sarà richiamato nel vostro editor WYSIWYG.

guida/css-editor1.jpg

NB.: Nel caso in cui non si dovesse verificare una situazione come mostrata in figura, assicuratevi di aver definito correttamente l'indirizzo nell'apposito campo del mambot TinyMCE WYSIWYG Editor, e in caso di riscontro positivo effettuate una pulizia della cache del vostro browser.

Ricordatevi che le classi presenti in editor.css dovranno essere richiamate anche in front-end.

Utilizzare il file editor.css in front-end.

Con il vostro software preferito (es. Dreamweaver o silmili) aprite il file template_css.css
ed inserite le linee riportate sotto.

@import url("layout.css"); /*layout css file*/
@import url("editor.css"); /*editor css used in editor WYSIWYG administrative area*/
@import url("customize.css"); /*Use this file to customize your website*/

Salvare il file.

La stessa cosa la dovrete fare anche per il file template_css-rtl.css

@import url("layout-rtl.css"); /*layout css file*/
@import url("editor.css"); /*editor css used in editor WYSIWYG administrative area*/
@import url("customize-rtl.css"); /*Use this file to customize your website*

Risoluzione al problema del colore di sfondo dell'editor WYSIWYG.

Se nel file layout.css avete definito un colore di sfondo per la classe body, questo si ripercuoterà anche sullo sfondo del campo testo dell'editor WYSIWYG.
Per ovviare il problema definite la classe body sempre nel file customize.css.

Con questo e tutto!

Guida realizzata da Speck - Elxisitalia.com il supporto di elxis.org in italia.

Indietro