Stringere menu laterale Protostar

[ezio2000]

Ciao a tutti. Sono passato (con soddisfazione, devo dire... altro mondo) a Joomla da altro CMS e sto "smanettando" per capire il funzionamento di sistema, php e css.

Vorrei Stringere un attimino il menu laterale (ne ho uno solo)... ho creato un "personal.css" regolarmente richiamato dal index.php ed ho scritto:

Codice: [Seleziona]

/* i menu laterali sono larghi span3. Il centrale span6 se ci sono due
   menu, altrimenti span9 se c' è un solo menu}*/
   
.span9 {
   width: 720px;
}
.span3 {
   width: 200px;
}
Come vedete stringo (vorrei) il laterale di 20px ed aumento il centrale di 20px, per stare nei 940px di default coi 20px di default di margin tra i due elementi.

Risultato.... nisba. 

Altre modifiche fungono, al momento mi falla solo questa. Dove sbaglio?

[Limma]

Devi giustamente utilizzare gli span, come richiesto da Bootstrap, ma non devi settare le larghezze in px, ma in percentuali.
In rete trovi molta documentazione in merito, ma intanto dai una letta a questo thread qui sul forum dove, verso la fine dello stesso, troverai questo codice che, come chiedi tu, "restringe" la colonna di dx (sperando di aver capito bene la tua richiesta...):

Codice: [Seleziona]

/* hack restringi colonna dx */
@media (min-width: 1200px) {
    .row-fluid .span9 {
        width: 76.468085099%;
        *width: 74.414893609638%;
    }
    .row-fluid .span3 {
        width: 21.404255317%;
        *width: 23.351063827638%;
    }
}
/* fine hack restringi colonna dx */
Lo metti nel tuo personal.css ed il gioco è fatto. Funziona benissimo, e se non ti vanno bene le proporzioni basta che modifichi un po' le percentuali.

[ezio2000]

Grazie per la risposta. Poi provo.

Tuttavia le voci da me riportate nel template.css CI SONO. Le voci originali:

Codice: [Seleziona]

.span9 {
   width: 700px;}
.span3 {
   width: 220px;
}
a che servono? Come mai è ininfluente che vadano cambiate?

In secundis: cosa è quell' asterisco prima di width? E' un codice mai visto e che non trovo documentato.. 

[Limma]

Il tuo codice:

Codice: [Seleziona]

span9 {
   width: 720px;
}
.span3 {
   width: 200px;
}prova a scriverlo così:

Codice: [Seleziona]

.span9 {
   width: 720px !important;
}
.span3 {
   width: 200px !important;
}
Ho provato e funziona.

[ezio2000]

prova a scriverlo così:

Codice: [Seleziona]

.span9 {
   width: 720px !important;
}
.span3 {
   width: 200px !important;
}
Ho provato e funziona.

FUNZIONA.  Ma non sono certo che sia la cosa più "corretta" da fare.

E qui esce fuori tutta la mia inesperienza con Bootstrap ed il codice: ".row-fluid". 

Andiamo con ordine: i CSS vengono letti in maniera sequenziale e poiché il mio "personal.css" viene letto DOPO il "template.css", TEORICAMENTE dovrebbe comandare il mio codice iniziale ANCHE senza aggiungere "!important".

Visto che non succede mi viene da pensare che ".row-fluid .span9" sia PRIORITARIO rispetto a ".span9", per cui non viene sovrascritto: è LUI che comanda, forzare la sovrascrittura con un "!important" potrebbe non essere correttissimo.

Quindi penso che la cosa migliore da fare sia modificare TUTTE le voci "span9" e "row-fluid .span9". Il valore di default 74,46808599% indicato in "template.css" è esattamente = 700/940. Penso basterà adattare la percentuale ad ogni eventuale nuovo valore mi venisse bene.

Quello che mi sfugge è il significato della seconda riga:

width: 74.468085099%;
*width: 74.414893609638%;

che codice CSS è "*width" con l' asterisco davanti? E da dove diavolo esce fuori il valore??

E ancora: a che serve definire nel .css ".span9" se tanto viene comunque "sovrascritto" dal corrispondente valore fluid?