Arta_S
(Arta)
February 16, 2022, 10:46am
1
Hello,
I wanted to add text alongside the logo on my discourse instance and this topic worked for me on this matter:
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) {
…
Howevever, the text is not linked. How can I link the text to forum URL just like the logo is?
I would appreciate your guidance on this matter
pfaffman
(Jay Pfaffman)
February 16, 2022, 12:06pm
2
It looks like the way that this is done on this site is to have a wide logo that includes the text. How about doing that?
2 Likes
Arta_S
(Arta)
February 16, 2022, 12:09pm
3
Basically, it shows the default logo of discourse the way it is set to site setting. Then adds a :after content to include the text. So the text is coming from CSS.
This is the 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;
}
And this is the 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>
Now what I want is to set forum link to the after text as well. (The logo has the website link as intended by discourse)
Canapin
(Coin-coin le Canapin)
February 16, 2022, 12:39pm
4
First, there’s is kind of a typo on the very first CSS line (:
written twice).
Then, if you change the selector to target the actual link that contains the logo:
.d-header .title a:after {
Then the text will be contained in the <a>
tag and have the link as well.
It looks like the way that this is done on this site is to have a wide logo that includes the text. How about doing that?
Weirdly, Robert asked the same question i the linked topic and had no reply either
1 Like
Don
February 16, 2022, 12:46pm
5
If I understand correctly… This could help?
This will add this html after 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 Likes
Arta_S
(Arta)
February 16, 2022, 12:56pm
6
It makes it look bad on mobile phones. I can hide the text with css on smaller screens but I want the logo to be displayed at all time.
Arta_S
(Arta)
February 16, 2022, 12:56pm
7
This is perfect. Thank you @Don
1 Like
Don
February 16, 2022, 1:04pm
8
For this use case I think might be better If you use a different logo on mobile? There is a site setting for this called mobile logo
under branding.
yoursite/admin/site_settings/category/branding
1 Like
Arta_S
(Arta)
February 16, 2022, 1:07pm
9
You are right. I didn’t know this existed. I am an old timer. Haven’t tested lots of new features. Thank you
Now this makes more sense.
3 Likes
system
(system)
Closed
March 18, 2022, 1:07pm
10
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.