LuCI is the main web configuration interface for OpenWrt. It is an easy way to edit the device’s configuration files. However, the web interface looks horribly outdated. It’s time for a fresh and professional-looking theme: Bootstrap.
The current state of LuCI themes
A default installation of LuCI on OpenWrt installs the OpenWrt theme. The navigation happens using a layered tab menu at the top. It works very nicely but the choice of type, colors and borders gives it a very Windows 95-like feel:
Another theme that comes with the default installation (although luckily not always) is the Freifunk theme. Its color scheme hurts the eyes. The red warning message at the top even blinks!
Needless to say it is time for something different: a theme that is more serious, looks better and doesn’t detract from what you are trying to do (which is configuring an embedded device).
Frameworks, boilerplates and bootstraps
Making Bootstrap for LuCI
Theme files in LuCI consist of a header.htm, footer.htm and as few or many scripts, images and stylesheets you want to include. The header and footer files are actually template files for the Lua scripting language. This means you can use variables and loops for instance to create menus or generate titles.
While it gives full control over the header and footer of the page, the body HTML is generated by LuCI’s modules. Unfortunately the source is often filled with inline styles and elements are reused in strange ways (a button with class ‘cbi-input-reset’ for disabling something). The Bootstrap theme tries to work around these idiosyncrasies for the default modules.
Because the devices on which OpenWrt is meant to run often have limited storage capacity, it is important to have a small file size. Bootstrap uses no images (apart from the favicon.ico), minified CSS and only a subset of the elements provided by the original Twitter Bootstrap, making it a reasonable 41kB in total.
Get Bootstrap for LuCI
I will be submitting Bootstrap to the LuCI developers and putting the sources online after testing. On your OpenWrt-device you can test-drive the Bootstrap theme by ssh-ing to the device and typing the following:
opkg install luci-theme-bootstrap_1-1_all.ipk
This should give you an option ‘Bootstrap’ in the System/System -> Language and Style page.