Custom CSS Flame Dashboard

by Danny
1 comment

READING TIME: 3 MINUTES

In this guide, I’ll show you how to customize your Flame Dashboard by using CSS tweaks. This will allow you to change font sizes, hover colors, number of rows, custom background images, and much more.

If you haven’t set up your Flame dashboard yet, follow my How To Install Flame Dashboard in Docker guide. You can also reference the creators CSS Wiki, but I’m adding even more customization options to this guide.

Let’s get started!


Navigate To Flame Custom CSS Settings

Log into your Flame dashboard and click the gear in the bottom right corner. Then, click the CSS tab. This is where you’ll be pasting all the custom CSS.

Important: After adding custom CSS and saving, go back to homepage and press CTRL+F5 to clear the cache. Otherwise, it will appear as though no changes were made.


Change Hover Color

.AppCard_AppCard__1V2_0:hover {
    background: rgba(12,120,41,1) !important;
}

Whenever you hover over and item in the Applications section, the hover color will default to dark grey like this:

If you’d like to change it, paste the code above in the CSS page. Google search “RGB color picker” and replace the RGB hex numbers in the CSS below. It will now look like this:


Change Font Size of “Application” Description

I think the default is 8px. I use 12px myself, but just for an exaggerated example I changed mine to 20 for the image below.

.AppCard_AppCardDetails__tbAhY span {
  font-size: 12px !important;
}

Remove URL’s

The code below will remove/supress the URL’s or descriptions from the Applications section.

.AppCard_AppCardDetails__tbAhY {
height: 50%;
}
.AppCard_AppCardDetails__tbAhY span {
display: none !important;
}

Change Number of Columns (Applications)

The code below changes is from the defaulted 4 columns to 5 for Applications section.

.AppGrid_AppGrid__33iLW {
  grid-template-columns: repeat(7, 1fr) !important;
}

Add Custom Background Image

To add a custom background, google “wallpapers” or something similar. I used pixabay.com but any site should do. I will note that I wasn’t able to get image URL’s that end in .html to work, so I’m assuming you’re URL should be a .jpg, .png, etc.

Whenever you find a background you like, right-click it > Open Image in New Tab. Then, copy the URL to clipboard and replace it with my URL below.

body {

background: url(https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105_960_720.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Wrapping Up

That’s all the customizing I’ve done so far, but if I come across anything else, I’ll be sure to update this guide.

If any else has examples of custom CSS, please leave them in a pastebin link in the comments below so I can update my guide with them!

1 comment

You may also like

1 comment

Viking January 13, 2022 - 2:01 am

Very nice post. Thanks 🙂

Reply

Leave a Comment