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

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

5 Likes
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 :

6 Likes
5

This topic was automatically closed after 2207 days. New replies are no longer allowed.