@r4z3r You can edit / add / remove widget areas in your template. This is a snippet from: nodebb-theme-persona
templates/categories.tpl
<!-- IMPORT partials/breadcrumbs.tpl -->
<div data-widget-area="header">
{{{each widgets.header}}}
{{widgets.header.html}}
{{{end}}}
</div>
<div class="row">
<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
{{{ if pagination.pages.length }}}
<div><!-- IMPORT partials/category-selector.tpl --></div>
{{{ else }}}
<h1 class="categories-title">[[pages:categories]]</h1>
{{{ end }}}
<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
{{{each categories}}}
<!-- IMPORT partials/categories/item.tpl -->
{{{end}}}
</ul>
<!-- IMPORT partials/paginator.tpl -->
</div>
<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
{{{each widgets.sidebar}}}
{{widgets.sidebar.html}}
{{{end}}}
</div>
</div>
<div data-widget-area="footer">
{{{each widgets.footer}}}
{{widgets.footer.html}}
{{{end}}}
</div>
But this isn't enough. You also have to add these areas in your theme javascript file. Also a snippet of nodebb-theme-persona
library.js
library.defineWidgetAreas = function(areas, callback) {
areas = areas.concat([
{
name: "Categories Sidebar",
template: "categories.tpl",
location: "sidebar"
},
{
name: "Category Sidebar",
template: "category.tpl",
location: "sidebar"
},
{
name: "Topic Sidebar",
template: "topic.tpl",
location: "sidebar"
},
{
name: "Categories Header",
template: "categories.tpl",
location: "header"
},
{
name: "Category Header",
template: "category.tpl",
location: "header"
},
{
name: "Topic Header",
template: "topic.tpl",
location: "header"
},
{
name: "Categories Footer",
template: "categories.tpl",
location: "footer"
},
{
name: "Category Footer",
template: "category.tpl",
location: "footer"
},
{
name: "Topic Footer",
template: "topic.tpl",
location: "footer"
},
{
name: "Account Header",
template: "account/profile.tpl",
location: "header"
},
{
name: "Users Header",
template: "users.tpl",
location: "header"
},
{
name: "Tags Header",
template: "tags.tpl",
location: "header"
},
{
name: "Tag Header",
template: "tag.tpl",
location: "header"
}
]);
callback(null, areas);
};
If you want to always see the same text between all categories, then you can simply move this between your categories:
<div data-widget-area="header">
{{{each widgets.header}}}
{{widgets.header.html}}
{{{end}}}
</div>
This one should work (but not tested):
<!-- IMPORT partials/breadcrumbs.tpl -->
<div class="row">
<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
{{{ if pagination.pages.length }}}
<div><!-- IMPORT partials/category-selector.tpl --></div>
{{{ else }}}
<h1 class="categories-title">[[pages:categories]]</h1>
{{{ end }}}
<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
{{{each categories}}}
<!-- IMPORT partials/categories/item.tpl -->
<!-- Header Widget is between each catgory -->
<div data-widget-area="header">
{{{each widgets.header}}}
{{widgets.header.html}}
{{{end}}}
</div>
{{{end}}}
</ul>
<!-- IMPORT partials/paginator.tpl -->
</div>
<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
{{{each widgets.sidebar}}}
{{widgets.sidebar.html}}
{{{end}}}
</div>
</div>
<div data-widget-area="footer">
{{{each widgets.footer}}}
{{widgets.footer.html}}
{{{end}}}
</div>
