Skip to content

[NODEBB] CSS Style Sheets SelectBox

Locked Solved Customisation
112 2 64.9k 1
  • 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;

  • wrote on last edited by
    #55

    @phenomlab

    nope doesn’t work

  • @phenomlab

    nope doesn’t work

    wrote on last edited by
    #56

    @downpw Try background-color: transparent !important;


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
  • 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]
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    899 Views
    No one has replied
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    6k Views
    phenomlab
    @pwsincd 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 ?
  • tag icon in front of tags

    Solved Customisation css
    5
    3 Votes
    5 Posts
    2k Views
    crazycells
    @phenomlab said in tag icon in front of tags: @crazycells Are you using Font Awesome Free ? If so, try this span.tag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; margin-right: 5px; margin-left: 5px; font-weight: 900; } yeap, this worked thanks a lot.
  • [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.
  • 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
  • Multiple link on one ico non Navbar

    Solved Customisation links css navbar
    7
    1
    2 Votes
    7 Posts
    3k Views
    DownPW
    yeah you’re right @phenomlab. Problem of NodeBB Version
  • 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 .