Skip to content

NodeBB customisation

Locked Customisation
332 4 208.9k 1
  • @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!

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

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

    @jac Not all all.

  • @jac Not all all.

    @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%;
    }
    

    @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

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

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

  • 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 Which page does this occur on ?

  • @jac Which page does this occur on ?

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

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

    @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

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

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

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

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


Related Topics