Text alongside logo in discourse both linked

Support

AI-generated summary

The discussion revolves around adding text alongside a logo in Discourse, with the text also being linked. Arta_S initially found a solution to add the text using CSS, but it wasn’t linked. Canapin suggested modifying the CSS to target the link containing the logo, but this didn’t quite work for Arta_S.

Don provided a different solution using a script that adds an HTML link after the logo, which Arta_S found perfect. However, Arta_S noted that this solution didn’t look good on mobile phones.

Don then suggested using a different logo for mobile, which can be set in the site settings under branding. Arta_S found this solution helpful, also realizing that having a wide logo that includes the text, as suggested by pfaffman, is a viable alternative.

1

Hello,

I wanted to add text alongside the logo on my discourse instance and this topic worked for me on this matter:

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

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?

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)

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.

image

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 :upside_down_face:

5

If I understand correctly… This could help? :slightly_smiling_face:

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

7

This is perfect. Thank you @Don

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

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.