Imagem e texto como logotipo

Suporte
1

Olá.

Tenho uma imagem de ‘logo’ definida para meu fórum. Também tenho um ‘título’ configurado.

Atualmente, no cabeçalho, apenas o ‘logo’ é exibido. Gostaria de fazer com que o ‘título’ apareça ao lado, à direita. Quero que fique no mesmo formato em que os títulos dos tópicos ficam ao lado do logo quando você rola a página — ou seja, mostrar o logo e o título do site por padrão, e, ao rolar uma discussão, o título da discussão substitua o título do site.

Isso é possível? Pesquisei no Google e não encontrei uma solução.

Obrigado.

2

Se você quer texto também, por que não cria um logotipo com o texto incluído?

3

Você pode fazer algo assim

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Aqui está algum texto";
}

image
image1004×394 21.3 KB

Ainda será necessário ocultá-lo onde não for desejado, como quando o título de um tópico é exibido.

image
image994×402 20.6 KB

Você pode fazer isso impedindo que ele seja exibido em páginas com a classe archetype-regular (nesse caso, ele não aparecerá em páginas de tópicos de forma alguma) ou usando JavaScript que o faça desaparecer, assim como os logotipos Grande e Pequeno são trocados assim que você começa a rolar a página.

5

Muito obrigado pela sua resposta. Isso é ótimo!

Você sabe qual JS eu precisaria para fazê-lo desaparecer como você mencionou? Isso seria excelente.

6

Experimente isto

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

Aqui está como um componente

7

Muito obrigado! Isso é perfeito.