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 on
  • @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.

  • 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.

  • 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! šŸ¤.

    @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.

  • 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.

  • @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

  • @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 and emails

    Solved Configure
    27
    5 Votes
    27 Posts
    640 Views
    @Panda it will use SMTP. In all cases, I never use any plugin to send email. Iā€™ll always send it raw.
  • Bug in Nodebb route when clicking title

    Moved Configure
    3
    2 Votes
    3 Posts
    261 Views
    Ah silly me, thanks for finding that!
  • Can you adjust Admin settings on your NodeBB?

    Bugs
    5
    0 Votes
    5 Posts
    460 Views
    @Panda as, yes, now I understand and that makes 100% sense. It means those who get down voted can still have an opinion and use common services. And yes, youā€™re right. Rather than down vote, just ignore if you donā€™t agree.
  • 36 Votes
    55 Posts
    5k Views
    @DownPW I see why. The code relies on the existence of [component="topic/quickreply/container"] However, this by definition means that the below has to be enabled [image: 1679077966615-aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png] It will then work [image: 1679077992245-7fb38631-e0f3-46ef-b652-00929d927b13-image.png] For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if ā€œQuick Replyā€ is disabled, meaning it wonā€™t fire as it canā€™t locate that specific component. The downside is that you might not want the quick reply function, but I think itā€™s a PITA to scroll up to the top of the post just to reply, so I have it on
  • Forum Icons NodeBB

    Solved Customisation
    13
    0 Votes
    13 Posts
    1k Views
    @cagatay That matches what I see [image: 1667218162107-4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • 5 Votes
    9 Posts
    1k Views
    is there any way to see whose reputation is changed by this plugin?
  • 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
    80k Views
    @jac Given your departure away from your previous project, Iā€™m going to close this threadā€¦