Logo custom CSS

[radokristof]

Dear Community!

I have used this command to set a custom css file:

lnms config:set webui.custom_css.+ css/custom/styles.css

Unfortunately it did not work out. Now every time when I log in, I get redirected to https://librenms/css/custom/styles.css

How can I remove this property? Why I get redirected?

I just wanted to change some CSS for the logo, but it looks like that did not work also, CSS attributes are the same.

Thank you!

[laf]

lnms config:set webui.custom_css

[radokristof]

Thank you very much, this fixed the issue

[murrant]

I just added a custom CSS to tweak my logo recently and it worked great. I wonder why you had an issue.

[radokristof]

I have to change the “max-width” property of the icon, otherwise it is distorted.

Found the CSS class setting the “max-width” property:

.tw\:max-w-\[170px\] {
    max-width: 170px;
}

I have tried overriding this with:

.tw:h-full .tw:max-w-[170px] {
max-width: none
}

But it did not have any effect.

[murrant]

The location where the image is shown has a maximum width of 170px (dictated by stuff outside the image.

If I were you, I would set width directly since you know the size of your logo (and it should be 170px or less.

Trying to modify any class that starts with .tw either will not work or will have unexpected results. navbar-brand is the correct css class to anchor to.

This is my custom css (I also reduce the padding because my image has some)

.navbar-brand {
  width: 90px;
  padding: 4px 8px 4px 8px !important
}

.navbar-brand>svg {
  width: 85px;
}

inside the SVG, I have elements that I want to swap between white (dark mode) and gray (light mode) filled like this: fill="currentColor"

[radokristof]

Thank you
With this help I was able to configure the needed css parameters for the logo to appear correctly.