Where exactly do you put a new theme?

  • Community Rep

    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?

  • NodeBB Admin

    Inside node_modules folder in the nodebb directory.

  • Community Rep

    @baris 🙄 of course! 👍

  • Community Rep

    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?

  • Community Rep

    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;
  • Community Rep

    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

| | | |