Skip to content

[NODEBB] CSS Style Sheets SelectBox

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

  • yes I have test that too 😞

    wrote on last edited by
    #58

    @downpw Odd. This is what I see.

    fa57dac4-c747-4631-93a3-ecc909a715bf-image.png

    Then, from your body class, I change background-color: white to background-color: transparent;

    So the CSS now look like

    body {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        font-size: 14px;
        line-height: 1.42857143;
        color: white;
        background-color: transparent;
    }
    

    And the image displays

    348090d9-80ff-416b-8090-f0409dd44bbd-image.png

  • wrote on last edited by DownPW
    #59

    how and where do you do that ?

  • how and where do you do that ?

    wrote on last edited by phenomlab
    #60

    @downpw By altering the CSS in the DOM directly. F12, then “inspect”, select element, and change

    This is what I see

    491aea78-a146-4553-81e0-f71aa9362658-image.png

    Can you change the background-color: white; in eva_00.css to background-color: transparent; and let me know when done ?

    Actually, you can probably remove it altogether ?

  • wrote on last edited by
    #61

    yes it’s that.
    I must change on all CSS file

  • yes it’s that.
    I must change on all CSS file

    wrote on last edited by
    #62

    @downpw Yep. Or, you can just remove that line in each file.

  • wrote on last edited by
    #63

    Ok great my Lord 😉

  • wrote on last edited by DownPW
    #64

    @phenomlab

    It’s because i use this variable for this when I delete a message on Chat

    aa138d2a-5fa2-4b5c-a610-0a80ab24a0f2-image.png


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.
  • 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]
  • 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 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 ?
  • 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.
  • 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.