Hallo,
Ich wollte Text neben dem Logo auf meiner Discourse-Instanz hinzufügen, und dieses Thema hat mir dabei geholfen:
Allerdings ist der Text nicht verlinkt. Wie kann ich den Text mit der Forum-URL verknüpfen, genau wie das Logo?
Ich würde mich über Ihre Anleitung in dieser Angelegenheit freuen.
Es sieht so aus, als ob die Art und Weise, wie dies auf dieser Website gehandhabt wird, darin besteht, ein breites Logo zu haben, das den Text enthält. Wie wäre es damit?
Im Grunde zeigt es das Standardlogo von Discourse so an, wie es in den Website-Einstellungen festgelegt ist. Dann wird ein :after-Inhalt hinzugefügt, um den Text einzufügen. Der Text stammt also aus CSS.
Das ist der 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;
}
Und das ist das Skript:
$(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();
});
Jetzt möchte ich, dass der Forum-Link auch zum nachgestellten Text hinzugefügt wird. (Das Logo hat den Website-Link, wie von Discourse vorgesehen).
Zuerst gibt es eine Art Tippfehler in der allerersten CSS-Zeile (doppeltes : geschrieben).
Wenn Sie dann den Selektor ändern, um den tatsächlichen Link anzusprechen, der das Logo enthält:
.d-header .title a:after {
Dann wird der Text im <a>-Tag enthalten sein und auch den Link haben.
Es sieht so aus, als ob die Art und Weise, wie dies auf dieser Website gemacht wird, darin besteht, ein breites Logo zu haben, das den Text enthält. Wie wäre es damit?
Seltsamerweise stellte Robert im verlinkten Thema die gleiche Frage und erhielt ebenfalls keine Antwort 
Wenn ich das richtig verstehe… Das könnte helfen? 
Dies fügt dieses HTML nach dem Logo hinzu: <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>
Es sieht auf Mobiltelefonen schlecht aus. Ich kann den Text auf kleineren Bildschirmen mit CSS ausblenden, aber ich möchte, dass das Logo jederzeit angezeigt wird.
Das ist perfekt. Danke, @Don
Für diesen Anwendungsfall wäre es meiner Meinung nach besser, wenn Sie ein anderes Logo für Mobilgeräte verwenden? Es gibt eine Website-Einstellung dafür, die unter Branding als mobile logo bezeichnet wird.
yoursite/admin/site_settings/category/branding
Sie haben Recht. Das wusste ich nicht. Ich bin ein alter Hase. Habe nicht viele neue Funktionen getestet. Danke
Das ergibt jetzt mehr Sinn.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.