Joomla.it Forum
Joomla! 3 => I Template di Joomla! 3 => : bsal 04 Jun 2017, 13:38:35
-
Premetto che ho provato a cercare un topic sull'argomento ma non ho trovato nulla che risponda al mio problema (nel caso, prego un moderatore di mandarmi il link del topic prima di chiudere questo), la situazione è questa:
lo header del sito www.cislfpalessandriaasti.it su tablet è visibile solo parzialmente e su cellulare non è per nulla visibile, inoltre anche nella visualizzazione da desktop tra il menu' principale e lo header permane una fascia blu che vorrei cancellare avvicinando il menu'.
Anni fa avevo con, fatica e con l'aiuto del forum, configurato a puntino il sito con joomla 2.5, adesso con il 3.7 sono punto e a capo :( . Grazie in anticipo a chi vorrà dare una mano.
-
Ciao, header, fascia blu, etc sono settati nel file /templates/beez3/css/personal.css in particolare nelle sezioni che iniziano con @media only screen and.... (classe .logoheader per l'header in particolare)
Si tratta di apportare le modifiche che vuoi a quel css.
Visto che l'immagine dell'header non si adatta alle dimensioni dello screen, sempre utilizzando i media queries puoi fare diverse immagini header a seconda delle dimensioni dello schermo e applicarle di conseguenza.
-
Salve ragazzi, scusate l'intromissione e la riapertura dell'argomento, qualcuno saprebbe spiegarmi come modificare il file per inserire differenti immagini alle differenti risoluzioni?
se non ho capito male questa è la parte che punta al file immagine:
.logoheader {
background: url(../images/personal/personal2.png) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
}
Mentre questa stabilisce che la stessa immagine con le stesse dimensioni (non ne varia la grandezza) viene usata per visualizzazioni superiori a 480 px:
@media only screen and (max-width: 480px) {
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
#fontsize{display:none}
#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
{
float: none;
width: 100%
}
#header {padding-top:3em}
#header form {margin:0}
.logoheader {background:#0C1D43; min-height:100px; margin:0}
.box {
border-left: 0 !important;
border-bottom: solid 1px #ddd;
}
#line {
text-align: center;
top: 0;
right: auto;
max-width: 100% ;
min-width:100%;
margin: 0 0px; background:#095197;
}
#header form input {
float: none; margin-bottom:4px
}
#menuwrapper { margin-top:10px; }
#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
#header ul.menu li a:link,
#header ul.menu li a:visited {
display: block;
padding: 6px 10px;
border-bottom: solid 1px #ccc
}
}
Ore per inserire immagini differenti basta creare altre .logoheader tipo:
.logoheader1 {
background: url(../images/personal/personal2_telefono.png) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
}
ed inserire una nuova routin @media only screen and (max-width: 480px) con al posto di 480px una differente risoluzione e lasciare invariato il resto o la cosa è più complessa?
Grazie per le dritte!
-
Ciao,
in questo forum la prassi è di non accodarsi a discussioni altrui ma da aprire sempre un proprio post nella categoria corretta con un titolo esplicativo del tuo quesito e fornendo i maggior numero di dettagli possibili.Grazie per la comprensione.