Dashboard repository: https://github.com/fdarveau/flame
About Flame: Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.
This is a guide on how to create your own custom CSS for Flame. Although there is a guide from the creator (https://github.com/pawelmalak/flame/wiki/Custom-CSS), it does not go into depth very much.
I suggest opening the dashboard three times:
- First tab: open the dashboard and then go to Settings/ CSS. Here we will save the styling.
- Second tab: open developer tools by pressing F12. With this we will find out how the classes/ elemnts are called, which we'd like to change.
- Third tab: this will be your review page, where you will review the changes made after saving them in the settings.
With this in mind, let's start!
Open the page with the developer tools and go to the "Inspector" tab. Here you see all the classes you will be able to edit, however, you will first have to find them, which is not too hard.
You can expand and collaps the classes with the arrows. By hovering over them, you will see a "live selection" on the website in form of a highlited color:
With this in mind, let's find out on how to manually edit the Application headline. So, let's first expand all classes until we get to the application headline class. As we can see, the class is called ".SectionHeadline_SectionHeadline__2gmr_".
Now, that we found the correct class, we can edit many things. For this, you will find the actual styling just right of the HTML section:
The easiest way to actually see your changes is to edit the values right in this window. Let's say we are not happy with the text color and size. We can easily adjust this by changing the following values:
In case you like the changes, copy the class name with its values into the Settings/ CSS of Flame and remove the values you didn't adjust (in this case text-transformation, font-weight and margin-bottom).
Also add !important next to each value in order to override the standard style:
Now click on save and refresh your dashboard!
And there you go, you made your first change to your own personal dashboard!
If you changes don't appear, make sure to empty your cache: https://github.com/pawelmalak/flame/wiki/Custom-CSS