Skip to content

NodeBB customisation

Locked Customisation
332 4 274.2k 1
  • JAC JAC

    @phenomlab Brilliant!!

    Thanks ever so much!! 🙂

    Now I need to try pull in new members ❓ 😛

    wrote on last edited by phenomlab

    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 JAC

    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

    wrote on last edited by

    @jac Done

  • wrote on last edited by

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

    @jac Done

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

  • JAC JAC

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

    @jac Done

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

    wrote on last edited by

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

    Many thanks

  • JAC JAC

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

    Many thanks

    wrote on last edited by

    @jac Done

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

  • wrote on last edited by

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

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

    wrote on last edited by

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

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

    wrote on last edited by

    @jac Done

  • wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Done

    Many thanks as always 👍🏻😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Done

    Many thanks as always 👍🏻😁

    wrote on last edited by JAC

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

    @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

    wrote on last edited by

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

  • wrote on last edited by DownPW

    @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

    wrote on last edited by JAC

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

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

    wrote on last edited by

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

  • wrote on last edited by

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

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

    wrote on last edited by

    @jac said in NodeBB customisation:

    How to do this

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

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

    wrote on last edited by DownPW

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

  • @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    wrote on last edited by

    @downpw said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    Many thanks to both 😁

  • JAC JAC

    @downpw said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    Many thanks to both 😁

    wrote on last edited by

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    Many thanks to both 😁

    Must try this tomorrow 👍🏻

  • JAC JAC

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    Many thanks to both 😁

    Must try this tomorrow 👍🏻

    wrote on last edited by

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

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

    Yeah maybe 🙂

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    How to do this

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

    @JAC

    Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

    a493733e-b36a-44d8-a8c5-cd9a2ca64a32-image.png

    Many thanks to both 😁

    Must try this tomorrow 👍🏻

    Would there be any reason why the colour shows differently in the nav bar and card slider?

    Screenshot 2022-01-14 at 12-18-44 Stockport County FC Fans Forum.png

    Obviously needs a lot of work with the link colours etc.


Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • nodebb-user-level customisation : popover element

    Solved Customisation css user level plugin custom
    15
    6 Votes
    15 Posts
    5k Views
    DownPW
    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.
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @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] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    JAC
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    2k Views
    JAC
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .