• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.1 Latest
Buy Hosting

Overriding template in Persona theme

Scheduled Pinned Locked Moved Technical Support
11 Posts 2 Posters 725 Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    wrote on last edited by
    #1

    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,

    1 Reply Last reply
    0
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    wrote on last edited by
    #2

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

    1 Reply Last reply
    0
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    wrote on last edited by
    #3

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

    5c588208-9f66-4cfc-9fbf-c0a76566b24a-image.png

    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.

    1 Reply Last reply
    0
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    wrote on last edited by
    #4

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

    Damien JayD 1 Reply Last reply
    0
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    replied to PitaJ on last edited by
    #5

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

    1 Reply Last reply
    0
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    wrote on last edited by
    #6

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

    Damien JayD 1 Reply Last reply
    0
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    replied to PitaJ on last edited by
    #7

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

    1 Reply Last reply
    0
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    wrote on last edited by PitaJ
    #8

    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 JayD 1 Reply Last reply
    0
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    replied to PitaJ on last edited by
    #9

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

    1 Reply Last reply
    0
  • Damien JayD Offline
    Damien JayD Offline
    Damien Jay
    wrote on last edited by
    #10

    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:
    49341ed4-5200-481b-b620-f6d97bf88a79-image.png
    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,

    PitaJP 1 Reply Last reply
    1
  • PitaJP Offline
    PitaJP Offline
    PitaJ Global Moderator Plugin & Theme Dev
    replied to Damien Jay on last edited by
    #11

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

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development