Texto ao lado do logotipo no discurso, ambos vinculados

Suporte
1

Olá,

Eu queria adicionar texto ao lado do logotipo na minha instância do Discourse e este tópico funcionou para mim nesse assunto:

No entanto, o texto não está vinculado. Como posso vincular o texto ao URL do fórum, assim como o logotipo está?

Agradeceria sua orientação sobre este assunto.

2

Parece que a maneira como isso é feito neste site é ter um logotipo amplo que inclui o texto. Que tal fazer isso?

3

Basicamente, ele mostra o logotipo padrão do discourse da maneira como está definido nas configurações do site. Em seguida, adiciona um conteúdo :after para incluir o texto. Portanto, o texto vem do CSS.

Este é o código:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Algum texto após o logotipo";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

E este é o 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>

Agora, o que eu quero é definir o link do fórum também para o texto after. (O logotipo tem o link do site como pretendido pelo discourse)

4

Primeiro, há uma espécie de erro de digitação na primeira linha CSS (: escrito duas vezes).
Em seguida, se você alterar o seletor para direcionar o link real que contém o logotipo:

.d-header .title a:after {

Então o texto será contido na tag <a> e terá o link também.

image

Parece que a maneira como isso é feito neste site é ter um logotipo amplo que inclui o texto. Que tal fazer isso?

Estranhamente, Robert fez a mesma pergunta no tópico vinculado e também não obteve resposta :upside_down_face:

5

Se eu entendi corretamente… Isso poderia ajudar? :slightly_smiling_face:

Isso adicionará este HTML após o logo <a>Após texto do logo</a>

Cabeçalho

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

Fica com uma aparência ruim em celulares. Posso ocultar o texto com CSS em telas menores, mas quero que o logotipo seja exibido o tempo todo.

7

Isto é perfeito. Obrigado @Don

8

Para este caso de uso, acho que seria melhor se você usasse um logotipo diferente no celular? Existe uma configuração no site para isso chamada logo do celular em branding.

oseusite/admin/site_settings/category/branding

9

Você está certo. Eu não sabia que isso existia. Sou um veterano. Não testei muitos recursos novos. Obrigado

Agora isso faz mais sentido.