Autore Topic: [Gantry] Rendere il logo responsive  (Letto 449 volte)

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
[Gantry] Rendere il logo responsive
« il: 05 Ott 2018, 17:54:19 »
Ciao,
uso il framework e template gratuito Gantry.
Nel backend del layout ho inserito il logo di fianco al men¨.
Tuttavia il logo risulta essere pi¨ alto del men¨, e l'immagine impostata parte da pi¨ in basso come se ci fosse un padding.


Vorrei che l'immagine del logo abbia la stessa altezza e padding del men¨, e che sia responsive.
Dunque che posso mettere anche un'immagine pi¨ alta, e sarÓ ridimensionata in automatico senza alterarne le proporzioni.
Immagino he dovr˛ operare overraidando delle classi del css ma non so bene come muovermi.


Come dovrei procedere?


Grazie mille

Offline danielecr

  • Abituale
  • ****
  • Post: 1009
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #1 il: 05 Ott 2018, 17:56:04 »
Scrivi il link al sito, sarÓ pi¨ facile aiutarti.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29447
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:[Gantry] Rendere il logo responsive
« Risposta #2 il: 05 Ott 2018, 19:03:42 »
Il logo nativo del template Ŕ responsive, ti basta sostituire l'immagine nell'apposito spazio riservato al logo lasciando la stessa classe.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #3 il: 07 Ott 2018, 18:48:28 »

Dato che sto sviluppando il sito in locale, vi mostro degli screen.


Ho usato il logo di default del template, ma dal layout manager del Gantry ho spostato il logo sulla stessa riga del men¨ e credo che le classi CSS predefinite non siano state scritte per essere visualizzate sulla stessa riga.


L'effetto Ŕ il seguente e come si nota dallo screen il logo ha del padding in quanto inizia dalla linea 1 e non rispetta le dimensioni del men¨ che dovrebbe finire alla linea 2.
logo" border="0


Qui mostro come ho semplicemente inserito il logo:




Come dovrei fare?

Grazie e buona giornata

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 4564
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #4 il: 07 Ott 2018, 20:25:40 »
se ridemensioni l'immagine abbassandola?

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #5 il: 08 Ott 2018, 18:26:43 »

Ho provato a districarmi fra le classi CSS e il backend del Gantry ma non sono ancora riuscito a venirne a capo.

Scrivi il link al sito, sarÓ pi¨ facile aiutarti.
Ho caricato il sito in remoto al seguente url: http://helloworld.jdevcloud.com/index.php/it/

Il logo nativo del template Ŕ responsive, ti basta sostituire l'immagine nell'apposito spazio riservato al logo lasciando la stessa classe.
E' vero il logo Ŕ responsive, se riduco la dimensione del browser, il logo si riduce, tuttavia andrebbe modificato l'altezza del men¨ per adattarlo a quello del logo o viceversa, e il logo non risulta centrato col men¨, parte da pi¨ in basso, come se ci fosse un padding, ma che non ho trovato all'interno del css.
sito in remoto:http://helloworld.jdevcloud.com/index.php/it/

se ridemensioni l'immagine abbassandola?
Resterebbe il problema che l'immagine del logo non sarebbe centrata col men¨  :(


Grazie mille a tutti per le risposte di aiuto  :D
« Ultima modifica: 08 Ott 2018, 18:31:53 da marcothemix »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29447
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:[Gantry] Rendere il logo responsive
« Risposta #6 il: 08 Ott 2018, 19:00:40 »
Il logo originale ha un altezza di 150px, puoi modificare questo eealtri valori come margin, padding, ecc. agendo sul custom.css dopo aver individuato la classe della immagine.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #7 il: 08 Ott 2018, 19:25:39 »
Il logo originale ha un altezza di 150px, puoi modificare questo eealtri valori come margin, padding, ecc. agendo sul custom.css dopo aver individuato la classe della immagine.


Se ho individuato bene la classe, non contiene nessun padding, ma solo la dimensione di 150px.
Credo che il logo si trovi a sua volta dentro qualche altro container, ma non riesco a venirne a capo.


Qui c'Ŕ la classe che ho trovato del logo:


.gantry-logo {
    display: inline-block;
    @include breakpoint(mobile-only) {
        display: block;
        text-align: center;
    }
    img {
        width: 150px;
    }
}

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3775
  • Sesso: Maschio
    • Mostra profilo
    • Documentazione Gantry Framework
