Add Text In Header Beside Logo

Dev
1

I’m new to discourse, so I apologize if this is something that is easily done, however, I can’t seem to find where I can define the text that I want to appear beside our logo in the header of our discourse page.

Within the red box in the header is where I’d ideally like to add text saying ‘Community Forums’ or something of the sort:

AddText-Discourse
AddText-Discourse1132×325 37.3 KB

How can I go about getting this done?

Thanks in advance for any and all feedback!

2

Hey Daniel :wave:

You can use something like this to add text next to the header logo on your site

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- change this text

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here

3 Likes
3

This is now causing an error banner to be shown, because of changes to Discourse. Do you have any suggestions for achieving the same result with the new approach? Thanks.

4

Yea that method will no longer work and you need to use the connectors specified here in the section about the home-logo plugin outlet replacing home-logo:after widget decorations:

4 Likes
5

If I have time to do that myself I’ll paste the code here. Alternatively, if someone has time first I’d be very grateful… :slight_smile:

1 Like
7

I just did this for a theme. I’m using the site’s title and short description, but you could also insert values from theme settings or localized text.

Add a glimmer component in components/header-logo-title.gjs

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
 @service siteSettings;

 <template>
   {{#unless @outletArgs.minimized}}
     <div class="header-logo-title">
       <span
         class="header-logo-title__title"
       >{{this.siteSettings.title}}</span>
       {{#if this.siteSettings.short_site_description}}
         <span
           class="header-logo-title__description"
         >{{this.siteSettings.short_site_description}}</span>
       {{/if}}
     </div>
   {{/unless}}
 </template>
}

Attach it to the outlet in /api-initializers/my-theme.js

import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

The #unless-helper checks for minimized state of the logo and only adds the text when the full logo would be visible. If you always want to show it you’d need to drop that condition.

4 Likes
8

You can also use api.renderAfterWrapperOutlet("home-logo") (since v.1.26.0). It has the advantage you use the actual outlet name without providing the magic __before/__after.

4 Likes
9

Thank you @Arkshine. That’s nicer, I updated the previous post.

3 Likes