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] How can I go about getting this done? Thanks in advance for any and all feedback!

Hey Daniel :wave: You can use something like this to add text next to the header logo on your site api.decorateWidget("home-logo:after", helper => { const titleVisible = helper.attrs.minimized; const headerText = "Text you want to add"; // You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here [image] Beginner's guide to using Discourse Themes Site Management 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 …

[image] Joe: 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.

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: [image] Upcoming Header Changes - Preparing Themes and Plugins Development 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. timer_clock Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: white_check_mark core implementation finished & enabled on Meta white_check_mark upgrade advice published; console deprecation messages enabled … [image] Using Plugin Outlet Connectors from a Theme or Plugin Developer Guides 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 “ . These allow you…

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:

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; {{#unless @outletArgs.minimized}} {{this.siteSettings.title}} {{#if this.siteSettings.short_site_description}} {{this.siteSettings.short_site_description}} {{/if}} {{/unless}} } 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.

[image] Manuel Kostka: 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.

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?

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.

Add Text In Header Beside Logo

Development

manuel (Manuel Kostka) January 27, 2025, 11:43pm 9

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

Topic		Replies	Views
How to modify the header HTML, but still remaining the default founctions Product Support	3	3920	May 25, 2018
Need plugin code for customised dicourse header Product Support	8	1746	May 10, 2019
Text alongside logo in discourse both linked Product Support	8	1008	February 16, 2022
Link on Top header to Go to Home page of main site Product Support	1	1414	February 25, 2020
How to add custom html next to logo using discourse plugin methods Product Support	1	1073	February 19, 2021

Add Text In Header Beside Logo

Related topics