Imagen y texto como logotipo

Soporte
1

Hola.

Tengo una imagen de ‘logo’ configurada para mi foro. También tengo un ‘título’ configurado.

Actualmente, en la cabecera, solo se muestra el ‘logo’. Me gustaría que el ‘título’ apareciera a su derecha. Me gustaría que fuera en el mismo formato en que los títulos de los temas aparecen junto al logo cuando haces scroll por una página: que muestre el logo y el título del sitio de forma predeterminada, y cuando hagas scroll en un tema, el título del tema reemplace al título del sitio.

¿Es esto posible? He buscado en Google y no he encontrado una solución.

Gracias.

2

Si también quieres texto, ¿por qué no diseñas un logotipo que lo incluya?

3

Puedes hacer algo como esto:

d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Aquí hay algo de texto";
}

image
image1004×394 21.3 KB

Aún necesitarás ocultarlo en los lugares donde no lo desees, como cuando se muestra el título de un tema.

image
image994×402 20.6 KB

Puedes lograr esto evitando que se muestre en páginas con la clase archetype-regular en el cuerpo (en cuyo caso no aparecerá en las páginas de temas en absoluto) o mediante JavaScript que lo haga desaparecer, tal como se intercambian los logotipos grande y pequeño una vez que comienzas a desplazarte.

5

Muchas gracias por tu respuesta. ¡Eso es genial!

¿Sabes qué JS necesitaría para que desaparezca como mencionas? Eso sería excelente.

6

Prueba esto

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

Aquí lo tienes como componente

7

¡Muchas gracias! Esto es perfecto.