Miglioriamo la vista degli archivi
15 Maggio 2011 in Foglio di stile, Lezione 4
Chi di voi non ha ancora provveduto si dovrebbe ritrovare con una visualizzazione un po’ discutibile degli archivi.
Guardiamo, ad esempio, cosa capita agli archivi delle circolari di marzo: la data e il titolo della circolare sono un po’ troppo grandi e in grassetto e questo stona (a mio parere) un po’, soprattutto se confrontiamo la vista “Archivi” con quella delle ultime circolari. Quest’ultima appare decisamente più leggera: la ritengo preferibile.
Lascio a chi è interessato di comprendere il motivo della diversa visualizzzione (vi instrado dicendo di controllare i livelli di titoli) e mi limito a fornirvi il codice da inserire nel file style.css per equiparare le due visualizzazioni:
h3.piccino {
font-size: 0.95em;
font-weight: normal;
line-height: 1.4em;
margin: 0.75em 0 0.25em;
}
francesca testa ha detto 16 Maggio 2011
ciao Alberto,
ho integrato il file css con le info rispetto all’h3 piccino e sembra tutto ok… tranne che per un particolare: nella pag circolari ho degli “h4 piccino” mentre nell’archivio adesso ho “h3 piccino” di fatto hanno le stesse caratteristiche e perciò a prima vista sono uguali. Se però analizzo i due elementi con firebug si scopre l’inghippo. cosa devo correggere? grazie, francesca
ps: sono entrata nell’area riservata e funziona!
http://alardiz.info/melzoscuole/circolari/
admin ha detto 16 Maggio 2011
Francesca, è giusto così, perché la gerarchia dei titoli è differente nei due casi.
Nella pagina (con categorie) Circolari (oppure Docenti, ecc. ) i titoli delle comunicazioni sono di livello 4, in quanto vengono dopo il titolo della pagina (titolo 2) e il titolo sulle comunicazioni (titolo3). Quest’ultimo non c’è nella pagina archivi e, pertanto, in questo caso i titoli delle circolari (con la data di pubblicazione) sono titolo3.
Già che ci siamo mi hai fatto venire in mente un’ipotesi di ulteriore possibiloe miglioria: stilizzare il titolo della pagine archivi come gli altri (cioè con il bordo trattegiato in basso).
Per ottenere ciò, puoi andare in style.css, cercare .postatitle e aggioungere a fianco, separato dalla virgola .pagetitle, ottenenendo vedi http://www.scuolacooperativa.net/wp3/2011/04/?catid=3:
.posttitle, .pagetitle {
font-size: 1.2em;
font-weight: normal;
margin-bottom: 10px;
margin-top: 15px;
width: 100%;
border-bottom:1px dashed #004100;
overflow: auto;
/* Width and overflow to clear ‘.posttitle a’ */
color: #004100;
}