Autore Topic: [RISOLTO] Beez3 immagine header come variarla al variare della risoluzione  (Letto 425 volte)

Offline tba

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
  • Il tempo, non è mai abbastanza !!!!!!!!!!!!
    • Mostra profilo
Salve ragazzi, ho bisogno di inserire diverse immagini nell'header del mio sito in base alla risoluzione di visualizzazione. In particolare utilizzando Beez3 sotto una certa risoluzione (su smartphone) la testa del sito viene visualizzata con una barra blu al psoto dell'immagine da me scelta. nella discussione

beez3: header non visibile/parzialmente visibile su dispositivi mobili


viene proposta una soluzione che però non viene approfondita, io non sono un espertone del settore quindi vi chiedo se qualcuno saprebbe spiegarmi come modificare il file /templates/beez3/css/personal.css  per inserire differenti immagini alle differenti risoluzioni. A quanto mi è parso di  capire 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!
« Ultima modifica: 09 Set 2018, 16:09:19 da marine »
Il tempo che investi nella cultura personale e nella scoperta di ciò che non sai, non è mai tempo perso!

Offline tba

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
  • Il tempo, non è mai abbastanza !!!!!!!!!!!!
    • Mostra profilo
Re:Beez3 immagine header come variarla al variare della risoluzione
« Risposta #1 il: 29 Ago 2018, 20:11:30 »
Nessuno ha una risposta a questa domanda?  :-[ :'(
Il tempo che investi nella cultura personale e nella scoperta di ciò che non sai, non è mai tempo perso!

Offline tba

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
  • Il tempo, non è mai abbastanza !!!!!!!!!!!!
    • Mostra profilo
Re:Beez3 immagine header come variarla al variare della risoluzione
« Risposta #2 il: 02 Set 2018, 18:46:41 »
Non pensavo fosse tanto complessa questa domanda.... :o ::) :-\
Il tempo che investi nella cultura personale e nella scoperta di ciò che non sai, non è mai tempo perso!

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 4564
  • Sesso: Maschio
    • Mostra profilo
Re:Beez3 immagine header come variarla al variare della risoluzione
« Risposta #3 il: 02 Set 2018, 20:42:16 »
Nel tuo primo post parli di un eventuale metodo per ottenere quel risultato, lo hai provato? funziona?

Offline tba

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
  • Il tempo, non è mai abbastanza !!!!!!!!!!!!
    • Mostra profilo
Re:Beez3 immagine header come variarla al variare della risoluzione
« Risposta #4 il: 03 Set 2018, 22:23:59 »
No, ma ho imboccato una strada, se dovesse funzionare posterò il metodo.
Il tempo che investi nella cultura personale e nella scoperta di ciò che non sai, non è mai tempo perso!

Offline tba

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
  • Il tempo, non è mai abbastanza !!!!!!!!!!!!
    • Mostra profilo
Re:Beez3 immagine header come variarla al variare della risoluzione
« Risposta #5 il: 09 Set 2018, 14:11:59 »
Buon giorno a tutti voi, non ho ricevuto alcuna risposta alla mia richiesta, ma grazie all'aiuto di un collega sono venuto da solo a capo della questione. Dato che la cosa potrebbe tornare utile a qualcuno di seguito riporto la soluzione.
Come già detto in altri post il css che stabilisce l'immagine da caricare nell'header è personal.css, che si trova in template/Beez3/css/personal.css, scorrendo il file troverete:



.logoheader {
   background: url(../images/personal/personal2.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}


qui personal2.png  l'immagine predefinita del template.
Cosa e come viene caricato ai vari step di visualizzazione è gestito dai "@media only screen and", che troverete verso la fine del documento, il primo (ed unico) step gestito è 480px, questo determina la variazione dello stile al di sotto dei 480 px.

Premesso ciò veniamo al dunque, io ho modificato 480 px in 200 px (lasciando questa visualizzazione e tutti i stellaggi per INVARIATI), ho quindi creato un nuovo step 250 px e 480px contenente le sole indicazioni per l'immagine da caricare e fatto lo stesso per gli altri step già presenti, avendo cura di sostituire "(max-width: 600px)" con "(min-width: 600px)". A questo punto basterà riutilizzare ".logoheader" incorporandolo in ciascuna visualizzazione con l'immagine giusta e gestire min-height: 250px (variando 250px) per determinare l'altezza dell'header che più vi aggrada in funzione dello specifico step. di seguito vi riporto un esempio di quanto descritto:

VARIAZIONE DI ".logoheader":

.logoheader {
   background: url(../images/personal/MIA IMMAGINE.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}




VARIAZIONE/AGGIUNTA DEGLI STEP DI RISOLUZIONE:



@media only screen and (max-width: 200px) {

   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
   }
}

@media only screen and (min-width: 250px) {

   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 1.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 150px;
}
}

@media only screen and (min-width: 480px) {

   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 2.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}
}

@media only screen and (min-width: 600px) {

   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 3.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}
}

@media only screen and (min-width: 768px) {


   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 4.png[size=78%].png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;

}


@media only screen and (min-width: 992px) {


   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 5.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}
}

@media only screen and (min-width: 1382px) { /* Styles */
 

   img {
  max-width: auto;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

  .logoheader {
   background: url(../images/personal/immagine 6.png) no-repeat right
      bottom #0C1A3E;
   color: #FFFFFF;
   min-height: 250px;
}


Naturalmente se, come ho fatto io, doveste decidere di usare la stessa immagine per le risoluzioni superiori alla 768px, vi basterebbe riportare lo stesso nome file per ciascuna visualizzazioni (o gestire una max-width sulla massima risoluzione). Spero che queste poche righe possano essere utili a qualcun'altro inesperto come me.
« Ultima modifica: 09 Set 2018, 14:17:53 da tba »
Il tempo che investi nella cultura personale e nella scoperta di ciò che non sai, non è mai tempo perso!

 

Torna su