How to - small custom css adjustments

For Developers
1

Greetings,

Re: https://github.com/openwrt/luci/blob/master/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm#L33-L35

I spend no less than 2 hours trying to piece things together, and gave up...

(1) Where and how would I define that css variable above?
(2) Is there already code that tries to set it? How would I find that code?

Context. I am perfectly happy with the default Bootstrap theme. But I thought to explore if there was an option for small custom css adjustments. There's nothing exposed on the UI. So I started looking at the code. I was hoping that perhaps if I were to write a css file somewhere, it will get picked up. That code above looks like it will do just that - emit a style if the css variable is defined. This is where I got stuck.

I have a number of devices running OpenWRT. All on Bootstrap. The other day I default-reset the one I shouldn't have. Now I am thinking I want to change the menu header (header .fill) that would loudly scream "I am your live router.". Obviously the name doesn't do it for me. Using different themes is an option, but... I like Bootstrap.

Searching for code on github is sub-optimal. Is there some Lua IDE that provides "find-all-references", and "go-to-definition" types of functionality?

Cheers!
tjk :slight_smile:

2

If you're talking about updating files on the router:

SG-105 in ~ # find / -name "*.css"
/www/luci-static/bootstrap/cascade.css
/www/luci-static/bootstrap/mobile.css
/www/luci-static/openwrt.org/cascade.css
/www/luci-static/openwrt2020/cascade.css
3

@stangri,

No, I am not... I do not want to update those files, or any that come with the distro.

As a first step I'd like to find where is that css variable defined. And if not defined, then where is the right place for me to define it?

The ideal outcome is that LuCI already has something like this:

if fileExists(some/defined/path/myCustom.css) then
  css = read myCustom.css
end

Then all I have to do is drop myCustom.css file at the right location, and - wham I get a new header color.

tjk :slight_smile:

4

There is no such facility. The css variable must be set prior to including the header template so it is only available to custom server side template views.

Edit:
One possible solution is placing a custom preload JavaScript class which is automatically loaded by LuCI. This class can then add a link element referring to a custom CSS file.

Place the following file in /www/luci-static/resources/preload/custom_css_loader.js (filename does not matter but should not contain dashes, preload directory might need to be created first):

'use strict';
'require baseclass';

return baseclass.extend({
    __init__: function() {
        document.querySelector('head').appendChild(E('link', {
            rel: 'stylesheet',
            href: L.resource('custom_style.css')
        }));
    }
});

Once this class is loaded and working, you should see a <link rel="stylesheet" href="/luci-static/resources/custom_style.css"> element in <head> (confirm using browser debug console).

You might need to clear your browser's session storage or logout/login or close/reopen the current tab for the preload class to get picked up since the list of classes is cached in session storage to avoid enumerating them on each request.

At this point you can place a file /www/luci-static/resources/custom_style.css with arbitrary rules.

5

Last night I did some searching and found a couple of LuCI apps which define the css variable.

Then I tried what I didn't want to, and what @stangri mentioned:

sed "1i @import 'custom.css';\n" cascade.css.original > cascade.css

Worked just fine, with minimum change to cascade.css, and I have a separate custom.css to muck with. But it's janky...

Your solution is exactly what I was after. I tested it, and it works great. I do appreciate the time you put into this. Thank you for highlighting this preload facility - I could not find any mention of it in the documentation I read.

I'd say this code snippet is worth integrating into the main code line.

Cheers!
tjk :slight_smile:

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.