Questo sito utilizza cookie, anche di terze parti, per migliorare la tua esperienza e offrire servizi in linea con le tue preferenze. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie

Rimani informato sugli aggiornamenti di SOS-OFFICE. Inserisci il tuo indirizzo e-mail: Informativa sulla privacy

Nel post di oggi vogliamo vedere come creare degli stili personalizzati per i propri articoli Joomla. In pratica creeremo delle classi di stile aggiuntive in modo da poter usare nei propri articoli delle regole di stile non proprie del template.

L'operazione più veloce sarebbe quella di aggiungere la nuova classe di stile nel file templates/nomeTemplate/css/template.css la classe, ma poi occorrerebbe specificarla manualmente (cioè non usando l'interfaccia dell'editor) nell'articolo, visto che la classe non sarebbe disponibile fra gli stili dell'editor.

L'ideale è far si che la nuova classe compia anche fra gli stili dell'editor in modo che sia semplice applicarla. L'ideale, quindi, è creare un nuovo file .css quindi chiedere sia all'editor che al template applicato agli articoli di utilizzarlo.

Se non chiedessimo anche al template di utilizzare questo file, una volta scelta la classe di stile nell'editor, questo stile non sarebbe utilizzato dall'articolo e dunque non sarebbe visibile nelle pagine del sito.

Vediamo subito come fare. Create nella cartella templates/nomeTemplate/css/ un nuovo file .css. Lo si potrebbe chiamare stiliPersonali.css.

Aggiungete al file appena creato tutte le classi che vi occorrono.

A questo punto dobbiamo chiedre al templete di usare questo file. Occorre modificare (anche attraverso l'interfaccia di Joomla) il file index.php del template predefinito. Occorre aggiungere all'intestazione del file, dopo i tag che creano il collegamento ai file .css del template, il tag che crea il collegamento al file di stile appena creato, così

<link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl; ?>
/templates/<?php echo $this->template; ?>/css/stiliPersonali.css" />

Salvate le modifiche e passiamo all'ultima operazione da compiere e cioè dire anche all'editor di usare questo file.

Scegliete Estensioni > Gestione plugin. Da questa pagina avviate la modifica  del plugin dell'editor che usate. Nell'esempio usiamo TinyMCE, ma il concetto vale tutti gli altri editor.

Fra le proprietà del plugin, individuate la proprietà Classi CSS personalizzate. Qui occorre specificare il nome del file CSS con le classi personalizzate (solo il nome del file NON il percorso).

joomla aggiungere nuove classi CSS all'editor

Salvate la modifica al modulo.

Ora la nuova classe è visibile fra gli strili dell'editor e sarà che applicata agli articoli.

la nuova classe di stile nell'editor

D'ora in avanti tutti gli stili aggiunti al nostro file delle classi personalizzate saranno automaticamente utilizzati sia dall'editor che dal template.

Joomla templates by a4joomla