Texte à côté du logo dans le discours, tous deux liés

Soutien
1

Bonjour,

Je voulais ajouter du texte à côté du logo sur mon instance Discourse et ce sujet m’a aidé à ce sujet :

Cependant, le texte n’est pas lié. Comment puis-je lier le texte à l’URL du forum, tout comme le logo l’est ?

J’apprécierais vos conseils à ce sujet.

2

Il semble que la façon dont cela est fait sur ce site soit d’avoir un logo large qui inclut le texte. Que diriez-vous de faire cela ?

2 « J'aime »
3

Essentiellement, il affiche le logo par défaut de Discourse tel qu’il est défini dans les paramètres du site. Ensuite, il ajoute un contenu :after pour inclure le texte. Le texte provient donc du CSS.

Voici le code :

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

Et voici le 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();
});

Maintenant, ce que je veux, c’est aussi définir un lien de forum pour le texte after. (Le logo a le lien du site web comme prévu par Discourse)

4

Tout d’abord, il y a une sorte de faute de frappe sur la toute première ligne CSS (deux fois le caractère :).
Ensuite, si vous modifiez le sélecteur pour cibler le lien réel qui contient le logo :

.d-header .title a:after {

Alors le texte sera contenu dans la balise <a> et aura également le lien.

image

Il semble que la façon dont cela est fait sur ce site est d’avoir un logo large qui inclut le texte. Que diriez-vous de faire cela ?

Bizarrement, Robert a posé la même question dans le sujet lié et n’a pas eu de réponse non plus :upside_down_face:

1 « J'aime »
5

Si je comprends bien… Cela pourrait aider ? :slightly_smiling_face:

Cela ajoutera ce HTML après le logo  <a href="/" class="after-logo">Texte après le logo </a> 

En-tête

 <script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'Texte après le logo'
    });
  });
 </script>
 
2 « J'aime »
6

Cela donne une mauvaise apparence sur les téléphones portables. Je peux masquer le texte avec du CSS sur les petits écrans, mais je veux que le logo soit affiché en permanence.

7

C’est parfait. Merci @Don

1 « J'aime »
8

Pour ce cas d’utilisation, je pense qu’il serait préférable d’utiliser un logo différent sur mobile ? Il existe un paramètre de site pour cela appelé logo mobile sous la section branding.

votresite/admin/site_settings/category/branding

1 « J'aime »
9

Vous avez raison. Je ne savais pas que cela existait. Je suis un ancien. Je n’ai pas testé beaucoup de nouvelles fonctionnalités. Merci

Maintenant, cela a plus de sens.

3 « J'aime »
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.