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>
Blocco semplice in evidenza con dimensione e float
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.

 


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>
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...

 


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>

 


Questo l'elenco delle Icone disponibili in Joomla 3

 

 icon-home
 icon-user
 icon-locked
 icon-comments
 icon-comments-2
 icon-out
 icon-redo
 icon-undo
 icon-file-add
 icon-plus
 icon-pencil
 icon-pencil-2
 icon-folder
 icon-folder-2
 icon-picture
 icon-pictures
 icon-list-view
 icon-power-cord
 icon-cube
 icon-puzzle
 icon-flag
 icon-tools
 icon-cogs
 icon-cog
 icon-equalizer
 icon-wrench
 icon-brush
 icon-eye
 icon-checkbox-unchecked
 icon-checkbox
 icon-checkbox-partial
 icon-star
 icon-star-2
 icon-star-empty
 icon-calendar
 icon-calendar-2
 icon-help
 icon-support
 icon-warning
 icon-checkmark
 icon-cancel
 icon-minus
 icon-remove
 icon-mail
 icon-mail-2
 icon-drawer
 icon-drawer-2
 icon-box-add
 icon-box-remove
 icon-search
 icon-filter
 icon-camera
 icon-play
 icon-music
 icon-grid-view
 icon-grid-view-2
 icon-menu
 icon-thumbs-up
 icon-thumbs-down
 icon-cancel-2
 icon-plus-2
 icon-minus-2
 icon-key
 icon-quote
 icon-quote-2
 icon-database
 icon-location
 icon-zoom-in
 icon-zoom-out
 icon-expand
 icon-contract
 icon-expand-2
 icon-contract-2
 icon-health
 icon-wand
 icon-refresh
 icon-vcard
 icon-clock
 icon-compass
 icon-address
 icon-feed
 icon-flag-2
 icon-pin
 icon-lamp
 icon-chart
 icon-bars
 icon-pie
 icon-dashboard
 icon-lightning
 icon-move
 icon-next
 icon-previous
 icon-first
 icon-last
 icon-loop
 icon-shuffle
 icon-arrow-first
 icon-arrow-last
 icon-arrow-up
 icon-arrow-right
 icon-arrow-down
 icon-arrow-left
 icon-arrow-up-2
 icon-arrow-right-2
 icon-arrow-down-2
 icon-arrow-left-2
 icon-play-2
 icon-menu-2
 icon-arrow-up-3
 icon-arrow-right-3
 icon-arrow-down-3
 icon-arrow-left-3
 icon-printer
 icon-color-palette
 icon-camera-2
 icon-file
 icon-file-remove
 icon-copy
 icon-cart
 icon-basket
 icon-broadcast
 icon-screen
 icon-tablet
 icon-mobile
 icon-users
 icon-briefcase
 icon-download
 icon-upload
 icon-bookmark
 icon-out-2
Share
comments

 

Test Floating

Test floating

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.