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

    widgets text.png

  • GNU/Linux Gamers

    @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


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

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

    Cid "2"
    Widget text 2

    categories id.png

Suggested Topics

| |