How to - small custom css adjustments

For Developers
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.