Fixed background to nodebb forum

[Panda]

@phenomlab ah ok
So how do I change one color in a skin?

[phenomlab]

@Panda first, define “skin”

[Panda]

@phenomlab I go to admin menu and select skins
Current one is Quartz

[phenomlab]

@Panda ok, but which code runs this? Is it mine, or someone else’s work (it does make a difference.

Edit - ok, unless I login, I cannot change the skin if it’s under admin. I’m being forced to wear sunglasses currently.

[Panda]

@phenomlab
on aignite.nodebb.com I want to pick skin with colors that look ok over back image.
But all the skins I try have at least one text color that is light and hard to see over image

[phenomlab]

@Panda it seems you are using the NodeBB skins which frankly, are terrible. They are all based on bootswatch and all have issues.

You really need to custom develop a skin if your want it to look right.

[Panda]

@phenomlab yea, this is what Im asking,
Using a skin but maybe modifying one of the color choices

[phenomlab]

@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]

@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

[phenomlab]

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;
}

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.

[Panda]

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

[phenomlab]

@Panda said in Fixed background to nodebb forum:

Chatgpt told me the ::before method.

Go figure