Creare una toolbar nell'area back-end di Joomla

Quando per scelta o necessità ci si trova a dover lavorare soprattutto nel back-end di Joomla piuttosto che nel front-end, è sicuramente utile organizzare il pannello di controllo in modo da avere a portata di mano le funzionalità più utili e d'uso più frequenti.

Con gli ultimi aggiornamenti di Joomla è possibile creare voci di menu aggiuntive ma rimane sempre l'impossibilità di creare una toolbar con i bottoni che richiamano le funzionalità d'uso più frequenti. Personalmente sono sempre ricorso, a malincuore, a componenti aggiungitivi che molto spesso per questa semplice necessità portavano in dote corpose librerie con tutto quello che significa: controllo della compatibilità con i nuovo aggiornamenti e rischio di attacchi se non ben sviluppata e opportunamente testate.

Per questo, vorrei suggerire un metodo molto semplice, che senza installare nuovi moduli o plugin, consente di creare una semplice toolbar: in pratica, la soluzione consiste nel creare un modulo del tipo custom html con opportune impostazioni css da pubblicare nella posizione cpanel o icon.



Procedere in questo modo:
- Andare in Estensioni >> Moduli
- Selezionare area amministratore
- creare un nuovo modulo del tipo Personalizzato (custom html)

Selezionare l'area codice nell'editor, in modo da rendere più agevole l'inserimento dei tag html e inserire la seguente struttura div:

<div class="icon-wrapper">
<div class="icon-item">
<a href="/e-ancora/articoli-community-3x.html?___="> <img src="/images/icone/software.png" style="display: block; margin-left: auto; margin-right: auto;" />link 1</a>
</div>
</div> 

La struttura div appena riportata è solo un esempio, ognuno potrà personalizzarla come meglio crede. L'attributo href del tag a dovrà contenere l'indirizzo della funzione del back-end desiderata. L'attributo src del tag img dovrà puntare ad un'immagine icona desiderata: ovviamente è opportuno che le icone abbiano la stessa dimensione, preferibilmente 48 o 64 pixel.

Nella cartella del template Isis creare un file custom.css (se non esiste) e aggiungere le seguenti classi css:

.icon-wrapper {
float: left;
display: block !important;
width: auto !important;
height: auto!important;
line-height: 12px !important;
background: none;
}

.icon-item {
text-align: center;
margin-right: 15px;
float: left;
margin-bottom: 15px;
}

.icon-item a {
background-color: #fff;
background-position: -30px;
display: block;
float: left;
height: 97px;
width: 108px;
color: #565656;
vertical-align: middle;
text-decoration: none;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition-property: background-position, 0 0;
-moz-transition-property: background-position, 0 0;
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
}

.icon-item a img {
padding: 10px 0;
margin: 0 auto;
}

È possibile creare tanti moduli custom html per quante icone si vogliono, oppure creare un unico modulo con tante strutture div, una per ogni icona. Chiaramente sarà possibile abilitare anche il livello di accesso desiderato.

 

Commenta questo articolo sul forum
Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Alcune informazioni su di me:
Programmatore da oltre 30 anni, soprattutto nel campo dei software gestionali e sviluppatore di siti web con joomla: da semplici vetrine aziendali fino alla realizzazione di complessi sistemi informativi integrando il cms joomla con moduli sviluppati ad hoc o personalizzando fortemente moduli e componenti già esistenti.


Ho anche scritto:
         ✔ diventa autore su Joomla.it