[RISOLTO] Allargare template - Modificare header

[confitdecanard]

Ciao a tutti, vi seguo da mesi ma mi sono appena iscritto in quanto, nonostante i (molti) threads trovati a riguardo, non sono ancora riuscito a sistemare il problema.
Utilizzo il template "a4joomla-social-f-free" e vorrei sfruttare tutta la pagina del browser in quanto la colonna centrale dedicata agli articoli risulta molto stretta. Cosa devo modificare esattamente?
Premetto che non sono molto esperto e che avrò qualche altra piccola domanda da porvi ma meglio fare una cosa alla volta.
Se serve url del sito o altro sono a vostra disposizione.

Grazie

[adottauncane]

Ciao confitecanard,
benvenuto nel forum 
Sì, serve un link al sito...

[confitdecanard]

Grazie per il benvenuto!
Questo è il sito
http://www.inchiostroepatatine.it

a questo punto vi chiedo tutto:

- vorrei eliminare le due righe rosse (nell'header) ma sono riuscito a eliminare soltanto quella superiore. Come fare?
- vorrei aggiungere uno sfondo diverso nell'header (il frame dove c'è il logo per dire)
- vorrei appunto allargare il sito alla "massima ampiezza"

...e poi vorrei capire se c'è la possibilità di inserire un menu sotto l'header orizzontale, eliminando così il modulo menu a sinistra... ma questo non è un cambiamento urgente.

Ecco tutto

[adottauncane]

Per trasformare questo template in un template fluido, cioè che si adatti alla larghezza del monitor di chi guarda, bisogna trasformare tute le larghezze che hai in px in percentuale. Non è un lavoro da poco e i codici da variare sono diversi.
Puoi usare Firebug per Firefox e cercarli nei file.css del template. Anche se probabilmente in questo template la larghezze sono impostate nell'index.php

Dal backend alcuni template hanno la possibilità di essere impostati come fluidi o fissi. Verica se magari non sia uno di questi. I template fluidi però non è che siano il massimo come leggibilità...)

La riga rossa superiore la togli di qui:

#topwrap {
    background-color: #940000;
}
aqua.css (riga 9)
eliminado la riga in grassetto.

Quella inferiore di qui:

#topmenuwrap {
    background-color: #940000;   
}aqua.css (riga 12) e mettendo 0 qui:

#topmenuwrap {    height: 0;
}template.css (riga 91)

Nell'header hai l'immagine del tuo logo. Cosa vuol dire uno sfondo diverso?

È buona norma aprire un post per domanda. Grazie.

[confitdecanard]

Grazie per l'esauriente riposta.
Ho guardato meglio e dal backend c'è la possibilità di allargare sia i moduli a sinistra e destra che la "colonna centrale". Ho sistemato i valori e direi che ora va benissimo!
Per quanto riguarda lo sfondo dell'header mi chiedevo come cambiare il colore (il logo è trasparente) per differenziare il frame dell'header dal resto del sito ma aprirò un thread dedicato!
Grazie!

[adottauncane]

Qui:

#headerwrap {
    background-color: #FFFFFF;
}aqua.css (riga 21)

[adottauncane]

Ah, sei hai risolto, dovresti aggiungere [RISOLTO] davanti al titolo del primo post. Grazie mille.

[confitdecanard]

wow, grazie mille!
Dovrei aprire un nuovo thread ma la domanda è decisamente troppo legata all'ultima risposta e poi risolto questo sarà risolto tutto... per questo motivo azzardo la domanda... chiedo venia in anticipo!

Dove devo mettere le mani per centrare l'immagine del logo?
Come tolgo quello spazio chiaro sopra l'header che ora è grigio?

Risolto questo, modificherò il titolo del thread, grazie

[adottauncane]

Aumenta il margin left qui:

Codice: [Seleziona]

#logo {
    margin-left: 195px;
}template.css (riga 125)

e togli l'altezza qui:

Codice: [Seleziona]

#headerright {
    height: 80px;
}template.css (riga 134)

