WebUi Style CSS DARK theme


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


#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


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 :

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


#10

finaly

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 https://github.com/librenms/librenms/pull/10300
and std css file https://github.com/librenms/librenms/pull/10302
thanks of all


#11

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


#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 https://github.com/librenms/librenms/pull/10305, 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


#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 https://github.com/librenms/librenms/pull/10313
see https://github.com/librenms/librenms/pull/10314
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:


#14

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


#15

add https://github.com/librenms/librenms/pull/10315
for changing bg color of common graph port
file includes/html/pages/ports/graph.inc.php
Pr must be validate before…


#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

…bill/bill_id=1/view=transfer/
…bill/bill_id=1/view=accurate/ (in case the images in this section do not work in my case - src broken)
…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 definition in the config.php could works ?

Thanks