Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    Worked great, many thanks 😁👍🏻.

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    Worked great, many thanks 😁👍🏻.

    wrote on last edited by

    @jac Good

  • wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Good

    Still going with the little changes here and there, so many thanks for the continued support 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Good

    Still going with the little changes here and there, so many thanks for the continued support 😁.

    wrote on last edited by

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

  • @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    Great idea!

    Mamy thanks again 😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    Great idea!

    Mamy thanks again 😁

    wrote on last edited by

    Looking to add a line / divider under eachother comment to seperate them properly, is this possible?

    Many thanks.

  • JAC JAC

    Looking to add a line / divider under eachother comment to seperate them properly, is this possible?

    Many thanks.

    wrote on last edited by

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    
  • @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    

    Thanks Mark, I’ll apply this when I can.

    As for the tags in the screenshot are they generally big or it is the screenshot that is playing tricks? 😉.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    

    Thanks Mark, I’ll apply this when I can.

    As for the tags in the screenshot are they generally big or it is the screenshot that is playing tricks? 😉.

    wrote on last edited by phenomlab

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    
  • @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    

    Many thanks mate, that has fixed the issue 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    

    Many thanks mate, that has fixed the issue 😁.

    wrote on last edited by

    Is there a way to change the colour of the online status?

    Many thanks 😁.

  • JAC JAC

    Is there a way to change the colour of the online status?

    Many thanks 😁.

    wrote on last edited by

    @jac are you referring to the green dot ? What would you like to change ?

  • @jac are you referring to the green dot ? What would you like to change ?

    wrote on last edited by

    @phenomlab yes mate,

    I was thinking blue when online and yellow when offline

    Many thanks

  • JAC JAC

    @phenomlab yes mate,

    I was thinking blue when online and yellow when offline

    Many thanks

    wrote on last edited by

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

  • @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    That’s a fair point mate, probably just change the offline to red then if possible at all?

    Many thanks mate.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    That’s a fair point mate, probably just change the offline to red then if possible at all?

    Many thanks mate.

    wrote on last edited by RiekMedia

    @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    
  • @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    
    wrote on last edited by

    @riekmedia said in NodeBB customisation:

    @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    

    Many thanks for the code that has worked. 👍🏻.

    I’ll not be much help technical wise I’m afraid on here but it’s great to see others posting and helping out too 😁.

  • JAC JAC

    @riekmedia said in NodeBB customisation:

    @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    

    Many thanks for the code that has worked. 👍🏻.

    I’ll not be much help technical wise I’m afraid on here but it’s great to see others posting and helping out too 😁.

    wrote on last edited by JAC

    Is there any way to style this widget at all?

    IMG_20211108_210405.jpg

    Image uploaded successfully 👍🏻😉.

  • JAC JAC

    Is there any way to style this widget at all?

    IMG_20211108_210405.jpg

    Image uploaded successfully 👍🏻😉.

    wrote on last edited by

    @jac yes, there is. What do you have in mind ?


Related Topics
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • 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] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • 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 .