Come rendo l'header largo con dimensioni fisse invece di 100%

no.stress

Come rendo l'header largo con dimensioni fisse invece di 100%

Ciao a tutti
ho scaricato un template che si chiama sj-news che sto testando su ischiapallavolo.com/nuovo

Vorrei che sia lo sfondo blu dell'header che quello del menu principale non siano larghi al 100% come ora ma larghi quanto il contenuto del sito, sarà tipo 950px

Sto cercando ovunque ma non capisco su quale file mettere mano.
Avete degli strumenti che vi facciano capire quale sia la classe da modificare nei css?

Analizzando l'elemento con firefox mi dice che quella parte si chiama yt_header ed andando nel css mi trovo questa parte di codice:

#yt_header #yt_logoposition h1 {
margin: 0px 0;
}
h1 a {
display: inline-block;
min-height: 37px;
}

Ho provato ad aggiungere qualcosa tipo width: 950px; ma non me lo restringe, quindi mi pare di capire che sto sbagliando qualcosa.

Qualcuno potrebbe correre in mio soccorso?
Grazie

fda

Ciao No_Stress,
apri il file root/templates/sj_news/css/responsive.css e guarda le media queries a partire dalla riga 44. L'elemento #bd .container viene fissato a 980px oltre i 1200px di larghezza dello schermo, ed è questa impostazione che permette alle voci di menu e al contenuto di essere a 980px.

Detto questo, se vuoi che "le due righe" di header e menu - per capirci, quelle in alto nei colori blu scuro e blu - siano larghe quanto il contenuto principale, non devi fare altro che impostare la cosa nelle media queries copiando i valori di *#bd .container *.

Teoricamente potresti dare anche la classe container "alle due righe", ma non so se poi nascano problemi perché non ho studiato il template.
Però ho provato e tutto è andato liscio: https: //drive. google.com/file/d/0BxN5x5q9_p7nQlhZbU0zbDU5RjA/view?usp=sharing

Ecco come fare. Innanzitutto aggiungi la classe container a id="yt_header" e a id="yt_menuwrap":


...
<header id="yt_header" class="block container">
...
<section id="yt_menuwrap" class="block container">
...

In questo modo ottieni quello che si vede nell'immagine che ho condiviso al link sopra, che tuttavia mostra dimensioni più larghe del contenuto del sito.
La causa la trovi al rigo 2519 del css: root/templates/sj_news/css/template-blue.css :


div.modcontent {
  padding: 10px 10px 20px 10px;
  background: #fff;
}

A questo punto ti conviene definire una classe diversa, perché altrimenti prendi anche padding-top, padding-bottom e background. Fai così, aggiungi nel tuo css personalizzato questo codice:


div.modcontent2 {
  padding-left: 10px;
  padding-right: 10px;
}

Quindi aggiungi la classe ai due div "yt-main" che si trovano in id="yt_header" e id="yt_menuwrap":


...
<header id="yt_header" class="block container">
...
<div class="yt-main modcontent2>
...
<section id="yt_menuwrap" class="block container">
...
<div class="yt-main modcontent2>
...

Verifica che vada tutto bene, questa non l'ho provata. Ovviamente puoi anche inserire stili inline al posto della classe modcontent2.
Ultima cosa: guarda tutte le media queries e controlla che i padding left e right si comportino come il div.modcontent fa con i vari dispositivi e alle diverse larghezze ... sì, insomma, guarda bene perché le mie sono indicazinoi di massima dal di fuori.

Aggiornaci.

no.stress

ciao Francesco
grazie come sempre, mi ero perso sta discussione

Non ho capito una cosa, quando dici " Innanzitutto aggiungi la classe container a id="yt_header" e a id="yt_menuwrap""
In quale file devo farlo? Esiste un modo per farlo dall'editor dei template nel pannello di controllo o devo farlo con un editor mio e poi uploadarlo sul web?

Grazie

fda

Ciao No_Stress,
in Joomla 3 è possibile accedere ai file html del template dal back end andando in menu superiore > extensions > template manager > templates > tuo template.
Si può fare ma ti ricordo che la cosa migliore è lavorare in locale o al massimo su una copia online nascosta, da non indicizzare, meglio ancora se accessibile solo al tuo ip.
Se proprio vuoi intervenire sul sito, fai almeno una copia di backup di spazio web e database.

Per accedere ai file, qualunque estensione abbiano, è meglio usare un editor insieme all'FTP se il sito è online (meglio una connessione protetta).
Esempio facile: scarica un FTP come *FileZilla *e un editor come Notepad++ (che non amo ma fa il suo lavoro ed è free; se dopo che sono stati aperti hai problemi con i file, allora salva come formato UTF-8 senza BOM).
Quando imposti Notepad++ per aprire i diversi file, puoi lavorare direttamente selezinandoli con il tasto destro da pc, quindi li modifichi con Notepad++ e quando li salvi FileZilla ti chiede di uplodarli ... sembra difficile ma praticamente fa tutto da solo.

Per quanto riguarda il file da modificare, in verità non so quale sia ma ipotizzo che si tratti dell'index.html della folder del tuo template. Considera però che potresti dovere modificare altri file e, se decidi di fare manutenzione al tuo sito in Joomla, prova a studiarti la struttura dei file del tuo template. Se incontri difficoltà chiedi pur qui sul Forum GT.

no.stress

Si, so come utilizzare filezilla ed uso dreamweaver o anche solo notepad.
Per quanto riguarda la versione, posso provarla anche online, tanto sta in una cartalla (nuovo) che conosco solo io, e ci sono solo contenuti di prova all'intero.

Ora provo a dare uno sguardo al file index.html.
Tu quando hai fatto la prova per me, hai modificato quel file o solo il css?

no.stress

Ho controllato nella folder del template ma ho un index.html dove non ho niente, ed un index.php dove ho qualcosa ma non trovo quelle 2 sezioni.
Quindi il file da modificare dovrebbe essere un altro, ma veramente non capisco quale

fda

Ho ispezionato con Chrome il codice di markup, che quindi vedo e "modifico al volo", pur non conoscendo da cosa sia generato. Potrebbe trattarsi del template del sito o anche del template di un'estensione o ancora di file php ... devi cercare all'interno dei file quelle righe e verificare.