In questo tutorial vi spiegheremo come realizzare e visualizzare i moduli con angoli arrotondati sfruttando le potenzialità dei CSS. Con Elxis CMS potete creare moduli di questo tipo con o senza bordo.

Il contenitore del modulo (box model)

Ogni elemento HTML è come un box quadrato dove il perimetro è definito dal bordo. Lo spazio tra il bordo (border) e il contenuto presente nel box o contenitore è chiamato padding. Gli spazi esterni (sx,dx,sup.,inf.)  al bordo del perimetro, sono controllati da margin. Quando settate il border e il padding in un elemento html usando i CSS, le dimensioni del contenitore si incrementano o decrementano a seconda del settaggio che si da al padding più il border.

Esempio:
box width: 200px;
box height: 150px;
padding: 20px;
Border: 5px;
si ottiene in contenitoe con delle dimensioni finali di 250 px di larghezza e 200 px di altezza.

Il box o contenitore così ottenuto è un rettangolo.
Sulla base di queste misure vi mostreremo come creare un modulo con gli angoli arrotondati usando solo CSS sfruttando così potenzialità di Elxis CMS.

Arrotondare gli angoli del box contenitore

Creare box con angoli arrotondati con i css è semplicissimo. Ci sono molti metodi che permetteno di fare questo. Alcuni usano JScript per arrotondare gli angoli, altri no. Elxis.org raccomanda di utilizzare i css come metodo base.
Inanzitutto per poter iniziare a lavorare per ottenere il risultato voluto, il modulo che andrete a richiamare nel vostro template deve usare come stile “-3”.
Esempio:
mosLoadMolues('position', -3);
or
elxLoadModule('mod_name', -3);

Quando settate il modulo richiamato con -3, Elxis CMS genera un codice HTML di questo tipo

Da come potete vedere,  Elxis crea una serie di <div> che hanno come classe il suffisso –round, suffisso che è stato definito nei parametri del modulo desiderato. All’interno della <div class= …. >, Elxis genera 3 div uno dietro l’altro. All’interno del terzo div viene allocato il contenuto del nostro modulo dove il titolo del modulo è posto tra il tag h3. 
I quattro div che Elxis ha così generato sono gli angoli arrotondati del nostro contenitore.
Per ottenere l’angolo arrotondato, per ciascuno di questi angoli  bisognerà abbinare come background una immagine che rappresenterà l’angolo.

Angoli arrotondati senza bordo.

Con il vostro programma grafico (photoshop, fireworks, paint shop pro, etc ….) dovete creare un cerchio avente un diametro di 40px, dopo di che dovrà essere diviso in quattro parti ottenendo così quattro immagini separate aventi una altezza e larghezza di 20px ciascuna.

L'immagin2, come da figura, le salverete come:

tl.gif (immagine sinistra alto)
tr.gif (immagine destra alto)
bl.gif (immagine sinistra basso)
br.gif (immagine destra basso)

I file di immagine così nominati, li andrete a salvare nella cartella images presente nella cartella principale del vostro template.
A questo punto bisognerà andare a creare le classi CSS . Nel file .css del vostro template (nometemplate_css.css) aggiungete il seguente codice:

A questo punto il nostro CSS è pronto.
Il contenuto del modulo essendo posizionato all’interno del quarto <div>,  nel quarto div (< div.module-round div div div >) bisogna aggiungere un padding:10px;
Inoltre nel primo div bisogna definire anche un colore di background dello lo stesso valore esadecimale di quello utilizzato come riempimento del nostro cerchio.
Quando tutto sarà finito, otterrete un box contenitore di questo tipo.

Angoli arrotondati con bordo

Ora esamineremo come fare un box contenitore con angoli arrotondati e con bordo.
Il metodo da usare è identico a quello visto in precedena, ad eccezione che in questo caso si dovrà  realizzare una immagine che abbia la possibilità di adattarsi al nostro contenitore. Il trucco è che bisognerà realizzare una immagine rettangolare con i bordi arrotondati e non fare uso dei CSS per definire il bordi del contenitore. Una volta realizzata l’immagine, questa dovrà essere tagliata in quattro parti, ottenendo così quattro immagini che saranno utilizzate come sfondo (background) di ciascun div.
Vi consigliamo di realizzare una immagine con dimensioni superiori al box contenitore. Ad esempio: se voi vorrete visualizzare un box contenitore con una larghezza di 200px ed un’altezza di 300px, l’immagine da realizzare dovrà avere una dimensione di almeno 400px di larghezza e  500px di altezza. Il CSS da utilizzare sarà identico a quello sopra riportato con l’unica eccezione che in questo caso non dovete definire il colore di sfondo (background-color) del primo div.

Traduzione by Speck - Elxisitalia.com
Testo in lingua originale di Elxis.org