I would like to learn more flarum css

Tobi

How to change background color for top header, without using admin highlighting colors

masihdindar

Hi,
You can use your custom CSS code for Front-End. Go to Admin panel > Appearance > Custom Styles, and click on "Edit Custom CSS", and in the opened box you can enter your custom CSS codes that you want to apply on your forum.
For header on mobile version, you can use these codes to change colors:

@media (max-width: 767.98px) {
/* Main background color for header: */
.App-navigation {background: #41739b !important;}

/* change color for buttons and text in header: */
.App-navigation .App-primaryControl>.Button, .App-navigation .App-backControl>.Button {color: #ffffff !important;}
.App-navigation .ButtonGroup>.Button {color: #ffffff !important;}
}

Tobi

masihdindar very helpful, thanks but there's a problem with last code

.App-navigation .ButtonGroup>.Button {color: #ffffff !important;}
}

Removing } Solve it

But now some header buttons on right side are gone

Solved it by using this trick: https://discuss.flarum.org/d/2360-custom-css-bar-buttons/5

masihdindar

Tobi Removing } Solve it

You shouldn't remove that. it's part of @media code.
Just copy and paste my code on your "Custom CSS" and edit or add your custom codes inside of @media for applying on mobile.
You can do many tricks with CSS codes like this you mentioned. Searching in google will help you.

Tobi

masihdindar
Great! The thing is am trying to use very little css. I re-created it and ended up with this code:
You may look at it, maybe use later.

.App-navigation {background: #808080 !important;}
@header-control-color: #b3b3b3;

That one solved.

Next thing, how to create a background color for Welcome Hero subtitle "only" ?

Something like this

masihdindar

Tobi Next thing, how to create a background color for Welcome Hero subtitle "only" ?

Ok i just made a similar welcome hero:

And here the CSS codes:
As you know, for Background you have to use background in css, So:

.IndexPage .WelcomeHero {background-image: url(https://example.com/img.jpg); background-position: center;}

Then for title, you have to use gradient background. use this code:

.IndexPage .WelcomeHero .containerNarrow h2.Hero-title {
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(1,0,21,1) 59%, rgba(0,0,0,0) 100%);
    max-width: max-content;
    margin: 0 auto;
    padding: 5px 20px;
}

Tobi

masihdindar there's no welcome hero subtitle element? Anyway that idea passed, i am using a mobile. And with your guide, i came up with this

How does it look?

Today i would like to background color side menu on mobile

masihdindar

Tobi How does it look?

That's good enough 👍️

Tobi Today i would like to background color side menu on mobile

You can do it again with CSS. use these codes inside the @media that i gave you before.

.drawerOpen .App-drawer {background: #d5ffab;}
.drawerOpen .App-drawer a {color: #000;}

then you have drawer like this:

Change colors as you want!

Tobi

masihdindar you know flarum is using lazy load on images so when welcomeHero background image is too big in size, the page loads first the WelcomeHero default bg color which for me its grey.

I would like to have both a blue color bg, then the bg image to load later. But using background-color: seem to not be working. Try to check

masihdindar

Tobi But using background-color: seem to not be working. Try to check

Try using background-color with !important just like this:

.IndexPage .WelcomeHero {background-color: #7fffd4 !important;}

I just used this on my forum and it's working.

Tobi

masihdindar Hi
My tags descriptions have got long sentences and when i visit Tags and try to scroll, the description too is scrolled and so the page cannot move up.

I would like to disable the scroll using css, also today i would like to learn how to add background image on each tag. Thanks