Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
HowTo: Create Themes
We assume you want to call your new theme
mytheme. Make sure you replace this by your module name everytime this is mentionend in this Howto.
Creating the structure
At first create a new theme directory
Makefile inside your theme directory with the following content:
include $(TOPDIR)/rules.mk LUCI_TITLE:=Title of mytheme include ../../luci.mk # call BuildPackage - OpenWrt buildroot signature
Create the following directory structure inside your theme directory.
Create two LuCI HTML-Templates named
header.htm will be included at the beginning of each rendered page and the
footer.htm at the end.
header.htm will probably contain a DOCTYPE description, headers, the menu and layout of the page and the
footer.htm will close all remaining open tags and may add a footer bar but hey that's your choice you are the designer ;-).
Just make sure your
header.htm begins with the following lines:
<% require("luci.http").prepare_content("text/html") -%>
This makes sure your content will be sent to the client with the right content type. Of course you can adapt
text/html to your needs.
You should refer to this directory in your header and footer templates as:
<%=media%>. That means for a stylesheet
htdocs/luci-static/mytheme/cascade.css you would write:
<link rel="stylesheet" type="text/css" href="<%=media%>/cascade.css" />
Making the theme selectable
If you are done with your work there are two last steps to do.
To make your theme OpenWrt-capable and selectable on the settings page you should now create a file
root/etc/uci-defaults/luci-theme-mytheme with the following contents:
#!/bin/sh uci batch <<-EOF set luci.themes.MyTheme=/luci-static/mytheme commit luci EOF exit 0
That's all. Now send your theme to the LuCI developers to get it into the development repository - if you like.