Immagine e testo come logo

Supporto
1

Ciao.

Ho impostato un’immagine ‘logo’ per il mio forum. Ho anche impostato un ‘titolo’.

Attualmente, nell’intestazione, viene visualizzato solo il ‘logo’. Vorrei fare in modo che il ‘titolo’ appaia accanto ad esso sulla destra. Mi piacerebbe che fosse nello stesso formato in cui i titoli degli argomenti appaiono accanto al logo quando scorri una pagina: così per impostazione predefinita mostra logo e titolo del sito, poi quando scorri un thread il titolo del thread sostituisce il titolo del sito.

È possibile? Ho cercato su Google ma non ho trovato una soluzione.

Grazie.

2

Se vuoi anche il testo, perché non progettare un logo che lo includa?

3

Puoi fare qualcosa del genere

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Ecco un po' di testo";
}

image
image1004×394 21.3 KB

Dovrai comunque nasconderlo dove non è desiderato, ad esempio quando viene visualizzato il titolo di un argomento

image
image994×402 20.6 KB

Puoi farlo impedendone la visualizzazione nelle pagine con la classe del corpo archetype-regular (in tal caso non apparirà affatto nelle pagine degli argomenti) o tramite JavaScript che lo fa scomparire, come avviene per i loghi Grande e Piccolo che vengono sostituiti non appena inizi a scorrere.

5

Grazie mille per la tua risposta. È fantastico!

Sai quale codice JS mi servirebbe per farlo scomparire come hai menzionato? Sarebbe eccellente.

6

Prova questo

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
        $(window).scroll(function(){
            checkScroll()
        }); 
    
        function checkScroll() {
            var y = $(window).scrollTop();		
            if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
        }
        checkScroll();
    });
</script>

Ecco come componente

7

Grazie mille! È perfetto.