Skip to content

Short guide on how to make custom CSS adjustemnts in the Flame dashboard.

Notifications You must be signed in to change notification settings

DevGoran/Flame-Custom-CSS-Guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 

Repository files navigation

Introduction

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.

image

 

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!

 

Find the class with Developer Tools

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.

image

 

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:

image

 

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_".

image

 

Edit the Look

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:

Screenshot 2022-12-13 191551

 

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:

Screenshot 2022-12-13 191818

 

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).

image

 

Also add !important next to each value in order to override the standard style:

image

Now click on save and refresh your dashboard!

And there you go, you made your first change to your own personal dashboard!

 

Caching

If you changes don't appear, make sure to empty your cache: https://github.com/pawelmalak/flame/wiki/Custom-CSS

About

Short guide on how to make custom CSS adjustemnts in the Flame dashboard.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published