Skip to content

[NODEBB] CSS Style Sheets SelectBox

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

  • wrote on last edited by
    #57

    yes I have test that too 😞


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

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    893 Views
    No one has replied
  • 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] 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
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    274k Views
    phenomlab
    @jac Given your departure away from your previous project, I’m going to close this thread…