Skip to content

Fixed background to nodebb forum

Solved Configure
25 2 7.7k 1
  • @phenomlab yea, this is what Im asking,
    Using a skin but maybe modifying one of the color choices

    @Panda the really depends on what you want to do. Are you offering the same skin to everyone, or do you want to have light and dark modes etc?

    If the one skin, then this is simple enough, but you’d need a lot of custom css to make this work.

  • @Panda the really depends on what you want to do. Are you offering the same skin to everyone, or do you want to have light and dark modes etc?

    If the one skin, then this is simple enough, but you’d need a lot of custom css to make this work.

    @phenomlab the background is supposed to be different for every user everytime they reload page
    but its always covered in light yellow color (alpha .86) so background will always be light

    Its just in each skin theres always one text color that is also light

  • Not sure why you are using a before pseudonym element to set the overlay. It’s much more efficient to do it this way (for example)

    body {
        position: relative;
        background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(https://loremflickr.com/500/500/flame);
        min-height: 90%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    

    image.png

    The below CSS block should be removed

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 240, 220, 0.85);
        z-index: -100;
    }
    

    z-index: -100; is also overkill - -1 is usually always enough as this places the target element behind everything else.

  • Not sure why you are using a before pseudonym element to set the overlay. It’s much more efficient to do it this way (for example)

    body {
        position: relative;
        background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(https://loremflickr.com/500/500/flame);
        min-height: 90%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    

    image.png

    The below CSS block should be removed

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 240, 220, 0.85);
        z-index: -100;
    }
    

    z-index: -100; is also overkill - -1 is usually always enough as this places the target element behind everything else.

    @phenomlab ah…
    Chatgpt told me the ::before method.
    Thanks for the human input 🙂

  • @phenomlab ah…
    Chatgpt told me the ::before method.
    Thanks for the human input 🙂

    @Panda said in Fixed background to nodebb forum:

    Chatgpt told me the ::before method.

    Go figure 😛


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
  • 14 Votes
    17 Posts
    4k Views
    No problem dude ! I hope you have a good vacation. Enjoy your loved ones!
  • NodeBB socket with CloudFlare

    Solved Performance socket cloudflare nodebb
    24
    3 Votes
    24 Posts
    10k Views
    Solved. Tuto here and here
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    31k Views
    This is good
  • NodeBB: Upgrading to NodeBB v3.x

    Solved Configure nodebb v3.x
    6
    0 Votes
    6 Posts
    2k Views
    @mventures You’d need to connect to the server and execute it directly - not on your local terminal. Review the guide below, which will show you how to gain access via SSH to your server https://docs.ovh.com/gb/en/dedicated/ssh-introduction/ Once you have access, you’ll need to navigate to the actual folder where NodeBB is installed You’ll then need to change to the directory as shown below /home/unbuntu/nodebb [image: 1680448167972-fdffe673-bf63-4b6d-a728-5506fddc1aff-image.png] In most cases, initial access takes you to the root of the file system. You can always issue pwd in a Linux terminal which will show you the Present Working Directory. From there, you can issue the command cd /home/ubuntu/nodebb Once in the NodeBB directory, you’d use the below commands ./nodebb stop git fetch && git checkout develop && git reset --hard origin/develop ./nodebb upgrade ./nodebb start Line 1 stops the NodeBB instance Line 2 gets the latest files from GIT (repository) and then checks out the development branch. It then resets the version you are using to the development branch ready for v3 Line 3 Runs the upgrade once the new branch is set, and code pulled Line 4 Restarts the NodeBB instance after the upgrade has completed Note that when you restart NodeBB and log back in, things will look very different to what you had in v2.
  • Podcast Share NodeBB

    Solved Configure podcast nodebb
    15
    4 Votes
    15 Posts
    3k Views
    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.
  • Forum not loading

    Solved Configure
    27
    0 Votes
    27 Posts
    9k Views
    @phenomlab Brilliant!! Thanks ever so much!! Now I need to try pull in new members
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    2k Views
    @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: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed