Skip to content

Forum customisation

Customisation
  • Hi Mark,

    I’d like some help customising two forums running NodeBB please if possible.

    I wish to change the colours of the buttons below.

    1000005618.png

    And how can I change the board stats widget to look similar to this…

    1000005620.png

    As always, thank you! 🤝.

  • phenomlabundefined phenomlab marked this topic as a regular topic
  • @JAC said in Forum customisation:

    I wish to change the colours of the buttons below.

    .link-primary, .text-primary {
        color: var(--bs-link-color) !important;
    }
    

    @JAC said in Forum customisation:

    And how can I change the board stats widget to look similar to this…

    .border-secondary {
        --bs-border-opacity: 1;
        border-color: var(--bs-border-color) !important;
        border-radius: 10px !important;
    }
    
    [component="widget/board-stats"] .text-bg-secondary:first-child {
        color: var(--bs-link-color) !important;
        background-color: var(--bs-node-card-cap-bg) !important;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    
    [component="widget/board-stats"] .text-bg-secondary {
        color: var(--bs-link-color) !important;
        background-color: var(--bs-node-card-cap-bg) !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }
    
  • Perfect @DownPW, thank you very much!

    I’ll try these on the laptop later.

  • @JAC Worth noting that @DownPW (like myself) uses CSS variables, so if you copy this like for like, it won’t work. You’d need to use actual HEX values for colours etc.

  • @JAC said in Forum customisation:

    I wish to change the colours of the buttons below.

    I’d do this a bit different to @DownPW and be more specific with the target. Obviously, change #ffffff to whatever value you require

    [component="post/actions"] a i, [component="post/actions"] span i {
        color: #ffffff !important;
    }
    

    This should produce something like the below (obviously not the dark background), and not white, but you get the idea.

    65c886f4-27b2-4d0f-a57c-a34a547eb8b1-image.png

    The below CSS should not be used in this instance because it will target several other elements on the site and produce undesirable results

    .link-primary, .text-primary {
        color: var(--bs-link-color) !important;
    }
    

    @JAC said in Forum customisation:

    And how can I change the board stats widget to look similar to this…

    I’d use something like this, which will target the widget background and the colour of the text in use

    [component="widget/board-stats"] {
        background: #000000;
        color: #ffffff;
    }
    

    And the below, which will target the background and text colour of the header

    [component="widget/board-stats"] h3 {
        background: red !important;
        color: yellow !important;
    }
    

    So the actual CSS you need is

    [component="widget/board-stats"] {
        background: #194F90;
        color: #ffffff;
    }
    [component="widget/board-stats"] h3 {
        background: #000000 !important;
    }
    .widget-board-stats.border.border-secondary a {
        color: #FFC557;
    }
    

    This should produce

    bc4fd490-b000-4052-a929-35b6a8be4ba8-image.png

  • Thanks very much for all the guidance, I’m currently away and don’t have the laptop on me so I’ll get to these changes next week.

  • I’m yet to add the above changes however I need to make further customisations to the look and feel of my forum if possible.

    I’d like to add a box at the bottom of the last reply which will display something like ‘login/sign up to reply’. The only problem is it could get quite annoying for people already logged in if the message shows.

    1000009673.png

    And if possible a border around the quotation bubble if possible?

    1000009671.png

    Thanks as always for all the continued help.

  • @JAC said in Forum customisation:

    The only problem is it could get quite annoying for people already logged in if the message shows

    This won’t be an issue. We can set it so that it only fires for those visitors who aren’t logged in

    @JAC said in Forum customisation:

    And if possible a border around the quotation bubble if possible?

    Certainly possible although the border natively won’t cover the callout shape.

  • @phenomlab said in Forum customisation:

    This won’t be an issue. We can set it so that it only fires for those visitors who aren’t logged in

    That sounds perfect!!

    @phenomlab said in Forum customisation:

    Certainly possible although the border natively won’t cover the callout shape.

    That’s fine, what about just having the background of the quote blue with white writing and the @username in yellow?

    Also I’ve noticed the newest post displays this line, is that fixable to show something like a border around the newest message or something similar? 🤔

    1000009675.png

  • @JAC said in Forum customisation:

    That’s fine, what about just having the background of the quote blue with white writing and the @username in yellow?

    Something like this? (these are live on your site now)

    8bd7399a-58bf-4052-8ab5-00ca63548df9-image.png

    @JAC said in Forum customisation:

    Also I’ve noticed the newest post displays this line, is that fixable to show something like a border around the newest message or something similar?

    Yes, that’s the current post or last post marker. On a desktop, it’s easy to see, and there’s a decent amount of space between the border and the post as you can see from the screenshot. On mobile however, the view is condensed, so it looks like this

    5c863753-b5a7-4bf9-958e-e595d7694da0-image.png

    The way to fix that and make it a bit more elegant is to use padding left and right (10px), so

    @media (max-width: 575.98px) {
        body.template-topic .topic .posts.timeline [component=post] {
            margin-left: initial;
            padding-left: 10px;
            padding-right: 10px !important;
        }
    }
    

    Which gives you this

    d22c20cd-ebd7-4feb-8ebb-2e20867106a3-image.png

    Also live on the forum now.

  • Thank you Mark, the changes look fantastic!!


Related Topics
  • nodebb error logs

    Bugs
    6
    4 Votes
    6 Posts
    377 Views

    I just wanted to ask because I don’t have much knowledge about the new installation.
    Thank you for the explanatory answer.

  • Interesting Widget code, but can't fetch API

    Solved Customisation
    26
    2 Votes
    26 Posts
    2k Views

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • 6 Votes
    15 Posts
    1k Views

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • Gettin Erors NodeBB

    Solved Configure
    7
    0 Votes
    7 Posts
    431 Views

    @phenomlab no forum is working goods.
    there is no eror message since yestarday.

  • Forum Statistics Box

    Solved Customisation
    5
    4 Votes
    5 Posts
    472 Views

    @Sampo2910 said in Forum Statistics Box:

    Say i wanted new theme for example or again something like this?

    Yes, exactly the same process.

  • 5 Votes
    9 Posts
    1k Views

    is there any way to see whose reputation is changed by this plugin?

  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    742 Views

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation

  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    78k Views

    @jac Given your departure away from your previous project, I’m going to close this thread… 🙂