Re:[Gantry] Rendere il logo responsive
« Risposta #8 il: 08 Ott 2018, 19:43:41 »
Dico la mia, potresti provare di aggiungere nel tuo custom.scss questa istruzione ?
Codice: [Seleziona]
#g-navigation .g-main-nav {margin: auto!important;}Vedi che succede

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29447
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:[Gantry] Rendere il logo responsive
« Risposta #9 il: 08 Ott 2018, 20:04:04 »
La classe Ŕ quella e il padding o il margin puoi aggiungerlo per spostare il logo. Io in un mio sito ho aumentato le dimensioni agendo su quella classe, l'ho fatto nel custom.css che ho aggiunto come da documentazione gantry.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #10 il: 08 Ott 2018, 21:57:41 »
Dico la mia, potresti provare di aggiungere nel tuo custom.scss questa istruzione ?
Codice: [Seleziona]
#g-navigation .g-main-nav {margin: auto!important;}Vedi che succede
Ho inserito il codice indicato nel custom.scss e ricompilato.
Ora logo e men¨ si trovano alla stessa altezza  :D
Tuttavia si Ŕ venuto a creare dello spazio vuoto(indicato dalle linee blu) sia sopra che sotto il men¨ che non ci deve essere.



La classe Ŕ quella e il padding o il margin puoi aggiungerlo per spostare il logo. Io in un mio sito ho aumentato le dimensioni agendo su quella classe, l'ho fatto nel custom.css che ho aggiunto come da documentazione gantry.
Ho provato a forzare il padding e il margin a zero ma non ha alcun effetto, resta quello spazio vuoto sopra e sotto il men¨ e logo.


Ho aggiunto questa regola al css:


.gantry-logo {
    img {
        height: 62px;
        width: auto
    }
}


In questo modo logo e men¨ hanno la stessa altezza.
Per˛ non mi piace inserire dei valori statici, come posso richiamarmi la stessa altezza del men¨?
O ancor meglio rendere l'altezza del men¨ uguale all'altezza del logo?
In questo modo se capita un logo che deve essere pi¨ alto, il men¨ si adatterÓ automaticamente.
qualcosa del tipo:


#menu {
    height: .gantry-logo.img.height
}
Ma non conosco la sintassi, nÚ riesco a capire dall'inspector quale sia la classe del men¨


Grazie mille


Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3775
  • Sesso: Maschio
    • Mostra profilo
    • Documentazione Gantry Framework
Re:[Gantry] Rendere il logo responsive
« Risposta #11 il: 08 Ott 2018, 22:41:54 »
Guarda, non complicarti la vita inserendo valori per il padding. Gantry ha giÓ predisposto delle classi apposta . Devi andare in Layout Manager > Impostazioni (rotellina) per Logo e Menu. Devi scegliere nomargin e nopadding dalla casella a discesa  Ti consiglio di dare un'occhiata alla documentazione  E tutto chiaro
Ciao

Offline marcothemix

  • Appassionato
  • ***
  • Post: 406
  • Sesso: Maschio
    • Mostra profilo
Re:[Gantry] Rendere il logo responsive
« Risposta #12 il: 09 Ott 2018, 11:21:28 »
Guarda, non complicarti la vita inserendo valori per il padding. Gantry ha giÓ predisposto delle classi apposta . Devi andare in Layout Manager > Impostazioni (rotellina) per Logo e Menu. Devi scegliere nomargin e nopadding dalla casella a discesa  Ti consiglio di dare un'occhiata alla documentazione  E tutto chiaro
Ciao


WoW ottimo!
Ho letto la guida che hai in calce, non sapevo di questa features, Ŕ molto comoda e sopratutto pulita.
Tuttavia non fa del tutto al caso mio in quanto un p˛ di margin mi fa piacere.
Come posso definire io delle nuove Block variazion?


Attualmente ho risolto creando i seguenti override nel custom.scss, ma preferirei farlo con dei Block variation custom.
Anche perchÚ usando i Block varition son certo di applicare la modifica solo al blocco di interesse.
In questo caso ad esempio la classe .g-content non credo gestisca solo il men¨ e ne ho fatto un override globale


// Altezza logo 65px + 5px di padding
.gantry-logo-custom {
    padding: 5px;
    margin: 0px;
    img {
        height: 62px;
        width: auto
    }
}

// Da al men¨ la stessa altezza del logo
.g-menu-item-container {
    padding: 24px !important;
}

// Per il men¨, niente margin e padding
.g-content {
    padding: 0rem;
    margin: 0rem;
}
#g-navigation .g-main-nav {
    margin: 0rem;
    padding: 0rem;
}

Grazie mille

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3775
  • Sesso: Maschio
    • Mostra profilo
    • Documentazione Gantry Framework
Re:[Gantry] Rendere il logo responsive
« Risposta #13 il: 09 Ott 2018, 13:36:13 »
Nomargin e nopadding li hanno inseriti per azzerare i valori (uno o l'altro, o tutti e due) che pu˛ tornare comodo in molti casi. Ma se vuoi assegnare dei certi valori  secondo me dovresti aggiungere una classe personalizzata e definirla nel custom.scss. Ovvio che puoi crearti delle variazioni per i blocchi  ma Ŕ un po' pi¨ complicato, devi modificare certi file.yaml ... Non voglio entrare nei dettagli .

 

Torna su