Using customizer plugin to modify topic view

  • Hi all. I want to use nodebb-plugin-customizer to modify the topic template. Essentially, I'm looking to add a wrapper div (identified as <div class="hero">, so the modified topics template would then look like this

    <!-- IF breadcrumbs.length -->
    <div class="hero"> 
    <ol class="breadcrumb" itemscope="itemscope" itemprop="breadcrumb" itemtype="">
    	{{{each breadcrumbs}}}
    	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="" <!-- IF @last -->class="active"<!-- ENDIF @last -->>
    		<meta itemprop="position" content="{@index}" />
    		<!-- IF [email protected] --><a href="{breadcrumbs.url}" itemprop="item"><!-- ENDIF [email protected] -->
    			<span itemprop="name">
    				<!-- IF @last -->
    				<!-- IF !feeds:disableRSS -->
    				<!-- IF rssFeedUrl --><a target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->
    				<!-- ENDIF @last -->
    		<!-- IF [email protected] --></a><!-- ENDIF [email protected] -->
    <!-- ENDIF breadcrumbs.length -->
    <div class="row">
    	<div class="topic col-lg-12 col-sm-12" data-has-widget-class="topic col-lg-9 col-sm-12" data-has-widget-target="sidebar">
    		<h1 component="post/header" class="hidden-xs">
    			<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="{{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {pinExpiryISO}]]{{{ end }}}"></i>
    			<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
    			<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
    			<!-- BEGIN icons -->@value<!-- END icons -->
    			<span class="topic-title" component="topic/title">{title}</span>
    		<!-- IF merger -->
    		<div component="topic/merged/message" class="alert alert-warning clearfix">
    			<span class="pull-left">[[topic:merged_message, {mergeIntoTid}, {merger.mergedIntoTitle}]]</span>
    			<span class="pull-right">
    				<a href="{config.relative_path}/user/{merger.userslug}">
    				<small class="timeago" title="{mergedTimestampISO}"></small>
    		<!-- ENDIF merger -->
    		<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted --> clearfix">
        <span class="pull-left">[[topic:deleted_message]]</span>
        <span class="pull-right">
            <!-- IF deleter -->
            <a href="{config.relative_path}/user/{deleter.userslug}">
            <small class="timeago" title="{deletedTimestampISO}"></small>
            <!-- ENDIF deleter -->

    I've saved the template, rebuilt nodebb, but it never appears. Am I modifying the right template ? From looking at the enclosed HTML, this does seem to match what I have in the template.

    An example of the topic I'm looking to target is here

  • Never mind - after looking at the slick theme, I realised that partials/breadcrumbs is being included at the top of the file, so this is the intended target 🙂

Suggested Topics

| | | |