Add custom stylesheet inside header.tpl

paladin884

Hello, has anyone got an idea on what will be the way to get the file path for a new stylesheet.css inside header.tpl? I'm planning of using TailwindCSS inside my custom theme and I can't add the directive inside a .less file.

Thank you!
Mihai

paladin884

5 days and no reply, has nobody ever tried this?

PitaJ

Why can't you import it into less?

You can use filter:meta.getLinkTags: https://github.com/NodeBB/NodeBB/blob/master/src/meta/tags.js#L147

Emoji plugin uses it here https://github.com/NodeBB/nodebb-plugin-emoji/blob/master/lib/index.ts#L64

paladin884

@PitaJ, thank you but none of these options will actually work inside header.tpl. However, decided to park Tailwind and write my custom css.

I also found a way to link a new asset inside header.tpl by adding the .css file inside public folder in the main application not int the theme and then give it the url path as follow assets/style.css

Cheers!

PitaJ

@paladin884 what do you mean that won't work? What did you try?

Here's me importing a CSS fine directly into less in one of my plugins:

nodebb-plugin-calendar/public/calendar.less at 2b9893dad12ee59bce494fe0fb24342f66cf9e67 · pitaj/nodebb-plugin-calendar

Fully-featured calendar plugin for NodeBB. Contribute to pitaj/nodebb-plugin-calendar development by creating an account on GitHub.

GitHub (github.com)

Then you just need to make sure your less is defined in plugin.json:

nodebb-plugin-calendar/plugin.json at 2b9893dad12ee59bce494fe0fb24342f66cf9e67 · pitaj/nodebb-plugin-calendar

Fully-featured calendar plugin for NodeBB. Contribute to pitaj/nodebb-plugin-calendar development by creating an account on GitHub.

GitHub (github.com)

You can instead just add it to your plugin.json under css like so:

{
  ...
  "css": [
    "path/to/stylesheet.css"
  ]
}

Either of those options will result in it being added to the main css file loaded in header.tpl