[ word press ] inserire banner in testata di fianco al logo , aiuto!

alex92

[ word press ] inserire banner in testata di fianco al logo , aiuto!

Ciao , ho da poco aperto un mio sito e mi sono iscritto ad un programma di affiliazione. Vorrei inserire un banner nella testata del mio sito di fianco al logo ma non so come fare. Dovrei modificare il file header.php ma non ne capisco molto. Vi prego aiutatemi. Il sito è youmen.it

fda

Ciao alex92.
Quelli che seguono sono suggerimenti. Considera che non ho i file del tuo sito per provarli, quindi basta una virgola perché non funzionino. Se non vanno al primo colpo cerca l'errore, anche chiedendo in questa discussione (è possibile che dipenda da div e display).

Per prima cosa fai una copia di backup dei file header.php e style.css (qui: wp-content/themes/sahifa/style.css).

Archiviati per sicurezza i file originali, apri style.css e apporta le seguenti modifiche:


/* Questa istruzione già c'è alla riga 324, occorre soltanto inserire il display: inline */
.logo {
    float: left;
    display: inline;
}


/* Questa istruzione non esiste e occorre inserirla, va bene dopo .logo alla riga 324 */
.header-banner {
    float: right;
    display: inline;
}


/* Per quest'intervallo non dovrebbe servire altro e puoi non copiare le 3 righe che seguono */
@media only screen and ( max-width: 1024px ){
    /* eventuali istruzioni */
}


/* Il blocco per la media query già esiste, occorre soltanto modificare .logo alla riga 2700 come segue. Se esiste il rischio che tu ti confonda copia quello che segue alla fine del file, va bene ugualmente. */
@media only screen and (max-width: 985px) and (min-width: 768px){
    .logo, .header-banner {
    float: none;
    text-align: center;
    display: block;
    }
}


/* Il blocco per la media query già esiste, occorre soltanto modificare .logo alla riga 2726 come segue. Se esiste il rischio che tu ti confonda copia quello che segue in alla fine del file, va bene ugualmente. */
@media only screen and (max-width: 767px) and (min-width: 480px){
    .logo, .header-banner {
    float: none;
    text-align: center;
    display: block;
    }
}


/* Il blocco per la media query già esiste, occorre soltanto modificare .logo alla riga 2810 come segue. Se esiste il rischio che tu ti confonda copia quello che segue in alla fine del file, va bene ugualmente. */
@media only screen and (max-width: 479px){
    .logo, .header-banner {
    float: none;
    text-align: center;
    display: block;
    }
}

Adesso apri header.php e sostituisci le righe di codice relative al div class="header-content" come segue:


<div class="header-content">
    <div class="logo">
        <h1><a title="Youmen.it" href="http://www.youmen.it/">
            <img src="http://www.youmen.it/wp-content/uploads/2013/10/a9cjmxy91xo73fzaavqy3.png" alt="Youmen.it" /><strong>Youmen.it Il benessere dell'uomo</strong></a>
        </h1>
    </div><!-- .logo /-->
    <div class="header-banner">
        /* Qui inserisci il codice del banner */
    </div>
    <div class="clear"></div>
</div>

Così hai due div affiancati con display inline:

quello del logo allineato a sinistra
quello del banner allineato a destra

Comportamento responsive
Sotto i 985px ai div viene applicato il display block che li mette uno dopo l'altro, mentre float e text-align servono a centrarne il contenuto.
Nota che le soluzioni adottate per il banner in relazione alle dimensioni dello schermo sono del tutto arbitrarie e puoi cambiarle: per farlo intervieni sulla classe header-banner nelle media query.

Spero di esserti stato d'aiuto.
Aggiornaci.

Francesco