13 agosto 2010

38-modificare il foglio di stile in Wordpress

Questo post serve a me, per ricordarmi come ho fatto a sistemare le larghezze del mio blog Boanerges in Wordpress.
Dunque...
Questo blog aveva un template (Aeros) troppo "stretto": in sidebar i widget mi venivano tagliati (soprattuto il MixPod, un lettore di playlist); e in Content desideravo avere più spazio intorno alle foto.
Cosa ho fatto? Ho ragionato così: se allargherò di 50 pixel la sidebar dovrò allargare altrettanto il Contenitore Principale.
Allora ho aperto il foglio di stile (style.css) e ho preso nota della larghezza massima che trovavo (supponendo che fosse quella del Main Container, il Contenitore Principale).

Infatti ho trovato:

/* ++++++++++++++++++ The Main Container ++++++++++++++++++ */
#rap {
        width:775px; (l'ho portato dapprima a 825 pixel [e poi a 855]
        margin:0 auto;
-----    -----
/* ++++++++++++++++++ The Header Section ++++++++++++++++++ */
#header {
        width:775px; (l'ho portato dapprima a 825 pixel, [e poi a 855]
        font-family: Verdan
----    ------ 
#headmenu {
font-family: verdana, arial, sans-serif;
font-size:16px;
width:775px; (l'ho portato dapprima a 825 pixel [e poi a 855]
letter-spacing:-1px;
font-weight:bold;



 Poi, esauriti tutti i 775, ho prestato attenzione alla sezione della sidebar:

/* ++++++++++++++++++ The Sidebar Section ++++++++++++++++++ */

#sidebar {
        width:180px; (l'ho portato a 230 pixel)
        float:right;

In questo modo la sidebar si è allargata sufficientemente.

Poi ho voluto allargare il Contenuto (precisamente il Contenitore del Contenuto) di 30 pixel.
Ho cercato la larghezza maggiore dopo il 775 e ho trovato il 590:

/* +++++++++++ The Content Container - where your posts are ++++++++++ */
#content {
        width: 590px; (l'ho portato a 620 pixel)
        float:left;
        overflow:hidden;

Ma ho dovuto allargare di 30 pixel anche il Contenitore Principale. E le misure finali sono evidenziate in rosso.


Ho salvato e pubblicato.
C'era qualcosa che non andava, i segnalibri dei commenti si posizionavano in modo strano... infatti mi era sfuggito .storywrap che non so cosa sia ma ho supposto che dipendesse dalla sezione dei contenuti: aveva una width di 505px e ho pensato di aumentarlo di 30 pixel.

.storywrap {
        padding:10px 20px;
        font-size:14px;
        text-align:justify;
        float:left;
        width:505px; (l'ho portato a 535 pixel)
        margin-bott...
Questa volta tutto è andato a posto.
Forse molti esperti di codice e linguaggi rideranno di me... ma anch'io rido per me perchè sono felice di avercela fatta!
newbie ;)

Nessun commento: