# HowTo: Create Themes **Note:** You have already read the [Module Reference](./Modules.md) and the [Template Reference](./Templates.md). We assume you want to call your new theme `mytheme`. Replace `mytheme` with your module name every time this is mentioned in this Howto. ## Creating the structure At first create a new theme directory `themes/luci-theme-mytheme`. Create a `Makefile` inside your theme directory with the following content: ```Makefile 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. * ipkg * htdocs * luci-static * `mytheme` * luasrc * view * themes * `mytheme` * root * etc * uci-defaults ## Designing Create two LuCI HTML-Templates named `header.htm` and `footer.htm` under `luasrc/view/themes/mytheme`. The `header.htm` will be included at the beginning of each rendered page and the `footer.htm` at the end. So your `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 ensures your content is sent to the client with the right content type. Of course you can adapt `text/html` to your needs. Put any stylesheets, Javascripts, images, ... into `htdocs/luci-static/mytheme`. 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: ```html <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, create a file `root/etc/uci-defaults/luci-theme-mytheme` with the following contents: ```sh #!/bin/sh uci batch <<-EOF set luci.themes.MyTheme=/luci-static/mytheme commit luci EOF exit 0 ``` and another file `ipkg/postinst` with the following content: ```sh #!/bin/sh [ -n "${IPKG_INSTROOT}" ] || { ( . /etc/uci-defaults/luci-theme-mytheme ) && rm -f /etc/uci-defaults/luci-theme-mytheme } ``` This correctly registers the template with LuCI when it gets installed. That's all. Now send your theme to the LuCI developers to get it into the development repository - if you like.