CSS Issues | Header Colors | Mobile Tab Colors | Day/Night Mode Colors

BrodyStone21

I’m really just completely unfamiliar with CSS. Always been a Wordpress + Elementor guy myself, and this is the first time I’ve really ever had to use CSS extensively. I don’t understand how CSS works really. When you’re editing stuff, are you editing a “class” that Flarum already has defined? Where can you find these classes if so?

Basically, I’m looking to accomplish a few things and would really appreciate it if someone would be willing to share the code syntax I require to accomplish this.

I want my header font color to be different, how can I manually set this?
I want my mobile tab extension footer to be independent of my header, and I want to set a custom font color.
I want to edit the above 2 things based upon whether my website is set to day or night theme.
I want to separate the header color and the color theming of not being under any specific tag. Example, I want my header to be red, but I want my “Start Discussion” button on the tag overview page to be yellow.
I want to reduce spacing between child tags on tag page. I tried word-spacing, but that wasn’t it.

If you guys need any additional information, let me know. I’m very close to being done with my forum.

EDIT: I’m also trying to prevent scrolling. Here is what I tried. Someone let me know how close I am.

.TagTile {
    overflow: hidden;
}

And here is ALL of my CSS.

.Hero-close { /* hide close button for welcome banner */
	float: right;
	margin-top: -10px;
	color: inherit;
	opacity: 0.5;
	display: none !important;
}

.TagTile-description {
    font-size: 14px !important;
    opacity: 100% !important;
}

.TagTile-info { /* offset main tag */
  padding-right: 60px;
  font-size: 1px;
}

.TagTile-description { /* offset tag description */
  padding-right: 60px;
}
.TagTile-children { /* offset child tags */
  padding-right: 60px;
  font-size: 13px !important;
  opacity: 100% !important;
}

.TagTile.colored:nth-child(1) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-879221-grouping.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(2) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-892626-online-advertising.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(3) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723827399-77236-factory.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(4) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822903-788729-design.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(5) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-912762-concrete-mixer.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(6) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-850219-workers.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(7) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-927158-garage.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(8) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-942256-relaxation.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

.TagTile.colored:nth-child(9) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-955771-buy.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 25%;
      background-attachment: scroll;
      background-color: #444444;
}

I would very much like to learn how to understand what the container or class or whatever it’s called is coming from. If I can figure that out, I think I can handle this on my own.

User31

BrodyStone21

I'd also be quite keen to take a look at a full list of all the possible CSS codes too, particularly one including descriptions.

Closest I've found are what's scattered in the extensions documents @Git.

Now, regarding the theme customizations. Probably need to be more specific, simply because there's at least 3 different headers and likely even more too.
Nevertheless you might find some of what you need @Asylum
Eg: various header font color CSS/LESS codes, customizable [Start a Discussion] button, remove side nav slider panel, etc...
Most are codes I've gathered from all around here. Some are updated via AI refactoring.
I certainly can't guarantee the quality of any of them but they did all work for me.

BrodyStone21

User31 I'd also be quite keen to take a look at a full list of all the possible CSS codes too, particularly one including descriptions.

Someonejust let me know that you can inspect the code on desktop and see what the containers are called. Super helpful for me.

Capybara

BrodyStone21 For interest sake, what's stopping you? Just press F12 and click on something on the screen, the code will tell you the name of the item

User31

BrodyStone21

Yeah I did try this avenue last week with a website inspection application.
Unfortunately, in my case, it proved entirely inadequate and also doesn't provide a full list of all Flarum™ components(or whatever they're called).

Nearest I've been able to track down are the list of CSS Properties found @W3 Schools website.

BrodyStone21

Capybara I might be able to do #4 myself, but that still leaves #1, 2, 3, 5, and the overflow problem I mentioned in my edit. I’ve already tried doing these things myself. .TagTile, .TagTile-children, .TagTile-info, and .TagTile-description doesn’t work with the overflow issue.

I’m also trying to change the “Notifications” text on mobile but can’t get it figured out either. From what I can gather by inspecting the Notifications section on mobile, it’s getting its color from the site’s font color attribute. Idk if that’s true or not, but it’s what it looks like to me.