Skip to content

NodeBB customisation

Locked Customisation
332 4 279.9k 1
  • @jac Ok. First things first, locate block

    .recent-cards .recent-card-container .recent-card
    

    And set line

    opacity: 0.8;
    

    To

    opacity: 1;
    

    Let me know if that solves the background issue with the cards ?

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Ok. First things first, locate block

    .recent-cards .recent-card-container .recent-card
    

    And set line

    opacity: 0.8;
    

    To

    opacity: 1;
    

    Let me know if that solves the background issue with the cards ?

    Fantastic, that’s worked 🙂 many thanks!

  • wrote on last edited by phenomlab

    @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

  • @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

    Thank you Mark.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

    Thank you Mark.

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

    Thank you Mark.

    Just updating laptop…

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @JAC your custom header is inactive from what I can see

    5b082501-41da-492d-accc-42aad4b491c5-image.png

    I’ve enabled it. Still not working as expected though, so checking now

    Thank you Mark.

    wrote on last edited by

    @jac Fixed. You had both the background and the bar set to the same colour 🙂

  • @jac Fixed. You had both the background and the bar set to the same colour 🙂

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Fixed. You had both the background and the bar set to the same colour 🙂

    Fantastic mate, thank you very much! 😄 🙂

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Fixed. You had both the background and the bar set to the same colour 🙂

    Fantastic mate, thank you very much! 😄 🙂

    wrote on last edited by

    @jac @phenomlab
    Sorry Mark, another question for you… 🤞

    Is there a way to change the header font whilst leaving body text the same?

  • JAC JAC

    @jac @phenomlab
    Sorry Mark, another question for you… 🤞

    Is there a way to change the header font whilst leaving body text the same?

    wrote on last edited by

    @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    #194F90

    The nav bar is fine mate, it’s the cards I wish to change mate. Having a nightmate too with the reading progress meter change too. I’ve followed all instructions but can’t get it to show.

    Going back to the cards although I’ve chosen the same colour as the nav bar the colours simply don’t match.

    Screenshot 2022-01-14 at 13-14-18 Stockport County FC Fans Forum.png

    Apologies in advance mate I don’t want this to become an issue where you get annoyed 😛 🙂

    wrote on last edited by

    @jac said in NodeBB customisation:

    I don’t want this to become an issue where you get annoyed

    Just seen this - I don’t get annoyed. The entire purpose of Sudonix is to help you.

  • @jac said in NodeBB customisation:

    I don’t want this to become an issue where you get annoyed

    Just seen this - I don’t get annoyed. The entire purpose of Sudonix is to help you.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I don’t want this to become an issue where you get annoyed

    Just seen this - I don’t get annoyed. The entire purpose of Sudonix is to help you.

    Thank you Mark, much appreciated.

  • @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

    Thanks mate, how would I know generally which fonts are available sorry?

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

    Thanks mate, how would I know generally which fonts are available sorry?

    wrote on last edited by

    @phenomlab sorry for the many posts.

    I’ve just looked on mobile view and realised the notification icon is placed over the menu icon?

    IMG_20220114_160040.jpg

  • JAC JAC

    @phenomlab sorry for the many posts.

    I’ve just looked on mobile view and realised the notification icon is placed over the menu icon?

    IMG_20220114_160040.jpg

    wrote on last edited by

    @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    
  • @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    
    wrote on last edited by

    @downpw said in NodeBB customisation:

    @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    

    Thanks, will try that pal 👍🏻.

  • JAC JAC

    @downpw said in NodeBB customisation:

    @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    

    Thanks, will try that pal 👍🏻.

    wrote on last edited by

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    

    Thanks, will try that pal 👍🏻.

    Returns error mate.

    IMG_20220114_165808.jpg

  • JAC JAC

    @jac said in NodeBB customisation:

    @downpw said in NodeBB customisation:

    @jac

    test that:

    @media (max-width: 1199px)
    .header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
    

    Thanks, will try that pal 👍🏻.

    Returns error mate.

    IMG_20220114_165808.jpg

    wrote on last edited by

    @jac

    whoops sorry, forget {}

    @media (max-width: 1199px)
    {
    .header .navbar-toggle .notification-icon {
            left: auto;
            right: -8px;
            top: 10px;
        }
    }
    
  • @jac

    whoops sorry, forget {}

    @media (max-width: 1199px)
    {
    .header .navbar-toggle .notification-icon {
            left: auto;
            right: -8px;
            top: 10px;
        }
    }
    
    wrote on last edited by

    @downpw said in NodeBB customisation:

    @jac

    whoops sorry, forget {}

    @media (max-width: 1199px)
    {
    .header .navbar-toggle .notification-icon {
            left: auto;
            right: -8px;
            top: 10px;
        }
    }
    

    Many thanks mate 😁.

    How does that look now?

    IMG_20220114_171700.jpg

  • wrote on last edited by

    Yeah play with code for obtain that you want

  • Yeah play with code for obtain that you want

    wrote on last edited by

    @downpw Thanks 😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

    Thanks mate, how would I know generally which fonts are available sorry?

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac Yes, you can use this CSS

    .topic [component="post/header"] {
        font-family: "Arial";
    

    Note that font-family is an example. It can be any font you desire as long as it is available on the site.

    Thanks mate, how would I know generally which fonts are available sorry?

    Can fonts be imported? Looking for a bold font for titles.


Related Topics
  • 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
    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.
  • [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
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • 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.
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    2k Views
    JAC
    @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: 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
    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.