Siamo tutti ottimi web designer con Protostar e Joomla! 3!

Joomla 3 integra il framework Bootstrap per una veloce e facile implementazione del web design.

Inserire icone, pulsanti, immagini con vari effetti o testo formattato risulta semplice come potete vedere nei seguenti esempi utilizzabili non solo su Protostar ma su qualsiasi template realizzato con il framework bootstrap.

ATTENZIONE: è consigliato disabilitare l'editor prima di utilizzare queste parti di HTML nel contenuto

<p>Esempio di Tooltip sulla parola <abbr title="Un grande viziatore di femmine, esperto in Joomla!">tonicopi</abbr></p>

Esempio di Tooltip sulla parola tonicopi

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>

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

<div>
<div style=" float:left; width:100px; margin:0 10px;" class="alert">Blocco semplice in evidenza con dimensione e float</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis. Etiam sed massa orci. Vivamus purus mauris, luctus eu placerat eu, suscipit et turpis. Vestibulum accumsan ultrices turpis sed sollicitudin. Sed et nibh orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis.
</div>

Immagine con effetto cornice polaroid. Se vogliamo allineare le immagini sulla stessa riga occorre dare il float left al div che le contiene.

<div>
<div style=" float:left; margin:10px;"><img src="/joomla35/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg" class="img-polaroid"></div>
<div style=" float:left; margin:10px;"><img src="/joomla35/images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg" class="img-polaroid"></div>
</div>

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; width: 50px; float:left; ">
<i class="icon-question-sign icon-large"></i>
</div>
<div style="font-size: 40px; color: #F9A302; width: 50px; float:left; ">
<i class="icon-music icon-large"></i>
</div>

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> 

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

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

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

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

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

Esempio di tasto che apre una finestra "modal" con all'interno una immagine

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
              <h3 id="myModalLabel">Titolo finestra</h3>
            </div>
            <div class="modal-body">
             <img class="img-polaroid" src="/images/headers/walden-pond.jpg" />
            </div>
            <div class="modal-footer">
              <button class="btn" data-dismiss="modal">Chiudi</button>
            </div>
          </div>
          <div class="bs-docs-example" style="padding-bottom: 24px;">
            <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Apri finestra popup</a>
          </div>

×

Titolo finestra

Chiudi

Questo l'elenco delle Icone disponibili in Joomla 3