[Risolto] Modificare larghezza protostar

[durium]

Salve a tutti,
dopo molto tempo sono tornato,
ho un problema che non riesco a risolvere, praticamente vorrei allargare il container del template,
ma non sono riuscito a trovare nulla che spieghi dove e cosa modificare, 


grazie a tutti anticipatamente

[giusebos]

per farsi aiutare occorre qualche info supplementare.

vedi altri post, così capisci cosa serve

[durium]

ok, allora mi spiego in maniera più dettagliata
installazione appena fatta di joomla3.3, sono riuscito a modificare tutte le colonne,
ma lo spazio laterale che ce tra le colonne e il bordo del browser mi serve più stretto,


in rete non vi è nulla che spieghi come ristringere le colonne esterne, sia con firefox che con chrome me le indentifica tra

Codice: [Seleziona]

<div class="body">
<div class="container">ma non mi da nessun modo di capire cosa modificare

[adottauncane]

Ciao durium,
questi sono i css che puoi cominciare a modificare

Codice: [Seleziona]

.container {    max-width: 960px;}.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {    width: 940px;}
protostar_default/css/template.css

rispettativamente riga 6957 e 5214, sempre che tu non abbia già fatto altre modifiche e aggiunto o tolto delle righe.

Comincia con allargare la prima delle due e vedi che capita.

Non fare le correzioni lì, altrimenti un aggiornamento te le cancella. Fatti un file personal.css
http://www.joomla.it/articoli-community-3x-tab/7374-mini-guida-alla-personalizzazione-del-template-protostar.html#Modifica_stile_da_backend

ma lo spazio laterale che ce tra le colonne e il bordo del browser mi serve più stretto

questa non l'ho capita però...

[durium]

Grazie adottauncane,


la riga numero 6957  non mi da nessun corrispondente in px
mentre la 5214 è perfetta

 


in alto metto risolto

[fringuellino]

ciao riprendo questa discussione perchè ho un problema simile.
devo stringere le colonne di protostar e allargare la parte centrale degli articoli.
grazie a questo post ho capito che le 2 colonne laterali sono governate da   SPAN3 mentre la parte centrale degli articoli da SPAN6
Ho provato quindi a diminuire le larghezze in pixel di SPAN3 e aumentare quelle di SPAN6 ma non ottengo cambiamenti.
Sapreste dirmi dove sto sbagliando? Credevo di aver risolto invece così non è.

grazie

[ghepensimi]

grazie a questo post ho capito che le 2 colonne laterali sono governate da   SPAN3 mentre la parte centrale degli articoli da SPAN6

se guardi come funziona il bootstrap di twitter capisci tutto e subito.
la somma degli span deve fare sempre 12 (in questo raster) non devi modificare la larghezza ma gli span, altrimenti perdi il responsive.
1+9+2
2+8+2
3+6+3

[fringuellino]

ciao ghepensimi. questo bootstrap per me è un mondo completamente nuovo. ti chiedo una cortesia, potresti scrivermi il link esatto a questa documentazione di twitter che spiega come intervenire sugli span?

Un ultima cosa, pensi che agendo come dici tu riesco a stringere la larghezza delle due colonne e aumentare quella centrale con gli articoli senza perdere la responsività?

Grazie

[ghepensimi]

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

[fringuellino]

Grazie. Ho guardato e risolto Ti ringrazio molto per la preziosa dritta che mi hai dato. E' stato tutto veramente semplice. Non conoscevo Bootstart

[Cristiano Sias]

Ciao a tutti,
anch'io non passo spesso e scusate se intervengo su un topic "risolto" da qualche mese su un problema di cui non si parla molto in giro, ma che considero di notevole interesse per tutti (compreso il sottoscritto), almeno a giudicare dal numero delle letture.
Siamo infatti tutti contenti che "voi" abbiate risolto  :-D , ma sarebbe utile nell'interesse generale capire qualcosa di più. Anch'io mi son letto quell'articolo, ma  non mi ha aiutato molto in verità, e non sono proprio un novellino, anche se poco esperto di joomla.

Nel mio caso per esempio le span interessate sono le 9 e le 3 (una colonna soltanto), ma la lettura del css con quelle percentuali che non si capisce da che cielo caschino farebbe impazzire qualunque principiante.

