Skip to content

NodeBB customisation

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

    @phenomlab very happy to hear this 😁🙌🏻

    Yes, but the key here is to not over egg…

    wrote on last edited by

    @phenomlab Absolutely, I’m just looking to do subtle changes which I think you have achieved so far, can’t thank you enough for the help given via Sudonix 👏🏻.

  • JAC JAC

    @phenomlab Absolutely, I’m just looking to do subtle changes which I think you have achieved so far, can’t thank you enough for the help given via Sudonix 👏🏻.

    wrote on last edited by

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

  • JAC JAC

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

    wrote on last edited by

    @jac I was thinking the boxes to have a blue background with white icons, and for the reply arrow to be a yellow background colour with a white or blue arrow icon.

  • JAC JAC

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

    wrote on last edited by

    @jac yes, but the css classes used by these are also used elsewhere which may result in undesirable behavior elsewhere.

  • @jac yes, but the css classes used by these are also used elsewhere which may result in undesirable behavior elsewhere.

    wrote on last edited by

    @phenomlab hmm! I see, it’s a tough one then!?

  • JAC JAC

    @phenomlab hmm! I see, it’s a tough one then!?

    wrote on last edited by

    @jac just looking at other little bits to improve then…

    What about doing the reverse of the ‘forum stats’ widget?

    IMG_20211109_224511.jpg

    Many thanks as always.

  • JAC JAC

    @jac just looking at other little bits to improve then…

    What about doing the reverse of the ‘forum stats’ widget?

    IMG_20211109_224511.jpg

    Many thanks as always.

    wrote on last edited by phenomlab

    @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%;
    }
    
  • @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 brilliant mate, thanks very much for that 😁.

  • JAC JAC

    @phenomlab brilliant mate, thanks very much for that 😁.

    wrote on last edited by

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

  • JAC JAC

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    wrote on last edited by

    @jac said in NodeBB customisation:

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    Either that or the blue background and white writing?

  • JAC JAC

    @jac said in NodeBB customisation:

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    Either that or the blue background and white writing?

    wrote on last edited by

    @jac I know we thought it would clash with the header but it’d certainly be interesting to see how it looks.

  • JAC JAC

    @jac I know we thought it would clash with the header but it’d certainly be interesting to see how it looks.

    wrote on last edited by

    @jac Here you go

    Blue font

    c82d1f42-2fa9-4b60-90a1-cf5537f04797-image.png

    Blue background, writing font

    ec81f3c7-7c01-4b6b-bba3-f068cede5180-image.png

  • @jac Here you go

    Blue font

    c82d1f42-2fa9-4b60-90a1-cf5537f04797-image.png

    Blue background, writing font

    ec81f3c7-7c01-4b6b-bba3-f068cede5180-image.png

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Here you go

    Blue font

    c82d1f42-2fa9-4b60-90a1-cf5537f04797-image.png

    Blue background, writing font

    ec81f3c7-7c01-4b6b-bba3-f068cede5180-image.png

    The blue with white coloured font does look good!

  • @jac Here you go

    Blue font

    c82d1f42-2fa9-4b60-90a1-cf5537f04797-image.png

    Blue background, writing font

    ec81f3c7-7c01-4b6b-bba3-f068cede5180-image.png

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    Blue background, writing font

    Definitely matches the team’s first colours better anyway 😁 how do I override the yellow Mark?

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    Blue background, writing font

    Definitely matches the team’s first colours better anyway 😁 how do I override the yellow Mark?

    wrote on last edited by

    @jac It’s done mate.

  • @jac It’s done mate.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac It’s done mate.

    Brilliant, many thanks Mark 😁😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac It’s done mate.

    Brilliant, many thanks Mark 😁😁.

    wrote on last edited by

    Hi Mark,

    How do get an image to show at the top of the the page? I think I discussed this in a previous thread or possibly this one, to have like Stockport fans at the top of the page or a big banner that reflects what the forum is about.

  • JAC JAC

    Hi Mark,

    How do get an image to show at the top of the the page? I think I discussed this in a previous thread or possibly this one, to have like Stockport fans at the top of the page or a big banner that reflects what the forum is about.

    wrote on last edited by

    @jac Like this ?

    7a8544d2-c6be-4948-8e36-71a71efefb10-image.png

  • @jac Like this ?

    7a8544d2-c6be-4948-8e36-71a71efefb10-image.png

    wrote on last edited by

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

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

    wrote on last edited by

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


Related Topics
  • 2 Votes
    1 Posts
    640 Views
    No one has replied
  • 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
  • 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
  • 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
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @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
    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.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation