Texto junto al logo en discourse ambos enlazados

[Arta_S (Arta)]

Hola,

Quería añadir texto junto al logo en mi instancia de Discourse y este tema me sirvió para este asunto:

Image and text as logo

Try this .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) { …

Sin embargo, el texto no está enlazado. ¿Cómo puedo enlazar el texto a la URL del foro, tal como lo está el logo?

Agradecería su orientación al respecto.

[pfaffman (Jay Pfaffman)]

Parece que la forma en que se hace en este sitio es tener un logotipo ancho que incluya el texto. ¿Qué tal si hacemos eso?

[Arta_S (Arta)]

Básicamente, muestra el logo predeterminado de Discourse tal como está configurado en la configuración del sitio. Luego agrega un contenido :after para incluir el texto. Por lo tanto, el texto proviene de CSS.

Este es el código:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Algún texto después del logo";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

Y este es el script:

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

Ahora, lo que quiero es establecer también el enlace del foro en el texto after. (El logo tiene el enlace del sitio web según lo previsto por Discourse).

[Canapin (Coin-coin le Canapin)]

Primero, hay una especie de error tipográfico en la primera línea CSS (: escrito dos veces).
Luego, si cambia el selector para apuntar al enlace real que contiene el logo:

.d-header .title a:after {

Entonces el texto estará contenido en la etiqueta <a> y también tendrá el enlace.

Parece que la forma en que se hace esto en este sitio es tener un logo ancho que incluya el texto. ¿Qué tal si hacemos eso?

Curiosamente, Robert hizo la misma pregunta en el tema enlazado y tampoco recibió respuesta

[Don]

Si entiendo correctamente… ¿Esto podría ayudar?

Esto agregará este html después del logo <a href="/" class="after-logo">Texto después del logo</a>

Encabezado

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'Texto después del logo'
    });
  });
</script>

[Arta_S (Arta)]

@Canapin

Curiosamente, Robert hizo la misma pregunta en el tema enlazado y tampoco tuvo respuesta.

Hace que se vea mal en los teléfonos móviles. Puedo ocultar el texto con CSS en pantallas más pequeñas, pero quiero que el logo se muestre en todo momento.

[Arta_S (Arta)]

Esto es perfecto. Gracias @Don

[Don]

@Arta_S

Hace que se vea mal en los teléfonos móviles.

Para este caso de uso, creo que sería mejor si usaras un logotipo diferente en el móvil. Hay una configuración del sitio para esto llamada logotipo móvil en la sección de marca.

tudominio.com/admin/site_settings/category/branding

[Arta_S (Arta)]

Tienes razón. No sabía que esto existía. Soy un veterano. No he probado muchas funciones nuevas. Gracias

@pfaffman

Parece que la forma en que se hace esto en este sitio es tener un logo ancho que incluya el texto. ¿Qué tal hacer eso?

Ahora esto tiene más sentido.