Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab yes but without copying, so possibly somehow different 😆. If not possible don’t worry.

    Have requested the logo from @katos and once the logo is added and a banner or something like what you sent me it will look fantastic!

    But believe me although your ideas are fantastic and what you can do to customise the look and feel etc really is brilliant but it is not my intention to copy everything so please accept my apology if it comes across that way Mark.

    wrote on last edited by

    @jac Not all all.

  • @jac Not all all.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Not all all.

    Many thanks pal, really appreciate that.

  • @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    

    I have a new stats widget at the bottom of the forum.

    IMG_20211128_194344.jpg

    How do I style the widget so like you have done with the others?

    Many thanks

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    

    I have a new stats widget at the bottom of the forum.

    IMG_20211128_194344.jpg

    How do I style the widget so like you have done with the others?

    Many thanks

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    

    I have a new stats widget at the bottom of the forum.

    IMG_20211128_194344.jpg

    How do I style the widget so like you have done with the others?

    Many thanks

    But if possible with white writing if it makes it easier to see.

    Many thanks.

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    

    I have a new stats widget at the bottom of the forum.

    IMG_20211128_194344.jpg

    How do I style the widget so like you have done with the others?

    Many thanks

    But if possible with white writing if it makes it easier to see.

    Many thanks.

    wrote on last edited by JAC

    There is also an issue with the page styling.

    Despite entering a new line the text wants to be bunched up together, I presume this is just an issue with the styling to correct it.

    After the first full stop it the second part should be understood in smaller font realistically.

    IMG_20211128_195947.jpg

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    

    I have a new stats widget at the bottom of the forum.

    IMG_20211128_194344.jpg

    How do I style the widget so like you have done with the others?

    Many thanks

    But if possible with white writing if it makes it easier to see.

    Many thanks.

    wrote on last edited by

    @jac I wrote a re-usable function for your forum that means it can be deployed anywhere - there are two choices - see below

    Option 1

    73de7026-20c3-4c13-97c7-26a085fee510-image.png

    Option 2

    7e0a0231-fa14-451b-a3f2-466a7c15980b-image.png

    This is set in the widget itself

    0c5176a2-b898-4bde-ae7d-e9afe8cc7628-image.png

    The two styles are custom and custom2 and they are interchangeable. Option 2 is currently selected.

  • JAC JAC

    There is also an issue with the page styling.

    Despite entering a new line the text wants to be bunched up together, I presume this is just an issue with the styling to correct it.

    After the first full stop it the second part should be understood in smaller font realistically.

    IMG_20211128_195947.jpg

    wrote on last edited by

    @jac Which page does this occur on ?

  • @jac Which page does this occur on ?

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Which page does this occur on ?

    Absolutely fantastic mate, can’t thank you enough.

    All the current custom pages that I have created do it unfortunately. They seem to bunch the text together, it’s probably because I haven’t styled it.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Which page does this occur on ?

    Absolutely fantastic mate, can’t thank you enough.

    All the current custom pages that I have created do it unfortunately. They seem to bunch the text together, it’s probably because I haven’t styled it.

    wrote on last edited by

    @jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

    44d26477-a366-457c-aeb3-e1eadac22355-image.png

    What is the intention of this ?

  • @jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

    44d26477-a366-457c-aeb3-e1eadac22355-image.png

    What is the intention of this ?

    wrote on last edited by JAC

    @phenomlab said in NodeBB customisation:

    @jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

    44d26477-a366-457c-aeb3-e1eadac22355-image.png

    What is the intention of this ?

    Sure…

    Basically I want to display fixtures, results, tables etc so I have created custom pages for them all.

    If you see here you’ll see that the text after the home fixtures & results in the widget is intended to display underneath the fixtures title but instead this just bunches up on the same line.

    IMG_20211129_121502.jpg

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

    44d26477-a366-457c-aeb3-e1eadac22355-image.png

    What is the intention of this ?

    Sure…

    Basically I want to display fixtures, results, tables etc so I have created custom pages for them all.

    If you see here you’ll see that the text after the home fixtures & results in the widget is intended to display underneath the fixtures title but instead this just bunches up on the same line.

    IMG_20211129_121502.jpg

    wrote on last edited by

    @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

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

    wrote on last edited by

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

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

    wrote on last edited by

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

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

    wrote on last edited by

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

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

  • JAC JAC

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

    wrote on last edited by

    @jac This should do it

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

    .widget-board-stats a {
        color: #ffc557;
    }
    
    wrote on last edited by

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

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

    wrote on last edited by

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

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


Related Topics
  • 2 Votes
    1 Posts
    640 Views
    No one has replied
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    JAC
    @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 .
  • 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] 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] 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.
  • [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] username cards

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

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @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.