Separate background classes

Razor

It would be nice if separated bg classes could be added. Because, if i want, for example, to add a blurred effect, or similar effect it will affect everything, including text etc. Or is there some way around?

Pollux

Razor For example a .Hero class.

There is only one element with a .Hero class, so its styling should be easy. You could use e.g.:

body header.Hero {
    background-image: url(/assets/winter_1024.png);
}

to apply a background image to the header. See it in effect here.

As you can see, I applied the rule to body header.Hero instead of header.Hero or just .Hero , as the first one has a higher specifity than the latter ones. If you want to learn more about the principle, find it out here. Which level of specifity is needed, you have to try for yourself. Usually it's enough to have the same specifity as Flarum's own rules, as your custom CSS via the admin panel > Appearance settings are applied after Flarum's own rules and thus supercede them.

Razor Because, if i want, for example, to add a blurred effect

I guess you want to blur the contents of the .Hero header. There are some explanations here.

Pollux

Which element do you want your effect apply to?

Often a cascade of element ids or classes allows CSS rules to target just certain elements.

clarkwinkelmann

You can use pseudo classes (::before, ::after) to create new elements above or below the background. Styling pseudo elements with cascading effects won't impact the children of the original node.

Razor

@Pollux
For example a .Hero class.
@clarkwinkelmann
Thanks for advice, but i can't get it working. Probably i am doing something wrong. So basically i am supposed to add .Hero::before {css declaration}, but nothing is happening.

clarkwinkelmann

Razor So basically i am supposed to add .Hero::before {css declaration}, but nothing is happening

Pseudo-elements are inline by default and do not contain anything, and therefore their background can't be seen. You need to change their display/size and give them an appropriate positioning (via relative and/or absolute positioning for example).

I'm not sure what exactly you are trying to do but unless you're applying some filter properties on your background node then you should be fine with Pollux guidance ?

ChadJessen

Using firefox and f12 I put the following css and it doesn't do anything either.

.Hero.DiscussionHero.DiscussionHero--colored::after {
background-image: url('https://steemitimages.com/DQmZpRgMSms57P2WE5qFzvGh42CpK6J9hn5tQBXA4ZtMNvk/gettyimages-185071735.jpg')
}

I also tried the same thing with just .Hero and it didn't work either. From my understanding it should have put that image as the background after the hero div.

The reading that I did mentioned that the doctype needs to be difined in order to work. Which looking at the code it is defined. <!DOCTYPE html>

What are we missing here? Is there something that isn't being done properly with the css maybe?

Pollux

I still don't exactly know what your are trying to achieve. You want to affect the .Hero header, you want to specifically affect the .DiscussionHero--colored header, you want to apply a background image and you want to blur something without "affecting everything." If that means that you want to blur only the background but not the contents (the child elements like text nodes), why don't you blur the image yourself and then upload the blurred image?

But let's assume you, for whatever reason, want to proceed with blurring a background with CSS without blurring the contents (the child nodes within). In this case, as clarkwinkelmann put it, you need an extra element inserted into the header, which doesn't affect the other child nodes:

.Hero.DiscussionHero.DiscussionHero--colored {
    background: none;
}

.Hero.DiscussionHero.DiscussionHero--colored::before {    /* or ::after */
    z-index: -1;
    background-image: url('https://steemitimages.com/DQmZpRgMSms57P2WE5qFzvGh42CpK6J9hn5tQBXA4ZtMNvk/gettyimages-185071735.jpg');
    width: 100%;
    height: 150px;                                        /* adjust to your needs */
    position: absolute;
    top: 50px;                                            /* adjust to your needs */
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

Razor

I suppose, i didn't explain very well what i want. So i hope this time we will understand each other. But, first thanks for tips if nothing, they are really helpful.
This is how it looks right now: https://etforum.freeflarum.com/
So, the code for .Hero class is:
.Hero{
background-color: rgba(232, 232, 232, 0.7);
border-radius: 5px;
}
if i add
-webkit-filter: blur(5px);
filter: blur(5px);
it will blur everything including bg and text. So i wanted just to blur background-color attribute, without blurring text.
I tried your solution, what u posted in post above my, but that do not seem to work either. But, really, thank you, for your time and i hope i'm not to much annoying.

Pollux

Razor So i wanted just to blur background-color attribute, without blurring text.

If you blur a monochromatic background, what do you expect? Try Photoshop or Gimp, fill your canvas with one color and blur it, you will not see any difference.

And yes, if you apply a blur filter to an element, that element including it's child elements will be be blurred, there is no filter that applies only to the background. So if you have a background, which you want to blur without effecting any children, then there shouldn't be any children. That's what @clarkwinkelmann's and my approach deliver.

I tried your solution, what u posted in post above my, but that do not seem to work either.

Please, do me (and yourself) one favor: Never just say "it doesn't work". If you go to a doctor, do you just state "I feel bad" and let the doctor guess what might be wrong with you, or do you explain your problem a little bit more in detail?

So, what happens, if you apply my CSS? You should now have an apple as your new background and it should be blurred. If it looks different, maybe you should show us, how it looks like.

This is how it looks right now: https://etforum.freeflarum.com/

I have one more idea: Do you hope to achieve a blurring effect to the starfield background (<body> element)? And do you want that blur being restricted to your overlaying element (the <header class="Hero"> or <div id="content"> element), as if the .Hero or #content element caused the blur to the body?