Community Design

schajuli

Hi, have not been here for some time and everything looks and feels different now with the vertical bars. I don't like the split between left and right and therefore wanted to know if there is a setting available to go back to the old design?

<baris>

The old design is nodebb-theme-persona and is still available.

volanar

@baris It would be great to add a left side menu to the persona theme, like harmony

schajuli

@baris

Yeah, but afaik I can't change that as a user here? Can I?

<baris>

Nope end users can't change the theme used. It can be changed by the forum admin.

schajuli

Ok, so why is there now a split between left and right?
Are there any concepts of improving the usability?

brazzerstop

@schajuli youtube have left sidebar )

<baris>

It is just how harmony has been designed.

brazzerstop

@schajuli you can create something like navigation on Persona theme via custom widget, for example my solution, maybe you like it.

Navigation button + search input.
You can change color, link, text, icons and show it only on main page or every pages.


<center>

<a class="btn btn-sm btn-primary fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-house" data-content=""></i> Home</a>
<a class="btn btn-sm btn-secondary fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-list" data-content=""></i> Categories</a>
<a class="btn btn-sm btn-success fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-inbox unread-count " data-content=""></i> Unread</a>
<a class="btn btn-sm btn-danger fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-clock-o" data-content=""></i> Recent</a>
<a class="btn btn-sm btn-warning fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-fire" data-content=""></i> Popular</a>
<a class="btn btn-sm btn-info fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-tags" data-content=""></i> Tags</a>
<a class="btn btn-sm btn-light fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-user" data-content=""></i> Users</a>
<a class="btn btn-sm btn-dark fs-6 fw-semibold" href="#" role="button">
<i class="fa fa-fw fa-group" data-content=""></i> Groups</a>


<div class="search-widget">
<form action="/search" method="GET">
<div class="col-8 mt-4">
<div class="input-group mb-3">
<input type="text" class="form-control" name="term" placeholder="Search">
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>					
</div>
</div>
</form>
</div>

</center>

More:
https://getbootstrap.com/docs/5.0/components/navs-tabs/