Skip to content
Sudonix

NodeBB customisation

Locked Customisation
332 4 279.9k 1
  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac all the work in terms of design and layout is open source, so you can take what you want without needing to ask. The only point where I draw the line is where your site becomes a direct replica in terms of appearance to this one.

    Absolutely mate, I wouldn’t do that 😁.

    Certainly interesting how the standard quote image is pretty much a line, it’s well changed and I’d have no clue how you managed to achieve it 😉.

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #48

    @jac Standard line ? Not sure I follow

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @jac Standard line ? Not sure I follow

    JAC
    JAC
    JAC
    wrote on
    #49

    @phenomlab said in NodeBB customisation:

    @jac Standard line ? Not sure I follow

    Apologies I should have explained better.

    The image shows a grey line to the left which is the quote, is that right?

    What I’m thinking of is how on earth you managed to change it from how it is to what you have now which looks 100000% more professional 😉😆.

    IMG_20210926_102256.jpg

    0
  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Standard line ? Not sure I follow

    Apologies I should have explained better.

    The image shows a grey line to the left which is the quote, is that right?

    What I’m thinking of is how on earth you managed to change it from how it is to what you have now which looks 100000% more professional 😉😆.

    IMG_20210926_102256.jpg

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #50

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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

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

    JAC
    JAC
    JAC
    wrote on
    #51

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

    0
  • JAC JAC

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

    JAC
    JAC
    JAC
    wrote on
    #52

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

    0
  • JAC JAC

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

    JAC
    JAC
    JAC
    wrote on
    #53

    @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

    0
  • JAC JAC

    @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

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #54

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

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @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
    JAC
    JAC
    wrote on
    #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.

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

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @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
    JAC
    JAC
    wrote on
    #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!

    0
  • 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!

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @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
    JAC
    JAC
    wrote on
    #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?

    phenomlab JAC 2 Replies
    0
  • 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?

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #60

    @jac yes

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

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

    JAC
    JAC
    JAC
    wrote on
    #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? 😁.

    0
  • 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? 😁.

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #62

    @jac It’s in the above post 😉

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @jac It’s in the above post 😉

    JAC
    JAC
    JAC
    wrote on
    #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 phenomlab 2 Replies
    0
  • 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?

    JAC
    JAC
    JAC
    wrote on
    #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 2 Replies
    0
  • 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.

    JAC
    JAC
    JAC
    wrote on
    #65

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

    Maybe something like that for the titles?

    Thanks as always.

    phenomlab 1 Reply
    0
  • 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?

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #66

    @jac said in NodeBB customisation:

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

    Yes, that’s fine

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • phenomlab phenomlab

    @jac said in NodeBB customisation:

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

    Yes, that’s fine

    JAC
    JAC
    JAC
    wrote on
    #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 👍🏻

    0
Log in to reply

Related Topics
  • Sampo2910

    Custom Page - nodebb

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

    Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    7k 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.
  • cagatay

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

    [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
  • DownPW

    [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.
  • JAC

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

    [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • JAC

    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.