Add Text In Header Beside Logo

[dfuentes (Daniel Fuentes)]

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:

How can I go about getting this done?

Thanks in advance for any and all feedback!

[Johani (Joe)]

Hey Daniel

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

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

[Jonathan5]

@Johani

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

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.

[Lilly (Lillian)]

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:

Upcoming Header Changes - Preparing Themes and Plugins

We’ve recently been working on updating Discourse’s header from the legacy ‘widget’ rendering system to modern Glimmer components. This change is now available in Discourse core behind the glimmer header mode site setting. Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: core implementation finished & enabled on Meta upgrade advice published; console deprecation messages enabled …

Using Plugin Outlet Connectors from a Theme or Plugin

Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “<PluginOutlet”, or use the plugin outlet locations theme component. (e.g. topic-above-posts). Wrapper outlets Some outlets in core look like <PluginOutlet @name="foo" />. These allow you…

[Jonathan5]

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…

[manuel (Manuel Kostka)]

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.

[Arkshine]

@manuel

api.renderInOutlet("home-logo__after", HeaderLogoTitle);

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.

[manuel (Manuel Kostka)]

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

[James_Cribbs]

Trying to do this now but having some trouble - how do I access the “glimmer component in components/header-logo-title.gjs”?

My community is here: https://community.worldradioleague.com/.

I’m on the paid plan - maybe I don’t have access to Discourse core to see this?

[manuel (Manuel Kostka)]

I had wrapped this in a component, you could try using it: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. It adds the site title and short site description by default. Alternatively, you can add custom text for the title and the description on the component settings.