WebUi Style CSS DARK theme

Help
1

I’m using everyday LibreNms (great and simple) but white theme is killing my eyes.

I’ve tried to create a dark theme for librenms (CSS) but i’m stuck with “onmouseover” windows which are setting a white windows ! is it possible to bypass this settings ? at this time i’ve disabled the “onmouseover”.

Otherwise here is my styles.css file : https://github.nailis.fr/ckbox/dark-theme-librenms/tree/master/html/css/custom

just in case if it’s could be intersting for someone. I’m not a dev just a simple user don’t shooting me :slight_smile:

thanks
(updated - 2.3) (add setting config.php for vlan BG)

3 Likes
2

Hello,

Yes you can disable the mouse over.

Check the webui configuration section.

https://docs.librenms.org/Support/Configuration/

I missed read your post sorry. I see you are want to change the mouse over window to the css theme.

3

thanks for your help Kevin, but as you said, i just want to change the “onmuseover” background and if it’s possible, without modify the JS. May be it could be done with a custom php script ? like CSS or images ?

4

It’s probably this, but i can’t test, place in your config.php

$config['overlib_defaults'] = ",FGCOLOR,'#000000', BGCOLOR, '#e5e5e5', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#3e3e3e'";

and play with the colors, any luck?

You might also want to check this out Graph legend text color

5

Hi chat,

thanks for your help, but it doesn’t works

exemple_bg_onmouseover
exemple_bg_onmouseover1662×1052 200 KB

so that’s why i’ve set $config[‘web_mouseover’] @ false

6

Try this in your custom css file

.overlib {
    background-color: #000000;
}
7

Hello,

Unfortunately, it doesn’t works. because the a href link is hardcoded and there is no css"s class.

But thanks for the leads

another leads

But not inside CSS File :frowning:

8

Submit a PR to add classes.

9

hi murrant,

thanks for your suggestion, i will, after best result in local.
A leads :

in the file : ./LibreNMS/Util/Url.php line 255
replace
$contents = "<div style=\'background-color: #FFFFFF;\'>" . $contents . '</div>';
by
$contents = "<div class=\'lib_overlib\'>" . $contents . '</div>';

After that it’s easy to add class in custom css file
At this time i’m fighting with white border of overlib :frowning:

Result :

theresult
theresult1550×818 179 KB

my custom css class (in progress)
/* OVERLIB BG*/
.lib_overlib {
background: inherit;
background-color: #333;
color:cyan;
padding: 0;
margin: 0;
}

10

finaly

17
171608×846 185 KB

the border of overlib is not depending of css class but
it depends of ID seletor #overlib

From original CSS it’s :

#overDiv {
    z-index: 1200 !important;
    border: solid 1px #ccc;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

i’ve changed this in my custom css :slight_smile:
PR for php file to modify Add overlib link css class for changing background color - Update Url.php by ckforum · Pull Request #10300 · librenms/librenms · GitHub
and std css file Add class for overlib background by ckforum · Pull Request #10302 · librenms/librenms · GitHub
thanks of all

3 Likes
11

I tried out your custom css for the dark theme. I’m liking it!! :slight_smile:

08%20PM
08%20PM1848×926 450 KB

2 Likes
12

Hi kevin, (i like your dashboard)

Excellent !
and there is some BG colors hard coded in
/includes/html/pages/device/ports.inc.php for mini graph (div + overlib) (I will PR after the local test)
the css is not finished and that’s why I leave the link at the top of the post on the GIT it is updated each time I make some changes … after it will be necessary that I clean up a little bit (remain useless classes).

I currently have a PR in progress change <h2></h1> ? by span and class like the other by ckforum · Pull Request #10305 · librenms/librenms · GitHub, I do not know if it is necessary to go through the forum to have it reviewed ?

But it’s motivating, thank you for testing

1 Like
13

Add 2 PR for adding class to includes/html/pages/device/ports.inc.php and in styles.css std
for resolving background of image and overlib link with white windows.
see Modifications mini graph style Update device/ports.inc.php by ckforum · Pull Request #10313 · librenms/librenms · GitHub
see Add div class for mini graph Update styles.css by ckforum · Pull Request #10314 · librenms/librenms · GitHub
custom css Updated (sorry without modifications of includes/html/pages/device/ports.inc.php the new class doen’t work)
Sorry i don’t know how to merge these PR :face_with_raised_eyebrow:

11
111550×1086 113 KB

14

You cant :slight_smile: they have to be reviewed and than merged.

15

add add class / css to graph.inc.php Update graph.inc.php correct hardcoded bg color by ckforum · Pull Request #10315 · librenms/librenms · GitHub
for changing bg color of common graph port
file includes/html/pages/ports/graph.inc.php
Pr must be validate before…

42
422146×1020 441 KB

16

Last changes PR : https://github.com/librenms/librenms/pull/10318

17

Hi all,

I’m stuck with some bg color of image (bill section)
like

48
48868×966 45.2 KB

…bill/bill_id=1/view=transfer/
…bill/bill_id=1/view=accurate/
…bill/bill_id=1/view=history/

ETC…

i’m trying to find the code (ack -i etc…) but no result
could you help me to find of which files depends these pictures ?

Maybe a simple setting in the config.php could works ?

Thanks

18

I look forward to this being a simple menu option to turn the dark theme on or off!! :smiley:

4 Likes
19

Hello

Has this been merged if so where does one enable it.

Looks good.

Cheers

20

He hasn’t submitted the custom css code. You look at the post he posted a link where you copy it and try it out.

Also Donovan is really simple to go and look in github and see any thing that has been merged.