[confitdecanard]

purtroppo questo non va...
su template.css non trovo sotto #logo "margin-left: 195px", l'ho aggiunto, ho modificato il valore ma non noto nessun cambiamento.

Per quanto riguarda headerright invece ho trovato la stringa, ho modificato il valore in zero ma nessun cambiamento anche in questo caso. Possibile?

[adottauncane]

Il secondo è funzionale al primo. Se non fai il primo il secondo non serve. Ricontrolla il file template.css template.css (riga 125)
ci sono altri css non solo quello. È possibile che tu veda solo margin: 0 0 0 0; In quel caso leva quella riga e metti solo il margin-left: 195px;

[confitdecanard]

Fatto ma ancora niente... Ho controllato tutti gli altri css (il backend di joomla, ne lista 4 di cui 2 con 1 sola stringa) ma non hanno valori del genere tranne template.css

Pasto di seguito il codice che visualizzo, ho aggiunto la stringa "margin-left" e tolto "margin: 0 0 0;" domanda forse idiota: ma quel text-align non c'entra niente? Non c'è un modo di inserire il classico <center></center> per centrare l'immagine senza spostarla a destra di pixel?

Codice: [Seleziona]

#logo {
  margin-left: 195px
  text-align: left;
  float: left;
  display: inline;
  height: 120px;
    width: 250px;
    padding: 0px;
}
#headerright {
  float: right;
  display: inline;
  width: 670px;
  height: 0;
  margin: 0;
  padding: 0;
}

[confitdecanard]

Ora il logo è centrato, rimane il problemino dello spazio sopra 
Apro un thread dedicato? In tal caso metto "Risolto" su questo!

[adottauncane]

Quale spazio?

[confitdecanard]

quello sopra all'header grigio e al logo!
ma giusto per capire, io sto "centrando" il sito rispetto al mio pc (schermo, risoluzione) oppure no?
Cioè che senso ha centrare un logo se poi un utente con un monitor più piccolo e una risoluzione diversa lo vete totalmente decentrato?
Grazie!

[adottauncane]

Quidi o apri la finestra del tuo browser e vedrai che il logo si muove con il resto del template rimanendo sempre centrato. Aumenta e diminuisci la visualizzazione.
Al posto di margin:0; metti così:

Codice: [Seleziona]

#headerwrap {    margin-top: -20px;    padding: 0;}template.css (riga 116)

[confitdecanard]

Fatto ma ancora quello spazietto sopra non se ne vuole andare!
Tra l'altro, ho notato che lo sfondo dell'header ha dei problemi: se si visualizza il sito per intero tutto bene, se si visualizza il sito in una finestra che "non riesce a contenerlo", lo sfondo grigio copre soltanto la parte visualizzabile: scrollando orizzontalmente, infatti, lo sfondo se ne va. Non so se mi sono spiegato. E' sufficiente guardare il sito in una finestra che non contenga il sito orizzontalmente e scrollare per capire a cosa mi riferisco... E' normale?

Grazie ancora per le risposte e il tempo che mi stai dedicando 

(eventualmente modificherò il titolo del thread cn qualcosa di più attinente!)

[adottauncane]

Hai sbagliato a scrivere:

Codice: [Seleziona]

#headerwrap {
    margin-top: -20;
    padding: 0;
}
manca px

per l'altro problema adesso ci guardo.

[adottauncane]

per l'altro problema correggi così:

Codice: [Seleziona]

#logo {    background-color: #B3B3B3;    display: inline;    float: left;    height: 120px;    margin-left: 195px;    padding-bottom: 0;    padding-left: 0;    padding-right: 0;    padding-top: 0;    text-align: left;    width: 1250px !important;}template.css (riga 125)

dovrebbe non vedersi quasi.

[confitdecanard]

eheh ops per la dimenticanza... fantastico, ora funziona tutto!

Last question (questa volta veramente): è possibile allargare lo spessore dell'header? L'immagine del logo poi si centrerebbe automaticamente (in senso verticale)?