Skip to content

NodeBB customisation

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

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    @jac I fixed that a while back

    5ef8bafc-394b-4c8e-a938-ec3a40722a53-image.png

  • @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    Apologies it’s this mate, it was hiding at the start of the quote.

  • @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    Apologies it’s this mate, it was hiding at the start of the quote.

    This post is deleted!
  • @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    Apologies it’s this mate, it was hiding at the start of the quote.

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    Apologies it’s this mate, it was hiding at the start of the quote.

    Screenshot_2021-05-06-21-28-41-777_com.android.chrome.jpg

    IMG_20210512_092944.jpg

    Title font appears to be bold compared? Although possibly same font.

  • @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @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

    Is there any way to change the member name colour on the quote? As this clashes with the colour.

    Thanks 👍🏻.

    IMG_20210928_223447.jpg

    Youll see the title don’t appears to be different or bold.

    Many thanks as always!

    Apologies it’s this mate, it was hiding at the start of the quote.

    Screenshot_2021-05-06-21-28-41-777_com.android.chrome.jpg

    IMG_20210512_092944.jpg

    Title font appears to be bold compared? Although possibly same font.

    @jac said in NodeBB customisation:

    Title font appears to be bold compared? Although possibly same font.

    Ok, add this

    .topic h1 .topic-title {
        font-weight: 600;
    }
    
  • @jac said in NodeBB customisation:

    Title font appears to be bold compared? Although possibly same font.

    Ok, add this

    .topic h1 .topic-title {
        font-weight: 600;
    }
    

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Title font appears to be bold compared? Although possibly same font.

    Ok, add this

    .topic h1 .topic-title {
        font-weight: 600;
    }
    

    Worked a treat again my friend, thank you very much as always!

  • @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Title font appears to be bold compared? Although possibly same font.

    Ok, add this

    .topic h1 .topic-title {
        font-weight: 600;
    }
    

    Worked a treat again my friend, thank you very much as always!

    There’s probably going to be more changes on the way, if that’s ok? But like I’ve said previously I’m more than happy to put the Phenomlab stamp on it 👍🏻.

  • There’s probably going to be more changes on the way, if that’s ok? But like I’ve said previously I’m more than happy to put the Phenomlab stamp on it 👍🏻.

    I think this was done last time… Is there any way to add … To the slider if it has a certain amount of characters?

    Many thanks.

  • There’s probably going to be more changes on the way, if that’s ok? But like I’ve said previously I’m more than happy to put the Phenomlab stamp on it 👍🏻.

    @jac Fine. Just keep using this thread as we’ll document the changes along the way

  • @jac Fine. Just keep using this thread as we’ll document the changes along the way

    @phenomlab said in NodeBB customisation:

    @jac Fine. Just keep using this thread as we’ll document the changes along the way

    Many thanks mate, sounds good to me 😁.

  • I think this was done last time… Is there any way to add … To the slider if it has a certain amount of characters?

    Many thanks.

    @jac Something like this ?

    6845e44d-bfae-4e7b-925d-de3fb41c4e1d-image.png

    .recent-cards .recent-card-container .recent-card .topic-info p {
        max-width: 200px;
        margin: 0;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    
  • @jac Something like this ?

    6845e44d-bfae-4e7b-925d-de3fb41c4e1d-image.png

    .recent-cards .recent-card-container .recent-card .topic-info p {
        max-width: 200px;
        margin: 0;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    

    @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    6845e44d-bfae-4e7b-925d-de3fb41c4e1d-image.png

    .recent-cards .recent-card-container .recent-card .topic-info p {
        max-width: 200px;
        margin: 0;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    

    Thanks mate, yes like that but with the … At the end of the last word in the box?

  • @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    6845e44d-bfae-4e7b-925d-de3fb41c4e1d-image.png

    .recent-cards .recent-card-container .recent-card .topic-info p {
        max-width: 200px;
        margin: 0;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    

    Thanks mate, yes like that but with the … At the end of the last word in the box?

    @jac That’s not as simple as it looks unfortunately. The text isn’t formatted as a single line so the artefact of that is the multiple three dots you can see. It’s possible to consolidate this into one line, but it can only be for that particular view meaning you need explicit CSS.

    Happy to have another look, but it’s a lot of work for very little (cosmetic) gain.

  • @jac That’s not as simple as it looks unfortunately. The text isn’t formatted as a single line so the artefact of that is the multiple three dots you can see. It’s possible to consolidate this into one line, but it can only be for that particular view meaning you need explicit CSS.

    Happy to have another look, but it’s a lot of work for very little (cosmetic) gain.

    @phenomlab said in NodeBB customisation:

    @jac That’s not as simple as it looks unfortunately. The text isn’t formatted as a single line so the artefact of that is the multiple three dots you can see. It’s possible to consolidate this into one line, but it can only be for that particular view meaning you need explicit CSS.

    Happy to have another look, but it’s a lot of work for very little (cosmetic) gain.

    Thanks for looking mate, I seem to remember it was possible last time but I can’t find a screenshot to show you unfortunately.

    No sweat mate, I just thought it would look a bit more professional and cleaner 👍🏻.

  • @jac That’s not as simple as it looks unfortunately. The text isn’t formatted as a single line so the artefact of that is the multiple three dots you can see. It’s possible to consolidate this into one line, but it can only be for that particular view meaning you need explicit CSS.

    Happy to have another look, but it’s a lot of work for very little (cosmetic) gain.

    @phenomlab is there any way to change the colour of the tags?

    IMG_20211007_221027.jpg

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Many thanks 🤞🏻

  • @phenomlab is there any way to change the colour of the tags?

    IMG_20211007_221027.jpg

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Many thanks 🤞🏻

    Apologies to keep throwing these into the mix.
    .if the requests get too much let me know. I just find little changes here and there.

    Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

    Many thanks 🤝

  • @phenomlab said in NodeBB customisation:

    @jac That’s not as simple as it looks unfortunately. The text isn’t formatted as a single line so the artefact of that is the multiple three dots you can see. It’s possible to consolidate this into one line, but it can only be for that particular view meaning you need explicit CSS.

    Happy to have another look, but it’s a lot of work for very little (cosmetic) gain.

    Thanks for looking mate, I seem to remember it was possible last time but I can’t find a screenshot to show you unfortunately.

    No sweat mate, I just thought it would look a bit more professional and cleaner 👍🏻.

    @jac said in NodeBB customisation:

    look a bit more professional and cleaner

    Had another go at this. The best I’ve come up with is

    .recent-cards .recent-card-container .recent-card .recent-card-body {
        height: 143px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        max-width: 200px;
        line-height: 1.2;
        white-space: nowrap;
    }
    

    Which looks like the below

    3a53b0e8-0e22-4790-8428-f70ecdcdf403-image.png

  • @phenomlab is there any way to change the colour of the tags?

    IMG_20211007_221027.jpg

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Many thanks 🤞🏻

    @jac said in NodeBB customisation:

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Yes. See CSS below

    .tag-item {
        border-radius: 4px 0px 0px 4px;
        vertical-align: middle;
        float: left;
        width: auto;
        background-color: #194F90;
        color: #ffffff;
        font-weight: 500;
        position: relative;
        padding: 8px 5px 4px 10px;
        height: 39px;
        padding-right: 10px;
    }
    .tag-topic-count.human-readable-number {
        float: left;
        width: auto;
        margin-top: 0px;
        background-color: #FFC557;
        color: #333;
        padding: 8px 4px 0px 4px;
        border: 0;
        text-align: center;
        min-width: 50px;
        border-radius: 0px 4px 4px 0px;
        height: 39px;
    }
    

    Looks like this

    6f0dab65-9bab-41b3-a083-e6c2a2f5ff38-image.png

  • Apologies to keep throwing these into the mix.
    .if the requests get too much let me know. I just find little changes here and there.

    Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

    Many thanks 🤝

    @jac said in NodeBB customisation:

    Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

    Like this ?

    5883be0c-e2f0-4677-a4ac-58a1ba86cee7-image.png

    blockquote .plugin-mentions-user.plugin-mentions-a {
        color: #ffc557;
    }
    
  • @jac said in NodeBB customisation:

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Yes. See CSS below

    .tag-item {
        border-radius: 4px 0px 0px 4px;
        vertical-align: middle;
        float: left;
        width: auto;
        background-color: #194F90;
        color: #ffffff;
        font-weight: 500;
        position: relative;
        padding: 8px 5px 4px 10px;
        height: 39px;
        padding-right: 10px;
    }
    .tag-topic-count.human-readable-number {
        float: left;
        width: auto;
        margin-top: 0px;
        background-color: #FFC557;
        color: #333;
        padding: 8px 4px 0px 4px;
        border: 0;
        text-align: center;
        min-width: 50px;
        border-radius: 0px 4px 4px 0px;
        height: 39px;
    }
    

    Looks like this

    6f0dab65-9bab-41b3-a083-e6c2a2f5ff38-image.png

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

    Yes. See CSS below

    .tag-item {
        border-radius: 4px 0px 0px 4px;
        vertical-align: middle;
        float: left;
        width: auto;
        background-color: #194F90;
        color: #ffffff;
        font-weight: 500;
        position: relative;
        padding: 8px 5px 4px 10px;
        height: 39px;
        padding-right: 10px;
    }
    .tag-topic-count.human-readable-number {
        float: left;
        width: auto;
        margin-top: 0px;
        background-color: #FFC557;
        color: #333;
        padding: 8px 4px 0px 4px;
        border: 0;
        text-align: center;
        min-width: 50px;
        border-radius: 0px 4px 4px 0px;
        height: 39px;
    }
    

    Looks like this

    6f0dab65-9bab-41b3-a083-e6c2a2f5ff38-image.png

    That looks absolutely amazing! Thank you very much!! 😁


Related Topics
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    713 Views
    @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
    2k Views
    @cagatay That matches what I see [image: 1667218162107-4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    1k Views
    @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
    2k Views
    @downpw ooops. Forgot that. Thanks for adding.
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    4k Views
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    2k Views
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    2k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    @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.