Testo accanto al logo in discourse entrambi collegati

Ciao,

Volevo aggiungere del testo accanto al logo sulla mia istanza di Discourse e questo argomento mi ha aiutato in questo senso:

Tuttavia, il testo non è collegato. Come posso collegare il testo all’URL del forum proprio come fa il logo?

Apprezzerei la tua guida in merito.

Sembra che il modo in cui questo viene fatto su questo sito sia avere un logo ampio che include il testo. Che ne dici di fare così?

2 Mi Piace

In sostanza, mostra il logo predefinito di discourse nel modo in cui è impostato nelle impostazioni del sito. Quindi aggiunge un contenuto :after per includere il testo. Quindi il testo proviene dal CSS.

Questo è il codice:

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

E questo è lo 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>

Ora quello che voglio è impostare anche il link del forum al testo “after”. (Il logo ha il link del sito web come previsto da discourse)

Innanzitutto, c’è una specie di errore di battitura sulla primissima riga CSS (due volte :)
Poi, se cambi il selettore per puntare al link effettivo che contiene il logo:

.d-header .title a:after {

Allora il testo sarà contenuto nel tag <a> e avrà anche il link.

image

Sembra che il modo in cui questo viene fatto su questo sito sia avere un logo ampio che include il testo. Che ne dici di fare così?

Stranamente, Robert ha posto la stessa domanda nell’argomento collegato e non ha ricevuto risposta neanche lui :upside_down_face:

1 Mi Piace

Se ho capito bene… Questo potrebbe aiutare? :slightly_smiling_face:

Questo aggiungerà questo html dopo il logo <a href="/" class="after-logo">After logo text</a>

Header

<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>
2 Mi Piace

Fa brutta figura sui telefoni cellulari. Posso nascondere il testo con CSS su schermi più piccoli, ma voglio che il logo venga visualizzato in ogni momento.

Questo è perfetto. Grazie @Don

1 Mi Piace

Per questo caso d’uso, penso che potrebbe essere meglio se utilizzassi un logo diverso sui dispositivi mobili? Esiste un’impostazione del sito per questo chiamata logo mobile nella sezione branding.

tuosito/admin/site_settings/category/branding

1 Mi Piace

Hai ragione. Non sapevo esistesse. Sono un vecchio utente. Non ho testato molte nuove funzionalità. Grazie

Ora ha più senso.

3 Mi Piace

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