Where exactly do you put a new theme?

Moved Technical Support
  • I want to fork persona, learn how it all pulls together and maybe refine it.

    What I've done is downloaded the persona theme from here - https://github.com/NodeBB/nodebb-theme-persona

    Simple and probably stupid question:

    Exactly where do you place you theme folder?

    Top level in /nodebb?

  • Inside node_modules folder in the nodebb directory.

  • @baris 🙄 of course! 👍

  • I have a follow on question.

    These .less files, they're the CSS of the forum.

    I had one change to make, make user avatar Square instead of round - I found the controlling attributes to make the change, however, it appeared I had to go change that in every instance of every .less file, which was a lot of places.

    Perhaps I am doing something wrong, maybe there was only place I need to change the attribute.

    So while I achieved what I set out to and a bit more, in the instanced of the user avatar, is it a case that you must change every occurrence in every Less file or is there a logic I am missing.

    note: I need to research up a little more on .less as I'm only fnma,iar with straight CSS.

  • Some things are configurable with less variables. Can you give a couple examples of the changes you had to make?

  • User avatars, was the thing I had to change in multiple places to achieve a square type:

    I used inspector to identify what I needed to be changed and I think I got the correct attribute, at least the result was as desired, square avatars! 🙂


    .user-icon-style(46px, 2.4rem, 50%)


    .user-icon-style(46px, 2.4rem, 0px)

    Since it required a Rebuild & Restart each time to see the effects, being cumbersome. I changed every instance in every .less file I could find and then ran R&R.

    My logic could be very flawed, so I'd like to know the correct approach behind nodeBB styling.

    The other change I made (experimenting with formatting posts) was in the topic.less file:

    .topic .posts [component=post] {
    position: relative;
    border: 1px solid lightgrey;
    padding: 10px;
    margin: 10px;
    background-color: #F3F3F3;
    .topic .content {
    margin-top: -15px;
    font-size: 15px;
  • Let me say I didn't notice the CUSTOM CSS/LESS screen in the admin control panel!

    I dunno what version of the forum that was implemented but I really breezed by it somehow.

    This will work much more efficiently for my needs methinks! Hurrah!


Suggested Topics

  • 0 Votes
    4 Posts

    @pitaj @PitaJ I got these errors in dev mode after activating the plugin. looks like something needs to be fixed.

    Screenshot 2021-02-06 111730.png

  • 1 Votes
    5 Posts

    I just managed to make a quick hack which achieves the effect that I wanted. I added the following to the Custom Javascript tab in ACP:

    function showreplies() { $('li[component="post"]').has('a[component="post/parent"]').addClass('hidden'); $('[component="post/replies/open"]').click(); } function noreply(event, data){ if(data.posts.length==1 && data.posts[0].toPid) { // this is a reply to some post var el = $('li[data-pid="'+data.posts[0].pid+'"]'); // newly added post if(el.parent('div[component="post/replies"]').length===0){ // added as a standalone post el.addClass('hidden'); } } $('div[component="post/replies"]').find('a[component="post/reply"], a[component="post/quote"]').addClass('hidden'); } $(window).on('action:ajaxify.end', showreplies); $(window).on('action:posts.loaded', noreply);

    The first line in function showreplies hides those posts which are replies to previous posts, and the second line opens up the replies below the relevant posts. (@baris This was my attempt before I read your answer. Thanks for the pointer to the code! I will try that out).

    I added the handler for action:posts.loaded in order to

    Eliminate Reply and Quote buttons for the replies in order not to generate higher levels of nesting (this is ok for me) After adding a reply to a post, by default it is also added at the end - in order to avoid that I set it to hidden. This does not work so well as the page gets scrolled to the top after that.. - I am not quite sure how to fix it. If I figure it out I'll make an update..
  • 0 Votes
    4 Posts

    We do throttle the confirmation emails, but when you switch your email, you are automatically sent another confirmation email, so that's why you can't send it again manually... I remember someone made an issue about this recently too.

  • 0 Votes
    4 Posts

    @jongarrison you have another example on nodebb-plugin-custom-header. But in this case is managed by a plugin too. I don't know if it is possible to applu different theme (tpl). You could also managed it in the same tpl with a little bit of logic in it based in certain configuration server side.

  • 0 Votes
    7 Posts

    Hmm, That should work, as long as you changed all the identifiers. I've done the same thing with my own themes.