OpenWrt Bootstrap theme for LuCI

LuCI Bootstrap theme
Bootstrap theme for the LuCI web configuration interface

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.

Get it here
Get the sources from GitHub

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:

LuCI OpenWrt theme
The OpenWrt default theme fits perfectly with your Windows 95 desktop

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!

LuCI Freifunk
Back to the eighties with Freifunk!

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

Lately I have been a very big fan of using HTML toolkits for starting HTML development. These frameworks consists of some HTML files, basic CSS files and maybe some JavaScript. They define things like basic typography, good-looking form elements and in some cases server optimizations and layout options. Twitter Bootstrap served as the basis for the Bootstrap LuCI theme. It provides default buttons and form controls and a nice dropdown menu bar at the top.

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.

Bootstrap close-up

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:

cd /tmp
wget http://nut-bolt.nl/files/luci-theme-bootstrap_1-1_all.ipk
opkg install luci-theme-bootstrap_1-1_all.ipk

This should give you an option ‘Bootstrap’ in the System/System -> Language and Style page.

41 Responses to “OpenWrt Bootstrap theme for LuCI”

  1. Shane

    Love the look, really nice theme. WIll give me a reason to use open wrt over gargoyle.

  2. mrcreator

    Real nice theme. I’m using it right now. With the Freifunk theme, the dropdown menu will cover the tabs below, but your theme is perfect. The interface, the text, all is good for me. Thanks!

  3. loomes

    Im new @openwrt and the Standard Theme has a very old Look. Then i found your theme with google. Very good work :)

  4. saso

    Hi,
    I’m trying your template but after applying the bootstrap design I get this message:

    Error in template admin_status/index: Error in template header: Error in template themes/bootstrap/header: [string "/usr/lib/lua/luci/view/themes/bootstrap/hea..."]:19: attempt to call field ‘node_childs’ (a nil value)
    stack traceback:
    [C]: in function ‘?’
    ?: in function
    (tail call): ?
    ?: in function
    ?: in function ‘dispatch’
    ?: in function

    Can you help me to understand what is wrong?
    Thank you

  5. Yosi

    hi!
    thanks for the themes, unfortunately i got these error :

    root@A7HomeServer:/tmp# opkg install luci-theme-bootstrap_1-1_all.ipk
    Installing luci-theme-bootstrap (1-1) to root…
    Configuring luci-theme-bootstrap.
    Collected errors:
    * pkg_get_installed_files: Failed to open //usr/lib/opkg/info/kernel.list: No such file or directory.
    root@A7HomeServer:/tmp#

    any advice? thanks

  6. acous

    @saso: I got that error when i tried on OpenWRT 10.03 (LuCI 0.90), but it works fine after doing a sysupgrade to 10.03.1 (LuCI 0.10).

  7. Martin

    Hi,

    Many thanks for creating such a usable and attractive theme for OpenWRT. What an improvement!

    Regards, Martin.

  8. Cesare

    Many compliments for the best OpenWrt theme. Finally LuCI has a professional appearance. A big thank you from Italy.

  9. Polochamps

    Hi!

    This theme of yours definitely rocks! Better than DDWrt/Tomato theme. Thank you so much!

  10. Squonk

    This is by far the best OpenWRT theme. I just wish it were the default one.

    Gorgeous!

  11. John

    Nice theme, but I wish it were a little more compact.

  12. David

    Thanks! Feel free to grab the sources from GitHub to adjust the layout to your own preferences. It should be a matter of some minor changes in the CSS.

  13. Piotr

    Very nice theme, but looks awful in small window – it would look much nicer if you would add a small margin on the left side – please do! I love this theme!

  14. anonymous

    Thanks. Looks great. Currently running it in AA RC1 build.

  15. Mike

    Love the bootstrap theme! Very click!

    I do agree that it could be a bit more compact and efficient with space for desktop use. Seems a bit backward given that mobile is a small screen, but the larger elements make the touch interface more possible.

  16. moshe

    i have a problem.
    after trying to install the them, i get this message:
    Not downgrading package luci-theme-bootstrap on root from svn-r9841-1 to 1-1.

    is there a way to bypass this?

    thanks!

  17. moshe

    well i found a solution.
    if everyone get into this error, just add to the installation command this:
    –force-downgrade

    so now the command will look like this:
    opkg install –force-downgrade uci-theme-bootstrap_1-1_all
    .ipk

  18. moshe

    the command is broken in my last post, so here it is, hoping now it will be the full command:
    opkg install –force-downgrade luci-theme-bootstrap_1-1_all.ipk

  19. Tomas

    Oh My God!!! Really fantastic! I love you

  20. GreatUnwashed

    Thanks so much very nice theme!!

  21. Mike

    This theme is now included in the openwrt 12.09 and trunk repos and should be downloaded form there.

    The user above that forced a downgrade, did in fact downgrade to an older version. As of April 2013, trunk builds use this theme by default.

    If the author of this theme and blog reads this, I’d suggest updating the blog post and/or having the download link changed.

  22. Mike

    Forgot to mention, just use the standard software installation features of OpenWRT/Luci to get the standard version from the repo. No need to drop to the command line.

  23. David

    Hi Tim,
    Any particular reasons to switch to Bootstrap 3? Please note that this theme is a heavily stripped-down version of Bootstrap which makes switching to a new version cost almost as much effort as starting from scratch.

  24. straitvodka

    Hello, I have been working on a new theme for openwrt which is really just a modification of “openwrt theme”. I started a few month back with no knowledge and now have the following. Its rough programming as it was all completely new to me but it looks nice. Tell me what you think. It also works for mobile devices.

    I noticed if you add the scale to 1 on your bootsrap that apparently then you can use it with mobile devices?

    https://www.youtube.com/watch?v=716QNKbaR00

Leave a Reply