Skip to content

NodeBB customisation

Locked Customisation
332 4 134.4k 1
  • @phenomlab said in NodeBB customisation:

    @jac Ok. I see this currently

    49a3e371-87aa-4157-a140-f7a2932a835d-image.png

    The reason for this is that HTML markup can’t interpret a basic line break unless you tell it to do that with a <br> tag, so you need to remove the physical space and replace it with the line break code as shown below

    2edba587-c909-452b-9fd2-c278117f9910-image.png

    This will then show

    8e591658-f8ce-4450-a087-221959170ef4-image.png

    Fantastic Mark, I will fix the others later. I am looking to have big bold titles like last time, is this also possible with some styling?

    Many thanks as always!

    @jac You should use the h element for this (header). See below example

    86614670-23a0-4d06-a4c0-21954337e3da-image.png

  • @jac sorry to be a pain.

    Is there any way to change the user links to a yellow colour mate? Or is this generically set in NodeBB?

    IMG_20211129_123221.jpg

    Many thanks.

    @jac This should do it

    .widget-board-stats a {
        color: #ffc557;
    }
    
  • @jac This should do it

    .widget-board-stats a {
        color: #ffc557;
    }
    

    @phenomlab said in NodeBB customisation:

    @jac This should do it

    .widget-board-stats a {
        color: #ffc557;
    }
    

    Many thanks pal, I’ll try this later when back in.

  • @phenomlab said in NodeBB customisation:

    @jac This should do it

    .widget-board-stats a {
        color: #ffc557;
    }
    

    Many thanks pal, I’ll try this later when back in.

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac This should do it

    .widget-board-stats a {
        color: #ffc557;
    }
    

    Many thanks pal, I’ll try this later when back in.

    Worked an absolute treat as always!

    Many thanks Mark! 😁

  • @phenomlab Brilliant!!

    Thanks ever so much!! 🙂

    Now I need to try pull in new members ❓ 😛

    Sorry Mark, whilst you’re online, I’ve just noticed the search icon is grey.

    Would there be any way to have the search icon in yellow and when hovered over it turns to white at all?

    Screenshot 2021-12-06 at 13-09-43 Rotherham United 1-0 Stockport County Hatters TV Vlog.png

    Many thanks

  • Sorry Mark, whilst you’re online, I’ve just noticed the search icon is grey.

    Would there be any way to have the search icon in yellow and when hovered over it turns to white at all?

    Screenshot 2021-12-06 at 13-09-43 Rotherham United 1-0 Stockport County Hatters TV Vlog.png

    Many thanks

    @jac Done

  • @phenomlab said in NodeBB - Created pages not found?:

    @jac Done

    fantastic! thank you very much for all the continued help as always 🙂 .

  • @phenomlab said in NodeBB - Created pages not found?:

    @jac Done

    fantastic! thank you very much for all the continued help as always 🙂 .

    Thinking of changing the title font to blue (without the blue strip) is this possible?

    Many thanks

  • Thinking of changing the title font to blue (without the blue strip) is this possible?

    Many thanks

    @jac Done

    09bb2d46-aabe-42be-9e67-00d87e41ff1e-image.png

  • @phenomlab said in NodeBB customisation:

    @jac Done

    09bb2d46-aabe-42be-9e67-00d87e41ff1e-image.png

    Thanks mate for that.

    I can’t get used to having the white background 😳 sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

  • @phenomlab said in NodeBB customisation:

    @jac Done

    09bb2d46-aabe-42be-9e67-00d87e41ff1e-image.png

    Thanks mate for that.

    I can’t get used to having the white background 😳 sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

    @jac said in NodeBB customisation:

    sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

    I know you’re a busy man Mark, just wanted to make sure that you’d seen this.

  • @jac said in NodeBB customisation:

    sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

    I know you’re a busy man Mark, just wanted to make sure that you’d seen this.

    @jac Done

  • @phenomlab said in NodeBB customisation:

    @jac Done

    Many thanks as always 👍🏻😁

  • @phenomlab said in NodeBB customisation:

    @jac Done

    Many thanks as always 👍🏻😁

    @phenomlab

    Hi Mark,

    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    IMG_20220112_195501.jpg

    Many thanks

  • @phenomlab

    Hi Mark,

    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    IMG_20220112_195501.jpg

    Many thanks

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

  • @jac said in NodeBB customisation:

    @phenomlab
    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    EDIT:

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).
    But when a user is on a topic or write a comment, you see him on desktop.

    I think this is normal because there is not enough free space in the header topic on mobile to display the avatars like on desktop

  • @jac said in NodeBB customisation:

    @phenomlab
    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    EDIT:

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).
    But when a user is on a topic or write a comment, you see him on desktop.

    I think this is normal because there is not enough free space in the header topic on mobile to display the avatars like on desktop

    @downpw said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab
    

    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile

    Brilliant thank you very much for the information @DownPW 😁

  • @downpw said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab
    

    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile

    Brilliant thank you very much for the information @DownPW 😁

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab
    

    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile

    Brilliant thank you very much for the information @DownPW 😁

    How to do this 🤔🤔🤔🤔.

  • @downpw said in NodeBB customisation:

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

    I think that’s just CSS set to hide on mobile viewport ?

  • @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab
    

    Hi Mark,
    Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

    Many thanks

    @JAC

    Yeah it’s possible

    example here for border color, background, or shadow, transparency, border radius :

    .recent-cards .recent-card-container .recent-card {
        height: 200px;
        width: 100%;
        padding: 10px;
        position: relative;
        border: 1px solid #YOURCOLOR; /*border color*/
        box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
        background-color: #YOURCOLOR; /*background color*/
        border-radius: 5px; /*Radius*/
        margin-bottom: 10px;
        color: #YOURCOLOR; /* Text color*/
        opacity: 0.8; /*Opacity, trnasparency*/
    }
    

    Other example for categories and time :

    .recent-cards .recent-card-container .recent-card .footer .category-item a,
    .recent-cards .recent-card-container .recent-card .footer .sort-info {
        color: #YOURCOLOR;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
    }
    

    @jac said in NodeBB customisation:

    @jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

    Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile

    Brilliant thank you very much for the information @DownPW 😁

    How to do this 🤔🤔🤔🤔.

    @jac said in NodeBB customisation:

    How to do this

    You should be able to use the (example) CSS provided by @DownPW


Related Topics
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    1k Views
    Thank you Mark, the changes look fantastic!!
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    713 Views
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    1k Views
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    4k Views
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    2k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    2k Views
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • Forum customisation

    Customisation forum customise
    17
    3 Votes
    17 Posts
    3k 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.