Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Would there be a way to change the URL colour in quote to stand out or is that too difficult?

    Can you send me a URL where this is an issue to save me trawling through your forum ? 🙂

    Sure… here

    wrote on last edited by

    It’s probably my fault as I’ve chosen a background colour that natively clashes, would you prefer me to change the quote colour instead?

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Would there be a way to change the URL colour in quote to stand out or is that too difficult?

    Can you send me a URL where this is an issue to save me trawling through your forum ? 🙂

    Sure… here

    wrote on last edited by

    @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    
  • @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    

    Worked a treat mate, thank you very much as always, a massive help! 😁😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    

    Worked a treat mate, thank you very much as always, a massive help! 😁😁

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    

    Worked a treat mate, thank you very much as always, a massive help! 😁😁

    I think all the changes may have affected this.

    Is there any way to replicate colours on the tags page for the widget?

    Sorry to be a pain… 🚕

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Use this

    blockquote a {
        color: #ffc557;
    }
    

    You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

    blockquote a:hover {
        color: #db9716;
    }
    

    Worked a treat mate, thank you very much as always, a massive help! 😁😁

    I think all the changes may have affected this.

    Is there any way to replicate colours on the tags page for the widget?

    Sorry to be a pain… 🚕

    wrote on last edited by

    @jac Can you provide a screenshot ? Sorry. Not entirely sure I understand.

  • @jac Can you provide a screenshot ? Sorry. Not entirely sure I understand.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Can you provide a screenshot ? Sorry. Not entirely sure I understand.

    IMG_20211008_211530.jpg

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Can you provide a screenshot ? Sorry. Not entirely sure I understand.

    IMG_20211008_211530.jpg

    wrote on last edited by

    @jac did you add any additional CSS other than what I provided ? I’m surprised this is impacted as the classes are completely different.

  • @jac did you add any additional CSS other than what I provided ? I’m surprised this is impacted as the classes are completely different.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac did you add any additional CSS other than what I provided ? I’m surprised this is impacted as the classes are completely different.

    No mate I didn’t.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac did you add any additional CSS other than what I provided ? I’m surprised this is impacted as the classes are completely different.

    No mate I didn’t.

    wrote on last edited by

    @jac I see why. Fixed

    9031d733-2b3c-4a66-ab80-ee9161f81c97-image.png

    I’ve changed the CSS on your site already, so nothing for you to do 🙂

  • @jac I see why. Fixed

    9031d733-2b3c-4a66-ab80-ee9161f81c97-image.png

    I’ve changed the CSS on your site already, so nothing for you to do 🙂

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac I see why. Fixed

    9031d733-2b3c-4a66-ab80-ee9161f81c97-image.png

    I’ve changed the CSS on your site already, so nothing for you to do 🙂

    Amazing mate, thank you so much for doing this!!

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac I see why. Fixed

    9031d733-2b3c-4a66-ab80-ee9161f81c97-image.png

    I’ve changed the CSS on your site already, so nothing for you to do 🙂

    Amazing mate, thank you so much for doing this!!

    wrote on last edited by JAC

    Was thinking about customising breadcrumbs is this something that is possible? / Where the title is and customise that with some colours?

    IMG_20211011_193140.jpg

    Many thanks as always!

  • JAC JAC

    Was thinking about customising breadcrumbs is this something that is possible? / Where the title is and customise that with some colours?

    IMG_20211011_193140.jpg

    Many thanks as always!

    wrote on last edited by

    @jac there aren’t any breadcrumbs in that screenshot ?

  • @jac there aren’t any breadcrumbs in that screenshot ?

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac there aren’t any breadcrumbs in that screenshot ?

    🙈🙈 Ignore me mate. Sorry, I read they can be added in, don’t worry about that.

    I was thinking some styling to where the title sits?

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac there aren’t any breadcrumbs in that screenshot ?

    🙈🙈 Ignore me mate. Sorry, I read they can be added in, don’t worry about that.

    I was thinking some styling to where the title sits?

    wrote on last edited by

    @jac what are you looking for ?

  • @jac what are you looking for ?

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac what are you looking for ?

    I’m not on the laptop currently so am unable to do it, but was thinking of maybe moving the message that’s displayed and just showing that for now on the home page only?

    As for the titles, maybe a blue background with white writing? May look bad but I’m trying to (with the great help from yourself) make it very much fit in with Stockport colours at every opportunity without overdoing it ;).

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac what are you looking for ?

    I’m not on the laptop currently so am unable to do it, but was thinking of maybe moving the message that’s displayed and just showing that for now on the home page only?

    As for the titles, maybe a blue background with white writing? May look bad but I’m trying to (with the great help from yourself) make it very much fit in with Stockport colours at every opportunity without overdoing it ;).

    wrote on last edited by

    @jac Ok. Might make sense to put together a mock up of sorts and I’ll work from that.

  • @jac Ok. Might make sense to put together a mock up of sorts and I’ll work from that.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Ok. Might make sense to put together a mock up of sorts and I’ll work from that.

    Thanks mate. Will do 😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Ok. Might make sense to put together a mock up of sorts and I’ll work from that.

    Thanks mate. Will do 😁

    wrote on last edited by

    What I want is where the title is to be blue in the background, with white font?

    And then I thought well this will clash with the menu bar that is also blue so I don’t know whether it can be done but maybe a yellow line to separate the menu and the article title?

    Many thanks.

    IMG_20211011_193140.jpg

  • JAC JAC

    What I want is where the title is to be blue in the background, with white font?

    And then I thought well this will clash with the menu bar that is also blue so I don’t know whether it can be done but maybe a yellow line to separate the menu and the article title?

    Many thanks.

    IMG_20211011_193140.jpg

    wrote on last edited by

    @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

  • @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

    Wow that looks great!!!

    ,😁😁😁


Related Topics
  • 2 Votes
    1 Posts
    640 Views
    No one has replied
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • 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.
  • 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.
  • [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.
  • 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
  • Forum customisation

    Customisation forum customise
    17
    3 Votes
    17 Posts
    6k Views
    JAC
    @jac said in Forum customisation: @phenomlab said in Forum customisation: @jac 100%. Just setting up some free time. I’m on annual leave from work offer the coming 2 weeks so hopefully will have a bit more time then. Not a problem Mark, I don’t wish for you to use all your spare time doing that, just do it when you can, no issues I know you’re busy doing other things but when you get a chance mate I’m happy for this to go ahead along with the RSS script.