summaryrefslogtreecommitdiffhomepage
path: root/documentation/ThemesHowTo.md
diff options
context:
space:
mode:
Diffstat (limited to 'documentation/ThemesHowTo.md')
-rw-r--r--documentation/ThemesHowTo.md76
1 files changed, 76 insertions, 0 deletions
diff --git a/documentation/ThemesHowTo.md b/documentation/ThemesHowTo.md
new file mode 100644
index 0000000000..32154c724c
--- /dev/null
+++ b/documentation/ThemesHowTo.md
@@ -0,0 +1,76 @@
+# HowTo: Create Themes
+*Note:* You should read the [Module Reference](Modules.md) and the [Template Reference](Templates.md) 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/_mytheme_*.
+
+Create a _Makefile_ inside your theme directory with the following content:
+
+ include ../../build/config.mk
+ include ../../build/module.mk
+
+
+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:
+
+ <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
+
+
+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.