How to customize forum header

How To
,
1

The header is the first place you want to customize In your Discourse forum.
A simple way to customize forum header is to modify standard logo template located in file assets/javascripts/discourse/templates/components/home-logo.hbs

The standard header code looks like:

<a href="{{unbound linkUrl}}" data-auto-route="true">
  {{#if showSmallLogo}}
    {{#if smallLogoUrl}}
      <span class="valign-helper"></span>
      <img class="logo-small" src="{{unbound smallLogoUrl}}" width="33" height="33">
    {{else}}
      <i class="fa fa-home"></i>
    {{/if}}
  {{else}}
    {{#if showMobileLogo}}
      <span class="valign-helper"></span>
      <img id="site-logo" class="logo-big" src="{{unbound mobileBigLogoUrl}}" alt="{{unbound title}}">
    {{else}}
      {{#if bigLogoUrl}}
        <span class="valign-helper"></span>
        <img id="site-logo" class="logo-big" src="{{unbound bigLogoUrl}}" alt="{{unbound title}}">
      {{else}}
        <h2 id="site-text-logo" class="text-logo">{{unbound title}}</h2>
      {{/if}}
    {{/if}}
  {{/if}}
</a>

Discourse uses Handebars as a template engine.
So to understand template syntax you can read Handebars documentation.
I explain briefly some parts of home-logo.hbs:

Code inside showSmallLogo block is shown when you scroll a topic down:

  {{#if showSmallLogo}}
    {{#if smallLogoUrl}}
      <span class="valign-helper"></span>
      <img class="logo-small" src="{{unbound smallLogoUrl}}" width="33" height="33">
    {{else}}
      <i class="fa fa-home"></i>
    {{/if}}
  {{else}}

Code inside showMobileLogo block is shown in mobile mode:

    {{#if showMobileLogo}}
      <span class="valign-helper"></span>
      <img id="site-logo" class="logo-big" src="{{unbound mobileBigLogoUrl}}" alt="{{unbound title}}">
    {{else}}

Otherwise is normal mode:

    {{else}}
      {{#if «bigLogoUrl»}}
        <span class="valign-helper"></span>
        <img id="site-logo" class="logo-big" src="{{unbound bigLogoUrl}}" alt="{{unbound title}}">
      {{else}}
        <h2 id="site-text-logo" class="text-logo">{{unbound title}}</h2>
      {{/if}}
    {{/if}}