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
  • Custom html in nodebb to prevent cache

    Unsolved Configure
    18
    2 Votes
    18 Posts
    747 Views

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text

  • Why CSS acts different in Desktop?

    Bugs
    11
    4 Votes
    11 Posts
    585 Views

    @DownPW I’d have to agree with that.

  • Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    665 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • Blinking text Effect

    Customisation
    3
    5 Votes
    3 Posts
    457 Views

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉

  • Link vs Refresh

    Solved Customisation
    20
    8 Votes
    20 Posts
    1k Views

    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related

  • Bootstrap Version

    Solved Customisation
    8
    5 Votes
    8 Posts
    534 Views

    @phenomlab That will be nice once they have completed that. It will be interesting to see how long that takes. So for now I will use custom css to make it look the way I want. Frameworks just make things a little faster. Thanks @phenomlab

  • Forum customisation

    Customisation
    17
    3 Votes
    17 Posts
    1k Views

    @jac said in Forum customisation:

    @phenomlab said in Forum customisation:

    @jac 100%. Just setting up some free time. I’m on annual leave from work offer the coming 2 weeks so hopefully will have a bit more time then.

    Not a problem Mark, I don’t wish for you to use all your spare time doing that, just do it when you can, no issues 🙂

    I know you’re busy doing other things but when you get a chance mate I’m happy for this to go ahead along with the RSS script.

    👍🏻

  • 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… 🙂