xiyang
(xi yang)
May 23, 2018, 7:28pm
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?
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
xiyang
(xi yang)
May 25, 2018, 1:07am
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.
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 :
In Plugin System Upgrades @eviltrout introduced a system for extending Discourse HTML using plugin outlets.
Plugin outlets are tagged areas in our application that allow you to inject a template. The template has access to the backing controller so it can be dynamic.
Our theme system in /admin/customize/themes allows you to define custom CSS and HTML.
When injecting HTML into your page you can also inject templates, this gives you a very simple mechanism for injecting content into various plu…
The latest builds of Discourse are much faster at rendering topics thanks to our re-written post stream . I’ve written up our new plugin API but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works.
What’s a Virtual DOM?
A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The technique was pioneered by React but has since been integrated into many ot…
Using the client side Plugin API is the safest way to build Discourse Javascript plugins and themes while respecting backwards compatibility.
However, some people have made simple customizations using the Admin > Customization > CSS/HTML and dropping some Javascript into a <script> tag. Previously, it was very difficult to use the withPluginApi to access objects using the Discourse container.
In the latest tests-passed build of Discourse I’ve added the ability to use the pluginAPI via a site c…
Later today I am going to be merging our new post rendering engine into master. Swapping out Ember/HTMLBars for a virtual-dom based renderer provides us with a huge performance increase, but it also has the side effect of being incompatible with how plugins were previously made.
While doing this work, it occurred to me that we made a fairly big mistake in the past by not providing a mechanism for versioning the public APIs used by client side code. We used to encourage people to just dump in w…
6 Likes