As @PitaJ mentioned header.tpl doesn't have access to the page data, but it is possible to give it access via plugins.

The hook you need to use is filter:middleware.renderHeader. Here is a sample on how to make thumbs available to header.tpl

myPlugin.filterMiddlewareRenderHeader = async function (hookData) { if (hookData.templateValues.template.name === 'topic') { hookData.templateValues.thumbs = hookData.data.thumbs; } return hookData; };

The hook looks like this

const hookReturn = await plugins.hooks.fire('filter:middleware.renderHeader', { req: req, res: res, templateValues: templateValues, data: data, }); return await req.app.renderAsync('header', hookReturn.templateValues);

templateValues is used to render the header and data is the data used to render the page.

This only works for cold loads though since when you ajaxify on the client side the header is not re-rendered so you need to handle client side ajaxify and update the header too.

$(window).on('action:ajaxify.end', function (ev, data) { if (ajaxify.data.template.name === 'topic') { // code to update header using ajaxify.data.thumbs } }};

Hope this helps.

@baris Oh my! 😳

😀Awesome!

@yariplus said in Remove postbar bottom topic (or making better but remove is also good):

Your negative margin pushes the bar into the content above. Apply it only to the first bar.

ul .post-bar { background-color: #1d1f21; margin-left: -10px; margin-top: -20px; margin-right: -10px; }

Thank you sir, you are awesome 🙂 Now it looks perfect 😄

43037d24-3183-4f8b-a5b6-95a2643f5fc1-image.png

As part of the creation of the Tenor GIF plugin, I needed to add a button to the composer toolbar:

gif button in composer

Normally, this is fairly straightforward. filter:composer.formatting is called, and caught with this listener:

plugin.registerFormatting = function (payload, callback) { payload.options.push({ name: 'gif', className: 'fa fa-tenor-gif', title: 'Insert GIF' }); callback(null, payload); };

The className denotes a class name (of course), and if you use fa and and corresponding fa-* class, you can select from hundreds of possible icons. Unfortunately for me, there was no "gif" icon, nor one for Tenor GIF.

So I had to set out to make my own. To do this, you'll see that above, I set the class fa-tenor-gif. This maps to nothing, since the icon doesn't exist. However, it does provide a nice easy way to find and style the button itself.

Then in my stylesheet, I simply added this styling to create my button via CSS pseudo-elements:

.fa-tenor-gif::before { content: 'GIF'; font-size: 1rem; font-family: sans; background: #333; color: #fff; padding: 0.25rem 0.5rem; border-radius: 0.5em; position: relative; top: -0.2rem; }

I wanted to go for a "badge-like" icon, since the text "GIF" fairly easily indicates what its purpose is for, hence the dark background, light text, and slight border radius.

If you wanted to do something else, like replace the icon with a picture of your own, then you might want to look into using background-image, but that is outside of the scope of this tutorial 😄

Hello @pichalite

Yes, I did. I noticed quickstart plugin was not compatible to my version of BB. Do you think this is the problem?
Thanks

11/4 03:10:30 [742] - warn: [plugins/load] The following plugins may not be compatible with your version of NodeBB. This may cause unintended behaviour or crashing. In the event of an unresponsive NodeBB caused by this plugin, run `./nodebb reset -p PLUGINNAME` to disable it. * nodebb-plugin-trophies * nodebb-plugin-quickstart

@Joenel-de-Asis172 That is actually the best way to do it. 👍

The other way would be to remove that html from the profile template in your theme. However, unless you are making your own custom theme, your changes may get overwritten when the theme updates.

So CSS is the way to go.

@baris Cool, didn't know that settings section existed! 🙂

This topic totally went under the radar (next time file issues on GH 😄 )

Updated the markdown plugin as per @yariplus' suggestion and they look good now (see @pier's OP).

Necroing this because this is the first thread on Google when searching for NodeBB table markdown syntax.

@julian Believe it or not, but I've never went there before for CSS reference, but I'll read up on it further here since of course they are the "authority" in web standards.

@julian Thanks for the response 🙂

@julian I'm trying in the same way like you mentioned.
created: static/images in node_modules/nodebb-theme-persona
in plugin.json i have added the below line
"acpScripts": [
"lib/admin.js"
],
"staticDirs": {
"images": "./static/images"
}
and in the header file i'm trying to get the image like below
<img src="/plugins/nodebb-theme-persona/images/logoWithText.png" />

but this is not working. Please suggest what am i doing wrong