Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => : Daino 20 Jun 2010, 19:09:55
-
www.ilcrocicchio.it
Con firebug mi posiziono sul titolo del modulo in top ULTIME NOTIZIE e trovo un div class "module" e poi un h3 class "module-title"
Ora come da guida
http://wiki.joomla.it/index.php?title=Cos%27%C3%A8_il_Suffisso_classe_CSS_modulo%3F
nei parametri del modulo inserisco in suffisso classe css modulo _scroll
torno in firebug e mi ritrovo un div class "module m_scroll" e poi h3 class "module-title"
E quì mi perdo perche la guida la raccontava in maniera un tantino diversa...
il css è piuttosto complicato per me, più o meno è così
/* Modules */
.module {padding:1px;}
.module-title {font-size:110%;font-weight:bold;margin:0;padding:7px 15px 5px;}
.module-body {padding:10px 15px 25px;}
.color1 .module-title {background:url(../images/light4.png) 0 -204px repeat-x;border-bottom:1px solid #ddd;color:#777;}
.color1 .module-body {border-top:1px solid #fff;}
.color2 .module-title {background:url(../images/light4.png) 0 -136px repeat-x;border-bottom:1px solid #c3d9e1;color:#50646d;}
.color2 .module-body {border-top:1px solid #dfeaef;}
#colmask .m_menu {background:#7F8C51;color:#fff;}
#colmask .m_menu .module-title {background:url(../images/light4.png) 0 -0px repeat-x;border-bottom:1px solid #6B7643;color:#fff;}
#colmask .m_menu .module-body {border-top:1px solid #97A763;}
#colmask .m_menu a {color:#fff;}
#colmask .m_menu ul {margin:0 1em;}
#mainmods, #mainmods2, #mainmods3 {overflow:hidden;padding-top:15px;}
#mainmods3 {background:#eee;border-top:1px solid #fff;border-bottom:1px solid #ddd;}
.spacer .module {float:left;}
.spacer.w99 .module {width:100%;}
.spacer.w49 .module {width:49.2%;}
.spacer.w33 .module {width:32.8%;}
#header .module {float:right;margin-left:325px;}
#main-content li .active a {font-weight: normal;}
In sostanza cosa devo aggiuungere per poter modificare l'aspetto del modulo?
-
Il modulo ora ha la classe m_scroll impostata, quindi per dirgli, per esempio di allineare il testo a destra:
.m_scroll {
text-align: right;
}
Oppure per modificare lo stile del titolo:
.m_scroll.module-title {
color: red;
font-size: 24px;
}
-
comunque.... css è l'abbreviazione di cascade style sheet
il fatto che siano "cascade" vuol dire che non sempre ciò che è contenuto in un tag ha lo stile indicato dal tag stesso, magari è molto sopra, magari lì intorno o magari è proprio lo stile indicato dal tag quello che lo stilizza.
M.
-
E difatti uno funziona l'altro no, messi così
.module {padding:1px;}
.module-title {font-size:110%;font-weight:bold;margin:0;padding:7px 15px 5px;}
.m_scroll {text-align: right; font-size: 80%;}
.m_scroll.module-title {font-size:200%; }
.m_scroll funziona ma agisce solo sul titolo, mentre
.m_scroll.module-title non funziona proprio.
Peccato perchè se riesco a capire questa cosa che proprio non mi entra nonostante tutti i tutorial, riesco a modificare e a rendere più carino tutto il sito...