Revert afe38364126e7636879b8b943726c144b8c8013b...e978faf65c14aa62116b8bc13945705a8ab3d3bb on ThemesHowTo

ThemesHowTo.md

@@ -1 +1,76 @@
-# hello[example](www.baidu.com)![baidu](www.baidu.com)
+# HowTo: Create Themes
+**Note:** You should read the [Module Reference](Modules) and the [Template Reference](Templates) before.
+
+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 `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 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.
+
+
+Put any stylesheets, Javascripts, images, ... into `htdocs/luci-static/mytheme`.
+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:
+```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 you should now 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:
+	
+	#!/bin/sh
+	[ -n "${IPKG_INSTROOT}" ] || {
+	        ( . /etc/uci-defaults/luci-theme-mytheme ) &&        rm -f /etc/uci-defaults/luci-theme-mytheme
+	}
+	
+
+This is some OpenWrt magic to correctly register 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.