Overriding template in Persona theme

Damien Jay

Hello all,

I'm pretty new to Nodebb and I'm just looking to override the default persona theme, specifically the following line in 'lastpost.tpl' which I understand to be a template partial of the last item posted to the categories page when preview is not disabled:

I want to change the line:
{teaser.topic.title} <small class="timeago" title="{../timestampISO}"></small>

to

{teaser.topic.title} - <small class="timeago" title="{../timestampISO}"></small>

I have tried changing

./node_modules/nodebb-theme-persona/templates/partials/categories/lastpost.tpl

And didn't want to fuck with the build files themselves as that seems like a good way to cause myself harm -- does anyone have any advice on how to make this minor theme change?

Thanks,

PitaJ

You should be able to use nodebb-plugin-customize for this.

Damien Jay

I guess I'm a little confused here -- I've tried a few things and none of them seem to be panning out:

I have tried editing /partials/lastpost.tpl using customizer as follows and it didn't seem to do literally anything

<p>
			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
				{teaser.topic.title} - <small class="timeago" title="{../timestampISO}"></small>
			</a>
		</p>

What my understanding teaser.topic.title is the correct path to include the title and when I check the source it looks like

<small class="timeago">

Seems to be where the "about 10 hours ago" link is -- I'm not sure what I might be doing wrong here.

PitaJ

Did you click the button in the bottom right after making the customization, them rebuild and restart nodebb?

Damien Jay

@PitaJ Yes, it rebuilt the same as it was before.

PitaJ

did the success confirmation come up after clicking the build button in the customize plugin page?

Damien Jay

@PitaJ said in Overriding template in Persona theme:

did the success confirmation come up after clicking the build button in the customize plugin page?

Yes it did. It said success, I rebuilt and restarted and it didn't seem to do anything. I'm not sure if {teaser.topic.title} is supported, but I was basing the availability of it off of this: https://github.com/NodeBB/nodebb-theme-persona/issues/408

So I'm not really sure where to go from here...

PitaJ

Oh! Yeah this doesn't look like a problem with customize, but the issue seems to be that the path you're trying to use isn't valid. Your picture seems to contain the dash, just not the title. So the template override is working.

Try {../title} or {../topic.title}

Damien Jay

@PitaJ If I mess with catagories.tpl directly I can see changes on the page -- but I cannot for the life of me seem to get the title to appear where the timestamp normally does. I tried {../title} and topic.title, teaser.topic.title -- restarting and rebuilding after each iteration to no avail....

Damien Jay

So, I straight up stole some code from another template and it worked. Just to give credit where it's due and to give someone who eventually stumbles onto this thread some closure (as this seems like I'm probably not the only person that would want the thread title as part of the link)

I ripped my code from here specifically: https://github.com/ItzMeDwii/nodebb-theme-azn-oxideold/blob/master/templates/partials/categories/lastpost.tpl So special shoutouts to https://github.com/ItzMeDwii/nodebb-theme-azn-oxideold

What I did to make it work:

I modified (using customizer) /partials/categories/lastpost.tpl from

<div class="card" style="border-color: {../bgColor}">
	{{{each ./posts}}}
	<!-- IF @first -->
	<div component="category/posts">
		<p>
			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
				<small class="timeago" title="{../timestampISO}"></small>
			</a>
		</p>
		<div class="post-content">
			{../content}
		</div>
	</div>
	<!-- ENDIF @first -->
	{{{end}}}

	<!-- IF !../posts.length -->
	<div component="category/posts">
		<div class="post-content">
			[[category:no_new_posts]]
		</div>
	</div>
	<!-- ENDIF !../posts.length -->
</div>

To the following:

<div class="card" style="border-color: {../bgColor}">
	{{{each ./posts}}}
	<!-- IF @first -->
	<div component="category/posts">
			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
			<div class="title">
			    <a href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">{../topic.title}</a>
			    - <small class="timeago" title="{../timestampISO}"></small>
			</div>
		<div class="post-content">
			{../content}
		</div>
	</div>
	<!-- ENDIF @first -->
	{{{end}}}

	<!-- IF !../posts.length -->
	<div component="category/posts">
		<div class="post-content">
			[[category:no_new_posts]]
		</div>
	</div>
	<!-- ENDIF !../posts.length -->
</div>

The resulting markup looks like this:

with "borderlands 3 LFG - 4 minutes ago" being a clickable link.

Adding an override (appearance -> custom content) of

.card .title{
    font-weight: 700;
}

Will give you a nicer bolding than what you see there, but you still may want some additional styling.

I am not at all sure why topic.title wasn't working without being in its own div, but it's working now.

Thanks,

PitaJ

@Damien-Jay nice job man. glad you figured it out