Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : luca219 14 Oct 2009, 10:25:32
-
salve,
guardando fra i 100 best site joomla ho visto questo sito www.mdmodel.it
sono rimasto incuriosito da alcune soluzioni presentate e vorrei capire come sono state fatte.
precisamente mi sono piaciute:
-le cornici ai moduli e i collegamenti fra loro
- il colore dei pulsanti sulla sinistra(quelli blu e neri)
- la simulazione di sfogliare la pagina in alto a sx.
qualcuno può darmi qualche info o link a qualche guida? ::)
grazie
-
Un consiglio che vale sempre è quello di analizzare la pagina con Firebug, l'eccellente estensione gratuita per Firefox.
Diventa abbastanza semplice scoprire che il template è costruito usando parecchie nested tables (piuttosto semplici da realizzare ma poco performanti).
I tasti usano il criterio abbastanza consolidato della definizione di uno sfondo diverso sullo stato "hover", definito nel template.css
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #ffff00;
}
e per quanto riguarda l'effetto peel (la linguetta) trovi tutte le spiegazioni in un ottimo articolo sulla home page di questo sito.
-
Allora le cornici sono dei gif oppure png fatti con photoshop o qualche altro programma del genere e poi sistemati con i css a fare la cornice:
.BlockContent-tr, .BlockContent-tl, .BlockContent-br, .BlockContent-bl
{
width: 14px;
height: 14px;
background-image: url('../images/BlockContent-s.png');
.BlockContent-tc, .BlockContent-bc
{
left: 7px;
right: 7px;
height: 14px;
background-image: url('../images/BlockContent-h.png');
qualcosa del genere.....
Il colore dei pulsanti semplice sfumatura fatta sempre con photoshop o affini ed al bottone poi è stato dato un rollover....
Per l'effetto pagina, quella è una div con inserito un movie di flash.
Ciao
Max
-
Ah per la risposta alla terza domanda, scusami, non conoscevo l'articolo, avrei risolto con flash... ma se segui l'articolo che ti ha indicato Sottolerighe è molto più semplice e funzionale...
Grazie SottolR
Max
-
grazie mille
molto gentili :D