In sintesi, è possibile sapere qualcosa di più sugli interventi da fare senza dover per forza prendere una laurea in bootstrap?
Grazie  ;-)

[Cristiano Sias]

Ok, per chi passasse di qua con lo stesso problema, pare sia sufficiente una piccola modifica come questa nel vostro css personale. Semplice da fare ma non da trovare, se non si è smanettoni. In questo caso è per la colonna dx, ma da qui potrete trarre spunto, senza perdervi nel scaffolding ;-) :

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 */Saluti

[massimo57]

@Cristiano:


Vale anche per beez3? E quale file css devo andare a modificare?


Ti ringrazio


Massimo

[Cristiano Sias]

Ah scusa, davo per scontato che si parlasse del protostar, un po' delicato perché ogni modifica del layout va sempre verificata nel mantenimento del "responsive". Naturalmente il file è il template.css, o meglio il personal.css creato ad arte, come dicono sopra, per evitare che ogni aggiornamento joomla ti spazzi via le modifiche.
Non so se siamo OT, ma il beez3 non l'ho mai provato. Se è come il beez2 ricordo che bastava agire sulle larghezze fisse. Se hai Firefox puoi controllare tu stesso con tasto dx sulla colonna e "analizza elemento": ti dirà quali classi e fogli di stile sono interessati e puoi anche fare delle prove temporanee di modifica layout senza modificare realmente i files. Una genialata del solito Mozilla superstar:).
Appena ho un attimo di tempo ci darò un'occhiata e ti farò sapere.

[Cristiano Sias]

Confermo Massimo, devi solo giocare con la larghezza: per es. per la colonna di sinistra devi variare il width della classe left1  nel file position.css alla linea 214.

[flax77]

Ciao Cristiano
scusami e perdonami ma anche con questo tuo pezzo di codice da mettere nel css personale non mi sono risolto il problema di come giocare con le percentuali (e che precisione decimale...!! ) ...se ho tre colonne: 2span sinistra, 7span centro e 3span destra... come posso aumentarle da sfurttare al massimo la larghezza della finestra? (ovvero 10px massimi di padding o margine tra un elemento e l'altro?)
Grazie, ciao
F

[Cristiano Sias]

Lo so Flax...è roba da smanettoni. Non so come aiutarti e anche avessi davanti il codice e le misure andrei avanti per tentativi, chessò aggiungendo un punto di percentuale alle due laterali e togliendone due al centro, provando con tutti i punti @media del css relativi a quelle spam...poi provando a modificare le percentuali poco a poco. Con tanta pazienza.Con "analizza elemento" di FF si può provare in linea senza danni.
Protostar sarà anche "un amore di template", ma è ancora un pioniere e molti lo sconsigliano per i siti di produzione.

[flax77]

Grazie Cristiano
si è vero tutto quello che dici. Ma diciamo che pur avendo già provato a smanettare come dici, e usando di base sempre gli strumenti per sviluppatori interni a FF, non sono proprio ancora riuscito a capire bene la relazione tra quelle percentuali (con tutti 'sti decimali!!). Sicuramente posso solo dire che non è la semplice "la somma deve fare sempre 100%" perchè se anche la cosa potesse funzionare per la versione statica, per quella fluida (responsive) non c'è santo che tenga: appena tocchi quelle percentuali e provi a ridimensionare la finestra del browser tutto va a scatafascio... sovrapposizioni strane, scatti di colonne quando non dovrebbero, ecc... ecc...
Spero ancora di riuscire a trovare qualche riferimento e manualistica "leggibile" che con qualche esempio pratico possa rispondere alle mie esigenze.
Grazie per la tua disponibilità
ciao
F

[Proxima]

Fringuellino,
per favore mi dici come hai risolto?
Che modifica hai apportato al template.css per  stringere le colonne di protostar e allargare la parte centrale degli articoli. Mantenendo tutto ovviamente responsive...

oppure come nel tema beez la funzione di chiudere le colonne di dx

grazie mille

[rosgiura]

Mi inserisco in questa discussione, che forse qualcuno ormai da per scontata, ma non riesco a capire cosa devo modificare come css e quali voci.

La situazione che trovo ora è di 3 colonne, quella di SX va bene com'è, vorrei allargare quella centrale e di conseguenza fare in modo che quella di DX si sposti più a DX