Raffaeu (Raffaele Garofalo Blog's)

Per poter modificare completamente lo stile di un blog come UGI, quindi di un blog prodotto da un software preconfezionato quale puo' essere .Text, l' unica via di uscita è quella di sovrascrivere lo sile css di base. Nel mio caso, avendo a disposizione un blog fornito da subText, ho 2 stili a disposizione. Uno di base non modificabile, ed uno per la grafica, sovrascrivibile tramite le impostazioni del blog stesso.

Detto cio' ho creato qui sotto uno schema dello stile simple di .Text  se non sbaglio. Alla fine, come potete notare non è nient' altro che un insieme logico di DIV.

Premetto che ho scelto uno stile semplice con un layout fisso a 2 colonne. Quindi DIV su DIV e calcoliamo bene margins e padding.

Iniziamo con lo stabilire quali reali dimensioni dovrà avere il nostro layout. Nel mio caso voglio ad esempio, che le dimensioni totali non superino comunque i 750 px, in questo modo sono sicuro che anche il vecchio monitor con una Res di 800x600 riuscirà a visualizzare il mio blog.

L' header del blog dovrà occupare interamente la larghezza del blog, quindi nel DIV header andremo a dirgli di non usare margin e di avere un width pari a 750px.

Per le due colonne, basterà fornire le dimensioni, calcolando anche i parametri di padding e margin, e posizionandoli con un Float di tipo left. In questo modo abbiamo entrambi i pannelli affiancati.

Infine, per il DIV Header dobbiamo fornirgli un clear:both, in questo modo, chiuderà i due div superiori alla stessa altezza.

Nota: io che uso molto il tag PRE per inserire il codice, ho dovuto usare l' overflow, altrimenti se con il testo sforo fuori le dimensioni del DIV contenitore la grafica non resta piu' impaginata correttamente.

Il mio risultato finale è quello che potete visualizzare sul blog. Manca la grafica dei posts e tutta la parte di stile per i singoli post, ma prima devo rendere il blog crossBrowser, altrimenti tanto vale.

Di seguito vi allego le classi che ho modificato in .Text, aggiungendo questi stili a quelli customizzabili. Nulla di che.

body
{
	margin: 0 0 0 0;
	font-family: Tahoma;
	font-size:9pt; 
	background: url('http://www.raffaeu.com/images/Blog_remake/background.png')
	
}
h1{	font-size:13pt; 
}
h2{	font-size:12pt; 
}
h3{	font-size:11pt; 
}
h4{	font-size:10pt; 
}
pre
{

}
.pagelayout
{
	margin: 0 0 0 0;
	width:771px;
	background: url('http://www.raffaeu.com/images/Blog_remake/bodybg.png');
	overflow:hidden;	
}
.header
{
	margin: 0 0 0 0;
	width:771px;
	height:209px;
	background: url('http://www.raffaeu.com/images/Blog_remake/header.png');			
}
.leftcolumn
{
	margin: 0 0 0 30px;
	padding: 0 0 0 5px;
	border: 1px solid #CCCCCC;
             width : 470px;
	overflow:hidden;	
             float:left;
}
.centercolumn
{
             padding: 0 0 0 0;
	width:180px;
	border: 1px solid #EFEFEF;
	float:left;
	overflow:hidden;	
	padding: 10px;
	margin-left: 0px;
}
.footer{
    background: url('http://www.raffaeu.com/images/Blog_remake/footer.png');
    margin: 0 0 -4px 0;
    height:109px;
    clear:both;
}