[manual] Sticky header and avatars in Harmony

[brazzerstop]

Hi everybody

Today I show you how to make a sticky brand header and avatars in Harmony.

Step-by-step

We need modify 6 files: library.js, harmony.json, theme.tpl, harmony.tpl, brand.tpl, post.tpl to add 3 new settings:

• Sticky avatars (user avatars in the posts)
• Sticky header (brand header)
• Setting to show sticky header on mobile devices

---

First we add a new settings in library.js

1. Paste this code after this line

stickyAvatars: 'on',
stickyHeader: 'off',
stickyHeaderMobile: 'off',

2. Paste this code after this line

config.stickyAvatars = config.stickyAvatars === 'on';
config.stickyHeader = config.stickyHeader === 'on';
config.stickyHeaderMobile = config.stickyHeaderMobile === 'on';

Now we need add translation for the new settings in harmony.json

3. Paste this code after this line

"settings.stickyAvatars": "Sticky user avatars in posts",
"settings.stickyHeader": "Sticky header on desktop",
"settings.stickyHeaderMobile": "Show sticky header on mobile",

Next step, create controls of new settings in ACP and user profile in harmony.tpl and theme.tpl

4. Paste this code after this line in harmony.tpl

<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="stickyAvatars" name="stickyAvatars" />
<label for="stickyAvatars" class="form-check-label">settings.stickyAvatars</label>
</div>

<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="stickyHeader" name="stickyHeader" />
<label for="stickyHeader" class="form-check-label">settings.stickyHeader</label>
</div>

<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="stickyHeaderMobile" name="stickyHeaderMobile" />
<label for="stickyHeaderMobile" class="form-check-label">settings.stickyHeaderMobile</label>
</div>

5. Paste this code after this line in theme.tpl

<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="stickyAvatars" name="stickyAvatars" {{{ if config.theme.stickyAvatars }}}checked{{{ end }}}>
<label class="form-check-label" for="stickyAvatars">settings.stickyAvatars</label>
</div>

<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="stickyHeader" name="stickyHeader" {{{ if config.theme.stickyHeader }}}checked{{{ end }}}>
<label class="form-check-label" for="stickyHeader">settings.stickyHeader</label>
</div>

<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="stickyHeaderMobile" name="stickyHeaderMobile" {{{ if config.theme.stickyHeaderMobile }}}checked{{{ end }}}>
<label class="form-check-label" for="stickyHeaderMobile">settings.stickyHeaderMobile</label>
</div>

The finally we modify a theme files post.tpl and brand.tpl

6. Replace the code in this line with a new code in post.tpl

<div class="icon py-1 bg-body d-none d-sm-block {{{ if config.theme.stickyAvatars }}}position-sticky{{{end}}}" {{{ if config.theme.stickyAvatars }}}style="top:7.5rem;"{{{end}}}>

7. Replace the code in this line with a new code in brand.tpl

<div class="container px-md-4 brand-container {{{ if config.theme.stickyHeaderMobile }}}sticky-top{{{end}}} {{{ if config.theme.stickyHeader }}}sticky-lg-top bg-body pt-3{{{end}}}" {{{ if config.theme.stickyHeader }}}style="margin-top:-1rem;"{{{end}}}>

/.nodebb build

Happy Dev