Skip to content
  • 6 Votes
    6 Posts
    374 Views
    crazycellsC

    @baris I think even for tags, this "distribution bar" above makes more sense than the "progress bar" since tags are not competing with each other to reach #264... so, their "progress" is not that important...

    Screen Shot 2023-08-10 at 20.18.17.png

  • 0 Votes
    2 Posts
    185 Views
    B

    Via custom CSS you can do this ๐Ÿฆ€

    .page-topic .pagination-block { display: none !important; }

    In a theme you can change navigator.tpl and remove d-lg-block

    Link Preview Image nodebb-theme-harmony/templates/partials/topic/navigator.tpl at 73b6431f56990778a81e6948cc1e33d5458ddc14 ยท NodeBB/nodebb-theme-harmony

    Harmony theme for NodeBB v3.0+. Contribute to NodeBB/nodebb-theme-harmony development by creating an account on GitHub.

    favicon

    GitHub (github.com)

  • 4 Votes
    12 Posts
    759 Views
    DownPWD

    @brazzerstop said in [manual] Build a Dock Panel:

    If you mean show "select category" on every category/topic page, I think no.

    yep It's that what I mean, I have testing with category number 0 but don't working

  • 5 Votes
    1 Posts
    227 Views
    B

    Hi everybody ๐ŸŒด

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

    preview

    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

    Paste this code after this line stickyAvatars: 'on', stickyHeader: 'off', stickyHeaderMobile: 'off', 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

    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

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

    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}}}> 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

  • 4 Votes
    2 Posts
    653 Views
    manaM

    I like it very much, and I am willing to use it for secondary development. The large screen and almost full-screen experience on the mobile phone make me feel like using a native app

  • 8 Votes
    6 Posts
    716 Views
    dave1904D

    @brazzerstop Hi ๐Ÿ™‚ Thanks for your response. I think as long as teaser content is not parsed as post content there won't be a big chance. It's smiliar with images being shown as "50012345324-b88c-fe1233-343242fe.png". So maybe more related to recent cards plugin than to magic button plugin ๐Ÿ™‚

  • 11 Votes
    3 Posts
    514 Views
    crazycellsC

    @brazzerstop thanks for sharing!

  • 5 Votes
    4 Posts
    330 Views
    B

    @julian said in Category Card (beta version):

    Nice to see it making a comeback!

    Everything new is well-forgotten old ๐Ÿ˜„

  • 3 Votes
    25 Posts
    2k Views
    E

    @baris Awesome, thank you!

  • 1 Votes
    16 Posts
    757 Views
    phenomlabP

    @sweetp easy to do with custom css

  • 0 Votes
    6 Posts
    328 Views
    B

    This settings for widgets not work on /category and /recent page

    Set the topic IDs you want to display this widget on (separated by commas) Set the category IDs you want to display this widget on (separated by commas)

    Cat Typing GIF

  • 3 Votes
    6 Posts
    1k Views
    B

    @baris Thank you! Now it's work โค

  • 0 Votes
    2 Posts
    251 Views
    phenomlabP

    @julian nice idea, and one I can certainly make use of.

  • 2 Votes
    1 Posts
    149 Views
    julianJ

    The updates continue unabated here, as we work on updating the Harmony theme, page by page!

    This past couple weeks, you might've noticed that the /users page got a refresh:

    Screenshot 2023-02-10 at 15-24-08 Community.png

    Almost all of the elements have remained unchanged. There is no new information here, but it's absolutely shocking to see how much more balanced the page is compared to Persona.

    We also updated the flag list and details pages, to give those tireless content moderators a bit of a boost as well. You might notice that the list of flag filters in the sidebar has been updated to match the UI controls found in the /search page as well.

    Screenshot 2023-02-10 at 15-21-31 NodeBB.png

    Screenshot 2023-02-10 at 15-21-26 NodeBB.png

    Here is how it used to look on Persona:

    Screenshot 2023-02-10 at 15-19-18 NodeBB.png

    Screenshot 2023-02-10 at 15-19-24 NodeBB.png