ATTENZIONE: questa versione estesa è un puro esercizio di stile, un test dimostrativo di integrazione su Joomla! - Utilizzare con cautela :)

Joomla 3 integra il framework Bootstrap (versione 2.3) per una veloce e facile implementazione del web design. Inserire icone o testo formattato risulta semplice con i seguenti esempi (Typography) validi su qualsiasi template che supporta Bootstrap e jQuery presenti in Joomla!.


Attenzione! E' consigliato disabilitare l'editor di Joomla! prima di utilizzare queste parti di codice HTML nel contenuto.


<p>Esempio di Tooltip sulla parola <abbr title="Il nostro caro CMS">Joomla</abbr></p>

Esempio di Tooltip sulla parola Joomla


Blocco formattato

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

Blocco semplice in evidenza

<pre>Blocco semplice in evidenza</pre>

Utilizzare una delle centinaia di icone vettoriali disponibili (vedi elenco)

<i class="icon-thumbs-up icon-large"></i>



<span style="font-size: 50px;" aria-hidden="true" class="icon-picture icon-large"></span>



Aumentare a piacere le dimensioni delle icone

<div style="font-size: 40px;">
<i class="icon-zoom-in icon-large"></i>
</div>



Modificare anche il colore delle icone

<div style="font-size: 40px; color: #DC143C">
<i class="icon-question-sign icon-large"></i>
</div>



Allineare l'icona grande con il testo normale

<i class="icon-quote icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: left;"></i> testo....testo...

In questo esempio l'icona è allineata a sinistra (float: left;) ed ha le dimensioni di valore 60 (font-size: 60px;) ed i valori per i margini sul testo sono i seguenti: 30px 60px 30px 0px
Risultà semplice modificare il valore del colore dell'icona, la dimensione ed i relativi margini. Nel primo valore dei margini metti la metà del valore della dimensione dell'icona, nel secondo il valore intero e nella terza ancora la metà del valore, mentre l'ultimo valore rimane a zero.
Questi alcuni esempi di codice colore: GIALLO (255, 255, 0); ROSSO (255, 0, 0); CELESTE (0, 0, 255); VERDE (0, 255, 0); ROSA (255, 0, 255); MARRONE (204, 102, 0); GRIGIO (85, 85, 85);

<i class="icon-quote-2 icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: right;"></i> testo....testo...

Mentre questo esempio utilizza lo stesso codice del precedente tranne l'allineamento dell'icona che è impostato a destra (float: right;) ed ovviamente una differente icona............................

Utilizzare le icone come bottoni

<a class="btn btn-small" href="#"><i class="icon-star"></i></a>



    <a href="#" class="btn"><i class="icon-edit"></i> <strong>Modifica</strong></a>
<a href="#" class="btn"><i class="icon-trash"></i> <strong>Cancella</strong></a>
<a href="#" class="btn"><i class="icon-key"></i> <strong>Chiave</strong></a>

Modifica Cancella Chiave


Inserire dei tasti

<p><a href="#"  class="btn btn-large btn-primary">Inizio</a></p>

Inizio



Sempre tasti ma di colore e dimensione differenti

<a href="#"  class="btn">Default</a>
<a href="#" class="btn btn-small btn-info">Info</a>
<a href="#" class="btn btn-mini btn-success">Success</a>
<a href="#" class="btn btn-large btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-inverse">Inverse</a>

Default Info Success Warning Danger Inverse




Blocco di allerta con bottone di chiusura

<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Attenzione!</strong> Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.
</div>
Attenzione! Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.

    <div class="alert alert-error">
Blocco errore
</div>
Blocco errore

<div class="alert alert-error"><span aria-hidden="true" class="icon-cancel"></span>
Blocco errore con immaginetta...
</div>
Blocco errore con immaginetta...

    <div class="alert alert-success">
Blocco successo
</div>
Blocco successo

 <div class="alert alert-info">
Blocco informazioni
</div>
Blocco informazioni

<div class="alert alert-info"><span aria-hidden="true" class="icon-flag-2 "></span> Blocco informazioni con immaginetta...
</div>
Blocco informazioni con immaginetta...


Blocco in evidenza all'interno di testo con dimensione e float e classe

<div class="alert alert-error" style=" float:left; width:150px; margin: 0 10px;">Testo nel blocco...</div>Testo artico....
Blocco semplice in evidenza con dimensione e float
Questo esempio mostra come sia possibile inserire un blocco di testo all'interno di un paragrafo per evidenziare frasi o altre informazioni.
E' possibile agire sulla classe sostituendola con quelle viste in precedenza per cambiare lo sfondo od il colore del carattere. Per modificare le dimensioni del blocco è necessario variare il valore della larghezza (width:150px;) mentre per allinearlo a destra è necessario cambiare float:left; con float:right;

Extended Version

This demonstration site was made with the "extended" Joomla 3 version.

Contains many external free extensions already installed and some advanced configurations.

This site uses cookies, including third parties, in order to enhance the user experience and to provide services in line with your preferences. By closing this banner, scrolling this page or by clicking any of its elements you consent to the use of cookies. If you want to know more or refuse consent to all or some cookies go to the section Cookie Policy