Joomla è uno dei tanti sistemi di gestione dei contenuti, o CMS, che permettono ai suoi utenti di personalizzare completamente il look and feel del loro sito web. Gli individui possono pubblicare e annullare la pubblicazione di articoli o post di blog tutte le volte che a loro piace, così come rielaborare il layout generale con immagini e un po 'di codice. Per creare angoli arrotondati, utilizzare un programma di arte per creare un rettangolo arrotondato, tagliatela a quattro immagini, caricare le immagini e aggiungere il codice necessario.

istruzione

1 Aprire un programma di arte come Photoshop, Gimp o Corel PaintShop Pro e creare un nuovo documento. Utilizzare le misure desiderate la tua casella di curva per essere sul vostro sito web una volta che è finito.

2 Disegna la tua casella di modo che ha gli angoli arrotondati. Le misure adottate variano a seconda del programma utilizzato. Per esempio, in Photoshop c'è un strumento rettangolo che consente di modificare le impostazioni in modo gli angoli sono arrotondati anziché acuto.

3 Dividere il rettangolo in parti uguali per utilizzando lo strumento di giunzione del programma e salvare ogni parte come propria immagine. Carica le immagini sia per il proprio Web host o un sito un'immagine di hosting gratuito come Photobucket.

4 Entra per Joomla e assicurarsi di avere il "arrotondato" modulo Chrome installato. È possibile trovare questo modulo o add-on sul sito di Joomla (vedi Risorse)

5 Inserire la seguente dichiarazione nel modulo "arrotondato".

<Jdoc: include type = "moduli" name = stile "POSITION" = "arrotondata" />

Questo codice installerà una manciata di righe nel layout finale, cercando qualcosa di simile:

<Div class = "module_menu">
<Div>

<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>

</ Div>
</ Div>

6 Aggiungere le immagini angoli arrotondati con la creazione di un nuovo foglio di stile esterno e incollando il codice qui sotto:

div.module_menu {
fondo: URL (../ images / rounded_topleft.png) 0 0 no-repeat;
padding: 0;
}

div.module_menu div {
fondo: URL (../ images / rounded_bottomleft.png) 0 100% no-repeat;
margin: 0;
border: 0;
}

div.module_menu div div {
fondo: URL (../ images / rounded_topright.png) 100% 0 no-repeat;
}

div.module_menu div div div {
fondo: URL (../ images / rounded_bottomright.png) 100% 100% no-repeat;
}

7 Sostituire "../images/rounded_imagename" con la posizione di ogni immagine, sia in una cartella sul server del vostro host Web o su siti come Photobucket.

8 Aggiungere il codice seguente alla fine del foglio di stile esterno in modo che sa dove nel layout per posizionare le immagini.

div.module_menu div div div div {
sfondo: none;
}

Si noti che il codice di cui al punto 5 leggerà il codice una volta che è stato salvato, causando i cambiamenti di andare a vivere sul tuo sito web.

9 Salvare le modifiche e controllare il vostro sito. Apportate le modifiche necessarie, come la dimensione delle immagini, il loro colore o il posizionamento modificando i codici di cui sopra.