Joomla.it Forum
Joomla! 3 => Joomla! 3 => : tamedef 28 Jan 2016, 19:17:51
-
Ciao ragazzi, giocando con la parte superiore all'header di questo sito www.nutrizionistariccardomattolin.it (http://www.nutrizionistariccardomattolin.it) mi sono messo a litigare con l'aggiunta di un logo nel div sp-logo accanto alla scritta con il nome del sito. Vorrei aggiungere un immagine, però, essendo il template responsive, dovrebbe ridimensionarsi con esso e magari scomparire sotto una certa risoluzione. Troppo complicato?
-
Ciao tamedef,
il logo immagine o scritta, lo gestisci da backend. Hai deiverse opzioni, per mobile ecc.
Se vuoi un'immagine con del testo fai un'unica immagine che lo comprenda.
-
Si ne avevo già preparata una mettendo tutto insieme, ma non mi piaceva che lasciava troppo spazio fra inizio pagina e l'header, considerando che ho impostato
#sp-logo {
margin: 0px 0px 0px 0px;
}
e anche il padding a 0
deduco che lo spazio che mi rimane sia imposto dalle dimensioni limitate in lunghezza di sp-logo in favore di sp-menu.
Come posso dare più spazio in larghezza al logo senza modificare le impostazioni del template responsive?
Thanks
-
Ma non è più semplice fare l'immagine nella dimensione giusta? Quella è larga più di 800px...
Comunque puoi aggiungere questo:
.logo img {width:100% !important; height:100% !important;}
ma fai il file custom.css che è meglio.
-
Si l'immagine comunque la devo ridimensionare, ma il problema non è quello, è il rapporto fra altezza e lunghezza, il logo si dovrebbe sviluppare maggiormente in lunghezza e nonostante il codice che mi hai postato riesco a ingrandire solo l'altezza, invece la larghezza massima rimane bloccata dal div sp-menu nonostante il comando width:100%
-
Forse mi sfugge il problema... Fai l'immagine come vuoi che sia. Perché la vuoi deformare dopo?
-
no assolutamente non la voglio deformare...ma se metto un immagine facciamo esempio di 200px non mi arriva ai 200 px..si ferma prima perchè c'è il div del menu che me la blocca.
-
Prova così:
.col-md-9 {
width: 65% !important;
}
.col-md-3 {
width: 35% !important;
}
#sp-header {
height:110px !important;
padding-top:10px;
}
però fai 'sto file custom.css...
-
Allora il logo si sistema come volevo inserendo questo codice, però poi mi cambia anche i rapporti del layout della parte sotto l'header e quindi la colonna di destra con articoli e galleria diventa troppo grande.
Ps: io già inserico le instruzioni nel custom.css del template, non ti riferisci a quello?
-
Ps: io già inserico le instruzioni nel custom.css del template, non ti riferisci a quello?
Sì, solo che io non lo vedo... Ma se c'è ok.
Mi spiace, non riesco a trovare un css che vada bene...
-
Non capisco, la percentuale di spazio riservata al menu e quella riservata al logo deve essere impostata da qualche parte nel template o sbaglio? Non posso modificare semplicemente quella?
-
Può anche essere che no, se usano il css di un'altra parte del template, come si è verificato. Può essere che sì e non la vedo. Può essere che si possa scrivere ad hoc in modo che sia univoca ma adesso non capisco come e dove hai posizionato il marchio...
L'unica è cercare con Firebug e provare a scriverne una per quel pezzo.
O magari fare una nuova posizione a cui assegnare il marchio.
-
Prova ancora questo, poi cedo...
.logo img {
height: 100%;
max-width: 66% !important;
}
#sp-header {
height: 150px !important;
padding-top: 5px;
}
Il secondo è da sostituire probabilmente ad un altro con 110px se vedi che non funziona.
-
Grazie mille adottauncane, ho risolto modificando un pò il codice che hai postato e va alla grande
[/code].logo img {
height: 45%;
max-width: 150% !important;
}
#sp-header {
height: auto !important;
padding-top: 5px;
padding-bottom: 5px;
}
-
Mmmm, però così ti rimane sul menù...
-
Cioè intendi che con risoluzioni più basse il menù viene coperto dal logo?
-
No, su quelle più strette va bene, il menù sparisce. Su quelle sopra i 960px.
-
Anzi nemmeno su quelle più strette, esce. Se lo lasci grande così metti 65%. Oppure riduci l'immagine.
-
Si ho impostato che sotto i 760px di larghezza il menu sparisce, ho praticamente il problema fra i 760 e 990 pixel dove il menu compare sotto al logo, ma mi sono accorto che anche cancellando quel codice il problema rimane.
-
Ho fatto un pò di modifiche al logo e sto provando a inserire un altro menù, per capire se riesco a risolvere il problema legato al responsive (dimensioni tablet) però non riesco a capire come riuscire a centrarlo in altezza e allinearlo a sinistra, nel custom.css inserisco # gruemenu.grue_126 { seguito dal codice dove sbaglio? :(
-
Per il momento ho risolto modificando la dimensione dei caratteri e della spaziatura del menu originale del template.
-
Fossi in te metterei logo e menu su due righe diverse così risolvi il problema.
Forse ti sfugge il fatto che con Helix nella scheda layout puoi fare un sacco di personalizzazioni sul numero e dimensione delle colonne di ogni singola riga. Puoi anche stabilire dimensioni diverse per i vari dispositivi.
PS: se vuoi che il logo sia responsive non metterlo nel template ma usa un modulo html personalizzato e lo salvi nella posizione logo.
-
Si ho visto che hai questa possibilità, ma volevo che logo e scritta mi comparissero alla stessa altezza, quindi sulla stessa riga. Come faccio a inserire il logo accanto alla scritta non inserendolo nel template, scusami la posizione logo non da parte del template stesso?
-
Nella gestione template non mettere nessun logo, crei un modulo html personalizzato e ci metti il tuo logo.
Come posizione scegli appunto logo sempre tu non gli abbia cambiato nome.
Così facendo accanto al menu ti trovi il logo che però è diventato responsive.
Eventualmente in gestione template stabilisci come ripartire la dimensione delle colonne menu e logo
-
Ok allora adesso provo a disattivarlo dal template, però non ho idea di come creare un modulo html personalizzato da pubblicare in quella posizione :(
Un altra domanda, stavo litigando con il modulo che ho pubblicato nella colonna di sinistra con lo slideshow, che sarebbe il modulo di joomgallery, ma mi rendo conto che non è responsive. Ho la possibilità di renderlo tale? visualizzando dal cellulare mi va esterno alla pagina :-\
Grazie mille
-
Qualche dritta sui due problemi? Thanks
-
Va in gestione moduli > nuovo > html personalizzato e inserisci il logo con il pulsante inserisci immagine, a destra devi scegliere in quale posizione far vedere il modulo, dovresti trovare la posizione logo.
In assegnazione menu scegli Su tutte le pagine (dovrebbe già essere così) salva il tutto.
Ora dovresti avere il tuo logo nella stessa posizione che hai ora ma all'interno di un modulo, non dimenticare di toglierlo dal template.
Per l'altro problema non so cosa dirti, sul mio cell lo slideshow si sposta correttamente sotto ai contenuti della pagina
-
grazie ora provo subito. il problema di visualizzazione è con i tablet messi per verticale...fra i 750 e i 1000px di larghezza schermo, sul cellulare funziona bene.
-
nel template prova a cambiare la disposizione delle colonne
-
Cioè? la colonna in questione è quella di destra, l'unica che tengo attiva, il modulo per la visualizzazione dell'anteprima degli articoli è responsive, quello con le immagini no. Vorrei mantenere la stessa disposizione per i moduli.
Ps: per quanto riguarda il logo ho aggiunto una nuova posizione intermedia dove ho inserito l'html personalizzato con l'immagine, centrato con il file custom.css e funziona perfettamente con tutte le risoluzioni. ;D
-
visto che lo slideshow non è responsive potresti provare nella versione per tablet a ripartire diversamente l'area dei contenuti e la barra laterale da 75% - 25% a 66.6% - 33.3%.
Questo lo puoi fare in gestione template > layout
-
Risolto eliminando la colonna di sinistra che non utilizzavo e come suggerito da te dare un pò più di spazio alla barra laterale sinistra. Ma per curiosità quindi i moduli o sono responsive, altrimenti è complicato fare in modo che si ridimensionino con la pagina?
-
Se nei moduli metti delle misure fisse in px questi non si ridimensionano
-
Nelle impostazioni del modulo provo a non inserire nulla, ma se lo lascio vuoto quando salvo questo rimette le impostazioni di default
-
se non ricordo male questo modulo ti impone di specificare una dimensione in pixel