Skip to content

[NODEBB] CSS Style Sheets SelectBox

Locked Solved Customisation
112 2 63.3k 1
  • Hmm I search to reducs space between Icon search bar and notification icon

    wrote on last edited by
    #35

    @downpw Can you provide a screenshot to explain what you are looking for ?

  • wrote on last edited by DownPW
    #36

    off course @phenomlab
    I search to reducs space between Icon search bar and notification icon

    4c1df3fb-ffe3-4097-b058-f6fd7011f679-image.png

  • off course @phenomlab
    I search to reducs space between Icon search bar and notification icon

    4c1df3fb-ffe3-4097-b058-f6fd7011f679-image.png

    wrote on last edited by
    #37

    @downpw Try

    #switcher {
        margin-right: -15px;
        margin-left: -15px;
    }
  • wrote on last edited by
    #38

    @phenomlab said in [NODEBB] CSS Style Sheets SelectBox:

    #switcher {
    margin-right: -15px;
    margin-left: -15px;
    }

    Yes very Good !!!
    Like this The button is well : Thanks

    baaaa269-6f3e-4a51-acc6-b05138b51349-image.png

  • @phenomlab said in [NODEBB] CSS Style Sheets SelectBox:

    #switcher {
    margin-right: -15px;
    margin-left: -15px;
    }

    Yes very Good !!!
    Like this The button is well : Thanks

    baaaa269-6f3e-4a51-acc6-b05138b51349-image.png

    wrote on last edited by
    #39

    @downpw

    Right. I moved the custom HTML to a HTML based global widget, and that works 🙂 Give it a try

    Also, not sure why you are using the html class for the background images. You should use body. I just tried it, and it works fine

  • wrote on last edited by
    #40

    @DownPW some additional advice. The images you are calling remotely should be hosted on your own server. This will prevent unnecessary remote calls, and will also load faster. I’m seeing delay times of up to a second before the wallpaper appears 🙂

  • wrote on last edited by
    #41

    @phenomlab

    Ok if I understood, I can’t use custom ACP Header for HTML code. I must use an HTML widgets.

    For background, I use the code on NodeBB forum but if you have a code working great on desktop and mobile. II want it a lot
    🙂

  • @phenomlab

    Ok if I understood, I can’t use custom ACP Header for HTML code. I must use an HTML widgets.

    For background, I use the code on NodeBB forum but if you have a code working great on desktop and mobile. II want it a lot
    🙂

    wrote on last edited by phenomlab
    #42

    @downpw 🙂 If you move the background CSS you are using out of the html element and into the body for each stylesheet, it’ll work.

    Not sure why the custom HTML works fine in a widget, but… well - it works !

  • wrote on last edited by
    #43

    For Wallpaper, i will test your solution. That solutino work on mobile ?

  • For Wallpaper, i will test your solution. That solutino work on mobile ?

    wrote on last edited by
    #44

    @downpw Yes, it does.

  • wrote on last edited by
    #45

    like this ? @phenomlab

    /* Smartphone */
    @media (min-width: 320px) {
    body {
            background: url(https://i.imgur.com/XXXX.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    }
    }
    
    /* Desktop */
    @media (min-width: 1281px) {
        body {
            background: url(https://i.imgur.com/XXXX.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    }
    
  • like this ? @phenomlab

    /* Smartphone */
    @media (min-width: 320px) {
    body {
            background: url(https://i.imgur.com/XXXX.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    }
    }
    
    /* Desktop */
    @media (min-width: 1281px) {
        body {
            background: url(https://i.imgur.com/XXXX.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    }
    
    wrote on last edited by
    #46

    @downpw Yep. That should work.

  • wrote on last edited by DownPW
    #47

    @phenomlab

    Whoops, I have test and not work on mobile 😞
    Just fix this and it’s perfect for me

  • @phenomlab

    Whoops, I have test and not work on mobile 😞
    Just fix this and it’s perfect for me

    wrote on last edited by
    #48

    @downpw So it’s working now ?

  • wrote on last edited by DownPW
    #49

    no.
    white background on mobile

  • no.
    white background on mobile

    wrote on last edited by
    #50

    @downpw Ok. Checking now.

  • wrote on last edited by DownPW
    #51

    @phenomlab

    I see this on console with smartphone enabled

    267a067e-3c73-4e0f-9ca0-307944ca8fd3-image.png

  • @phenomlab

    I see this on console with smartphone enabled

    267a067e-3c73-4e0f-9ca0-307944ca8fd3-image.png

    wrote on last edited by
    #52

    @downpw Yes, I see it. On each CSS sheet you have, change

    background-color: white to background-color: transparent; on the body tag and let me know if that fixes it.

  • wrote on last edited by DownPW
    #53

    Ok I test that

  • Ok I test that

    wrote on last edited by
    #54

    @downpw On each body tag, change background-color: white to background-color: transparent;


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • CSS border gradients

    Blog gradient border css
    10
    3
    2 Votes
    10 Posts
    3k Views
    cagatay
    ah f5 need
  • Widget | CSS customization

    Solved WordPress css
    53
    17 Votes
    53 Posts
    19k Views
    phenomlab
    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k 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.
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • 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
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @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 ?