Joomla, personalizzare TinyMCE per il template JA Purity

JA Purity, il popolare template incluso nell'installazione base di Joomla, offre alcune classi per evidenziare un paragrafo con stili e immagini di sfondo (vedere figura). Quando si utilizza l'editor standard TinyMCE per scrivere i contenuti può essere comodo impostare delle scorciatoie per applicare questi stili al testo; vedremo come si possa ottenere questo risultato aggiungendo delle voci personalizzate al menù Styles dell'editor.

Come prima cosa accertarsi di avere queste impostazioni nei parametri di TinyMCE accessibili da Gestione plugin:

• Classi CSS template: Sì;
• Nuove linee: elementi P.

Poi effettuare una copia del file editor.css che si trova in

[Cartella Joomla]/templates/system/css/

Modificare la copia aggiungendo alla fine del file queste righe

p.download {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: URL(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: URL(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}
p.tips {
padding-left: 25px;
color: #EE9600;
background: URL(../images/icon-tips.gif) no-repeat top left;
}

Effettuare l'upload della versione modificata di editor.css in

[Cartella Joomla]/templates/ja_purity/css/

A questo punto, per essere sicuri che il browser carichi la nuova versione del file css è bene pulire la cache. Poi si effettua il login al backend e si crea un nuovo contenuto: nel menù a discesa dell'editor Styles oltre alle voci standard "caption" e "system-pagebreak", devono essere presenti "download", "stickynote", "tips" corrispondenti alle classi aggiunte sopra.

Questi stili sono pensati per la formattazione di un paragrafo e non funzionano se applicati a una parte di esso. Per selezionare un intero paragrafo posizionarsi all'interno di esso con il cursore e fare triplo click, quindi selezionare dal menu la voce desiderata.

Lo stile applicato è visibile direttamente nell'editor, per annullare la formattazione rimuovere il paragrafo con il menu Format a fianco di Styles. Detto così può sembrare macchinoso e in effetti TinyMCE non è sempre il massimo quanto ad usabilità , ma ci si prende la mano.

Ho aggiunto solo tre voci per evitare di copiare un grosso blocco di codice, ma nel file template.css di JA Purity si possono trovare altri stili da aggiungere: "p.message", "p.error", ".highlight". Basta usare lo stesso metodo e copiare le regole css impostate per la classe in editor.css come visto sopra.