+ Rispondi alla Discussione
Risultati da 1 a 7 di 7

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

Ultimo Messaggio di FDA il:
  1. #1
    User Attivo
    Data Registrazione
    May 2006
    Località
    London
    Messaggi
    1,164

    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;
    }
    #yt_header #yt_logoposition 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

  2. #2
    FDA
    FDA è offline
    Moderatore L'avatar di FDA
    Data Registrazione
    Sep 2012
    Località
    Napoli
    Messaggi
    1,931
    Segui FDA su Twitter Aggiungi FDA su Google+ Aggiungi FDA su Facebook
    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":

    Codice:
    ...
    <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 :

    Codice:
    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:

    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":

    Codice:
    ...
    <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.

  3. #3
    User Attivo
    Data Registrazione
    May 2006
    Località
    London
    Messaggi
    1,164
    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

  4. #4
    FDA
    FDA è offline
    Moderatore L'avatar di FDA
    Data Registrazione
    Sep 2012
    Località
    Napoli
    Messaggi
    1,931
    Segui FDA su Twitter Aggiungi FDA su Google+ Aggiungi FDA su Facebook
    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.

  5. #5
    User Attivo
    Data Registrazione
    May 2006
    Località
    London
    Messaggi
    1,164
    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?

  6. #6
    User Attivo
    Data Registrazione
    May 2006
    Località
    London
    Messaggi
    1,164
    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

  7. #7
    FDA
    FDA è offline
    Moderatore L'avatar di FDA
    Data Registrazione
    Sep 2012
    Località
    Napoli
    Messaggi
    1,931
    Segui FDA su Twitter Aggiungi FDA su Google+ Aggiungi FDA su Facebook
    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.

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.