Nella costruzione dei miei ultimi lavori ho optato per un foglio di stile esterno. Si tratta di una scelta del tutto personale, che potrebbe tuttavia creare alcuni problemi a chi non abbia familiarità con il mezzo o non reputi abbastanza chiare le istruzioni allegate. Per questo vi offro un piccolo prontuario, che potrà guidarvi nell'edit e nella personalizzazione del layout.
1- Il foglio di stile può essere aperto e trattato come una qualunque pagina web. Esso contiene SOLO le istruzioni di stile relative al fondo della pagina, alle barre, ai links o ad altre caratteristiche specifiche della programmazione. Poiché spesso lo sfondo della pagina è trattato nel tag body del foglio di stile, per visualizzarlo correttamente dovete aprire quest'ultimo e sostituire il link relativo con quello dello spazio in cui l'avete uploadato. Molto importante è sapere che non tutti gli spazi web consentono l'esportazione del foglio di stile (può capitare anche con altervista). Per ovviare al problema, dovete curarne l 'importazione nel source del layout. Come? Si tratta di una procedura molto facile!
Il foglio di stile viene indicato con questa stringa: <link rel="stylesheet" type="text/css" href="nomefile.css">
Una volta aperto il figlio di stile, copiatene il contenuto ed incollatelo nel vostro source, facendolo precedere da "<style type="text/css">{ }" e seguire da "--></style>" (es: se nel foglio di stile trovate:
body {SCROLLBAR-BASE-COLOR: #000000;background-image:url('images/bg.gif');
font-family: verdana;
font-size: 10px;
color: #000000;}
A:link{color:#A96106; text-decoration:none; cursor:help; font-weight:bold;}
A:visited{color:#A96106;text-decoration:none;cursor:help; font-weight:bold;}
A:hover{color:#BEA24C; text-decoration: overline underline;
background-color:none; font-weight:bold; cursor:help;}
nel source diventerà:
<style type="text/css">{ }
body {SCROLLBAR-BASE-COLOR: #000000;
background-image:url('images/bg.gif');
font-family: verdana;
font-size: 10px;
color: #000000;}
A:link{color:#A96106; text-decoration:none; cursor:help; font-weight:bold;}
A:visited{color:#A96106;text-decoration:none;cursor:help; font-weight:bold;}
A:hover{color:#BEA24C; text-decoration: overline underline;
background-color:none; font-weight:bold; cursor:help;}
-->
</style>)
2- Per una visualizzazione corretta del lavoro, verificate di aver effettuato correttamente i collegamenti a TUTTE le immagini. Per non confondervi, magari, potete contarle prima e poi vedere se avete rispettato la sequenza.
3- Tutto qui! Una volta impratichiti con la procedura, vi accorgerete semplifichi di molto il lavoro e consenta di gestire un source molto più leggero e funzionale. Cosa NON va fatto: non si sgraffignano i css altrui (né fogli di stile, né impiantati nel source). Essi rappresentano la parte più tipica di una programmazione e ne definiscono l'originalità. Se scopiazzate l'ingegno altrui non ci fate una gran figura e non credo possiate vantarvi di nulla. Perciò siate sempre onesti.
Visto che il blog comincia ad esser uno strumento molto 'di moda', ho notato spesso si avvicinino a tale strumento utenti del tutto digiuni di html, per i quali è ostrogoto persino ciò che la sottoscritta - e chi, come me, programma da un po' - dà largamente per ovvio. A tal fine ho deciso di inserire questo piccolo - e spero chiaro - prontuario pratico per neofiti.
1- Come prima cosa dovete scaricare da qui - ma anche da un qualunque sito che offre sources per templates curato da programmatori degni di questo nome - il source della struttura che vi interessa. Se provaste a fare un copia-incolla diretto, infatti, combinereste un pasticcio, visto che alcuni caratteri (>,<," questi, ad esempio), fondamentali nella programmazione, risulterebbero modificati dal filtro di lettura.
2- Aprite il source così scaricato con il note-pad (il block notes di Window. Non potete dirmi di non averlo: è nella dotazione di qualunque PC utilizzi il browser della Microsoft, sotto la voce 'Accessori' del menu) e selezionatene interamente il contenuto (Puntate il mouse sul file, cliccate il tasto destro e selezionate l' omonima opzione). Poi settate 'Copia'.
3- Entrate nel source del vostro blog attuale. Selezionate l' intero contenuto e settate 'Incolla'. A questo punto il vostro template sarà stato modificato.
Se il source è stato programmato bene (ecco perché vi consiglio di affidarvi a programmatori tanto più bravi quanto meno siete esperti voi), tutti i vostri post resteranno al proprio posto e, salvo non siate tra i maniaci delle immagini poster incollate nel testo, la colonna si ridimensionerà automaticamente. COSA MANCHERA': tutto quel che avete aggiunto e non rientri tra i tag di Splinder. A tal fine vi consiglio di curare sempre una copia di riserva del vecchio template, da cui copiare le aggiunte. COSA NON DOVETE FARE: strafare, sostanzialmente. Un blog pieno di effettacci ed immagini non è più bello, ma solo più lento, disordinato e spesso mal funzionante. Se non conoscete più che bene l' html rischiate di danneggiare anche il progetto originale. Se proprio non potete esimervi dal metterci le mani, fate prima una copia del template funzionante, da incollare se qualcosa andasse storto. In ogni caso né io né Alfredo siamo tenuti ad aiutarvi se vi mettete nei guai da soli. Perciò, posto che i nostri progetti non presentano alcun problema (i miei sono, per altro, di una semplicità estrema), siate responsabili nel trattare i vostri spazi.
Layout © Sar@
Questo sito non rappresenta una testata giornalistica in
quanto viene aggiornato senza alcuna periodicità. Non può pertanto
considerarsi un prodotto editoriale ai sensi della legge n. 62 del 7.03.2001.
