Skip to content

NodeBB customisation

Locked Customisation
332 4 134.4k 1
  • @phenomlab said in NodeBB customisation:

    @jac yes, I understand now. You can replicate what I have here with the below CSS

    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Be warned though that this is relatively advanced and any other changes to the blockquote class will impact this.

    Many thanks mate,

    I’ll try this when on the laptop.

    Would there be a way to make the background blue and the font white on the quote at all?.

  • Would there be a way to make the background blue and the font white on the quote at all?.

    @jac said in NodeBB customisation:

    Would there be a way to make the background blue and the font white on the quote at all?.

    Encountered issue at first hurdle…hmm.

    IMG_20210926_195951.jpg

  • @jac said in NodeBB customisation:

    Would there be a way to make the background blue and the font white on the quote at all?.

    Encountered issue at first hurdle…hmm.

    IMG_20210926_195951.jpg

    @jac Yes, you’ll get that message if the CSS is incomplete. For example, if you’ve missed a semi colon at the end. Can you paste all of your CSS here for review ?

  • @jac Yes, you’ll get that message if the CSS is incomplete. For example, if you’ve missed a semi colon at the end. Can you paste all of your CSS here for review ?

    @phenomlab said in NodeBB customisation:

    @jac Yes, you’ll get that message if the CSS is incomplete. For example, if you’ve missed a semi colon at the end. Can you paste all of your CSS here for review ?

    Sure,

    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    {
    

    That’s what I’ve used mate.

  • @phenomlab said in NodeBB customisation:

    @jac Yes, you’ll get that message if the CSS is incomplete. For example, if you’ve missed a semi colon at the end. Can you paste all of your CSS here for review ?

    Sure,

    blockquote {
        font-size: inherit;
        border-left: 5px solid #eee;
        background: #eeeeee;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    {
    

    That’s what I’ve used mate.

    @jac That last block should be

    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    The curly brace should be the other way round.

  • @jac That last block should be

    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    The curly brace should be the other way round.

    @phenomlab said in NodeBB customisation:

    @jac That last block should be

    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    The curly brace should be the other way round.

    Thanks very much Mark! That has fixed the issue!

    Is there any way to change the font on the quote to white with a blue background at all?

    Many thanks as always for the free help and advice!

  • @phenomlab said in NodeBB customisation:

    @jac That last block should be

    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #eee;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    The curly brace should be the other way round.

    Thanks very much Mark! That has fixed the issue!

    Is there any way to change the font on the quote to white with a blue background at all?

    Many thanks as always for the free help and advice!

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

  • @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    @phenomlab said in NodeBB customisation:

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    Thanks mate, is that just on quotes?

  • @phenomlab said in NodeBB customisation:

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    Thanks mate, is that just on quotes?

    @jac yes

  • @phenomlab said in NodeBB customisation:

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    Thanks mate, is that just on quotes?

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    Thanks mate, is that just on quotes?

    I like the look of that, either that or a yellow.

    Would you be able to share the code for that at all Mark? 😁.

  • @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Not sure which type of blue you want, but you could do it with this

    .topic .posts .content blockquote {
        font-size: 12px;
        color: #ffffff;
    }
    
    blockquote {
        font-size: inherit;
        border-left: 5px solid #194F90;
        background: #194F90;
        border-radius: 4px;
        margin: 0 auto 40px;
        padding: 15px;
        position: relative;
    }
    blockquote:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #194F90;
        bottom: -20px;
        content: "";
        position: absolute;
        left: 20px;
    }
    

    Essentially, you’d be modifying the previous block I provided, and forcing white on .topic .posts .content blockquote

    Essentially, you’ll land up with this

    560c90ce-fec9-4896-ae5e-aecb12843aef-image.png

    Hope this helps.

    Thanks mate, is that just on quotes?

    I like the look of that, either that or a yellow.

    Would you be able to share the code for that at all Mark? 😁.

    @jac It’s in the above post 😉

  • @jac It’s in the above post 😉

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

  • @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

  • @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

    https://fonts.google.com/specimen/Alfa+Slab+One

    Maybe something like that for the titles?

    Thanks as always.

  • @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    @jac said in NodeBB customisation:

    Am ok to keep posting little tweaks that I am looking to change?

    Yes, that’s fine

  • @jac said in NodeBB customisation:

    Am ok to keep posting little tweaks that I am looking to change?

    Yes, that’s fine

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Am ok to keep posting little tweaks that I am looking to change?

    Yes, that’s fine

    Many thanks mate 👍🏻

  • https://fonts.google.com/specimen/Alfa+Slab+One

    Maybe something like that for the titles?

    Thanks as always.

    @jac Do you have anything in mind for the body font ? I recall last time we used Poppins (which happens to be the fine used here)

  • @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

    I’ve actually found a screenshot of how grtit looked last time. The font etc and the bottom bar looked great!
    IMG_20210512_092944.jpg

  • @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

    I’ve actually found a screenshot of how grtit looked last time. The font etc and the bottom bar looked great!
    IMG_20210512_092944.jpg

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’s in the above post 😉

    Apologies! 😁

    Worked a treat! Many thanks again 👍🏻.

    Am ok to keep posting little tweaks that I am looking to change?

    Looking to change the font & number of read posts.

    IMG_20210927_212333.jpg

    Looking to change this to blue white a white font and then as the posts are read it changes to yellow?

    Is this something that is possible? I seem to remember it working out well on the last installation.

    Many thanks.

    I’ve actually found a screenshot of how grtit looked last time. The font etc and the bottom bar looked great!
    IMG_20210512_092944.jpg

    Although the bottom colour is a little dark for County still looked great 😉

  • @jac Do you have anything in mind for the body font ? I recall last time we used Poppins (which happens to be the fine used here)

    @phenomlab said in NodeBB customisation:

    @jac Do you have anything in mind for the body font ? I recall last time we used Poppins (which happens to be the fine used here)

    I’ll have to have a look, I remember yes. Looks great, although I’m mindful of copying.


Related Topics
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    1k Views
    Thank you Mark, the changes look fantastic!!
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    3k Views
    @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.
  • 6 Votes
    15 Posts
    3k Views
    No no, I said that in the sense that he told me it was simple ^^ I was able to see that this was not the case by targeting the elements he had advised me.
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    2k Views
    @cagatay That matches what I see [image: 1667218162107-4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    1k Views
    @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 Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    2k Views
    @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 ?
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    1k Views
    @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: 1633427929198-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 .
  • Forum customisation

    Customisation forum customise
    17
    3 Votes
    17 Posts
    3k Views
    @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.