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.
