Skip to content

NodeBB customisation

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

    wrote on last edited by phenomlab
    #55

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

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

    wrote on last edited by
    #56

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

    wrote on last edited by
    #57

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

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

    wrote on last edited by phenomlab
    #58

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

    wrote on last edited by
    #59

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

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

    wrote on last edited by
    #60

    @jac yes

  • JAC JAC

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

    wrote on last edited by
    #61

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

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

    wrote on last edited by
    #62

    @jac It’s in the above post 😉

  • @jac It’s in the above post 😉

    wrote on last edited by
    #63

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

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

    wrote on last edited by
    #64

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

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

    wrote on last edited by
    #65

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

    Maybe something like that for the titles?

    Thanks as always.

  • JAC JAC

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

    wrote on last edited by
    #66

    @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

    wrote on last edited by
    #67

    @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 👍🏻

  • JAC JAC

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

    Maybe something like that for the titles?

    Thanks as always.

    wrote on last edited by phenomlab
    #68

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

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

    wrote on last edited by
    #69

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

    @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

    wrote on last edited by
    #70

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

    wrote on last edited by
    #71

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

  • JAC JAC

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

    wrote on last edited by
    #72

    @jac No issues. It’s really just a font 🤷‍♂️
    Thanks for providing the screenshots. This is useful. I’ll get to this ASAP.

  • @jac No issues. It’s really just a font 🤷‍♂️
    Thanks for providing the screenshots. This is useful. I’ll get to this ASAP.

    wrote on last edited by
    #73

    @phenomlab said in NodeBB customisation:

    @jac No issues. It’s really just a font 🤷‍♂️
    Thanks for providing the screenshots. This is useful. I’ll get to this ASAP.

    Many thanks Mark,

    As previously discussed I know you don’t want things copying although the reason I ask for the changes to be replicated as they are great ideas and improve the design etc.

  • @jac No issues. It’s really just a font 🤷‍♂️
    Thanks for providing the screenshots. This is useful. I’ll get to this ASAP.

    wrote on last edited by
    #74

    @phenomlab said in NodeBB customisation:

    Thanks for providing the screenshots. This is useful.

    Not a problem 😁


Related Topics
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • Forum customisation

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

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

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    5k Views
    Panda
    @phenomlab YAY! It works Thanks so much
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • 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 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.