The color of normal Grafana kanban is very dull, and it can get tiring over time. For those who love new things, it can be a little too much, so I searched the Internet for some ways to make my Grafana kanban more cool

Let’s do another GIF

The first image looks much darker, hahaha. Here’s how to do it.

Grafana installs the plug-inyesoreyeram-boomtheme-panel

Because my grafana did not use K8S for installation, I directly used Docker, so I directly entered docker for installation

# docker ps
CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                    NAMES
cef753a202d5        grafana/grafana          "/run.sh"3 months ago Up 2 hours 0.0.0.0:3000->3000/ TCP grafana-serverCopy the code

Find the CONTAINER ID and enter the CONTAINER

# Enter container
docker exec -it cef75 bash
Install plugins
grafana-cli plugins install yesoreyeram-boomtheme-panel
Copy the code

After the installation is complete, restart the container

docker container restart cef753a202d5
Copy the code

And then we have this plug-in on grafana

Installation is simple, nothing to say

Configuration grafana

In fact, the whole process is like this. We first create a dashboard, and then create a new panel in the dashboard. When creating the panel, select the newly installed plug-in Boom Theme, and then configure the plug-in. Click Save to save the entire dashboard and it will change. Then we will copy this panel to any other dashboard and the other dashboard themes will change accordingly.

In short: watch the action below

Create a dashboard and add panels

chooseBoom ThemeAnd configure it

Click Add new theme

Here we see add a background image, and add some CSS styles, the article put up some pictures in the beginning, if I understand, have a beautiful background, have a GIF dynamic figure, there are also similar to the flame, is set up here, then you may ask, and the background picture I know where I can get, but those CSS styles where I get?

Add an external CSS address

Address bar enter: https://github.com/gilbN/theme.park/tree/master/CSS/themes/grafana and then you’ll see there are several types of CSS, the corresponding is the style of the different color, can all configuration, to see what effect

I have all sorted out here, directly configure to my address here can be

https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/aquamarine.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dark.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dashboard.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/plex.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/space-gray.css
Copy the code

As shown in the figure:

Then click Apply, and you’ll see the entire dashboard change

This means that as soon as the plugin is applied, the entire dashboard changes, specifically the added panel

Apply to othersdashboard

Although the theme has changed, other dashboards need to be cool, so I copied this panel to other dashboards, and I’ll use one of them here



copy

And then it changed. It’s kind of easy.

It’s easy, but you think that’s it? It’s not perfect. It’s a little slow every time it loads. The reason is that I went to Github to get this CSS, so it’s a little slow

Optimize the CSS loading speed

Optimization is nothing more than to put this CSS into the domestic, into the domestic original manufacturer’s object storage, or completely, directly into the local, I have tried here, can! Now, how do I put this CSS locally

Download the CSS and configure Grafana

Go to the docker to create a directory for storing CSS

docker exec -it --user root cef75 bash
Copy the code

Note: add –user root here, because if you do not add this to the container, the permission to create the directory will be denied, so you need to add it. If the container is deployed on a virtual machine, you can create it directly

Enter this directory
cd /usr/share/grafana/public
Create a directory
mkdir css
# the CSS
wget https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
Copy the code

So that’s it, and then I’m going to configure grafana, which is essentially a local address

/public/ CSS/complaint.css

And then the speed goes up, almost as soon as you turn it on.