Moving a widget between categories

[r4z3r]

Hello, is there any way to move text widget between categories ?

[dunlix]

@r4z3r not with the widgets interface in ACP. You’d have to do it with custom JSON in the Appearance section, or modifying the templates yourself/creating theme.

As for the JSON text, I’m not very sure how to help you there , as I don’t know much about it.

At least you have a sort of a start

[dogs]

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

[r4z3r]

Okay, but how to make it specific to individual categories
Cid "1"
Widget text 1

Cid "2"
Widget text 2