How to modify the header HTML, but still remaining the default founctions

Product Support

AI-generated summary

In a Support discussion titled How to modify the header HTML, but still remaining the default functions, xiyang seeks to add title text next to the logo without removing default header buttons, fearing it requires rewriting the entire header HTML. awesomerobot suggests using the Discourse Plugin API to insert text via a widget decorator — specifically, adding JavaScript in the theme’s Header section to target home-logo:after, then styling it with CSS. xiyang, new to programming, asks where to find API docs and usable plugins. awesomerobot acknowledges the learning curve and recommends learning by example through existing themes and theme components, plus helpful howto posts covering theme development, plugin outlets, widget virtual DOM, and client-side PluginAPI usage. The key takeaway is that modifying the header without breaking default functionality is possible via API decorators — not full HTML rewrites — and beginners can learn by studying existing code and documentation.

1

Just want to add the title text next to the logo without removing any buttons on the right. For my thought, the only way to do it is to rewrite the whole header HTML inside CSS/HTML edit penal. It is so complicated because I still want to remain the default buttons on the right of the header.

Does anyone have other thought?

2

You can use the plugin API to add text next to your logo. There are more details from a related question here: Adding header links post vdom upgrade

For example: add this to your theme in the Header section

<script type="text/discourse-plugin" version="0.8">
   api.decorateWidget('home-logo:after', helper => {
  return helper.h('div.custom-text', 'I appear after the logo');
});
</script>

You can then use CSS to target the .custom-text div to change the position of your text.

3

Thank you for the reply. I am pretty new for programming. Just wondering, where I can find the API documentation and the plugins which I can used. Thank You.

4

Customizing Discourse isn’t the easiest way to learn programming for beginners, but there’s a lot of existing material here to reference.

One of the most helpful things might be to learn by example, we have a lot of existing themes and theme components — check out the source and see how other people are doing it.

There are also useful posts in howto :