{"id":31,"date":"2007-06-11T14:48:21","date_gmt":"2007-06-11T09:18:21","guid":{"rendered":"http:\/\/www.bin-co.com\/blog\/2007\/06\/css-templating-system\/"},"modified":"2007-06-11T14:48:21","modified_gmt":"2007-06-11T09:18:21","slug":"css-templating-system","status":"publish","type":"post","link":"https:\/\/www.bin-co.com\/blog\/2007\/06\/css-templating-system\/","title":{"rendered":"CSS Templating System"},"content":{"rendered":"<p class=\"intro\">In <a href=\"http:\/\/nexty.sourceforge.net\/\">Nexty<\/a> I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.<\/p>\n<p><img src='http:\/\/www.bin-co.com\/blog\/wp-content\/uploads\/2007\/06\/icons1.png' alt='CSS Templating for Icons' \/><\/p>\n<p>Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.<\/p>\n<h2>(X)HTML Code<\/h2>\n<p>If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.<\/p>\n<p>Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet&#8230;<\/p>\n<pre><code class=\"css\">&lt;link href=\"<a href=\"http:\/\/www.bin-co.com\/php\/programs\/apps\/nexty\/demo\/css\/style.css\">css\/style.css<\/a>\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;\n&lt;link href=\"<a href=\"http:\/\/www.bin-co.com\/php\/programs\/apps\/nexty\/demo\/images\/themes\/crystal\/theme.css\">images\/themes\/crystal\/theme.css<\/a>\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;\n&lt;!--[if IE]&gt;\n&lt;link rel=\"stylesheet\" href=\"css\/style_ie.css\" type=\"text\/css\" media=\"all\" \/&gt;\n&lt;![endif]--&gt;<\/code><\/pre>\n<h2>PHP Code<\/h2>\n<p>Very little PHP is involved to creating this system &#8211; I depend on it just to change the path of the CSS Stylesheet. The code used is&#8230;<\/p>\n<pre><code class=\"php\">&lt;link href=\"images\/themes\/&lt;?=$theme?&gt;\/theme.css\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;<\/code><\/pre>\n<p>The <code>$theme<\/code> variable will change if the user changes the theme.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I <a class=\"mh-excerpt-more\" href=\"https:\/\/www.bin-co.com\/blog\/2007\/06\/css-templating-system\/\" title=\"CSS Templating System\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,9,27,29,30],"tags":[87,144,194,276,279],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-xhtml","category-css","category-sites","category-web20","category-web-development","tag-css","tag-iis","tag-nexty","tag-template","tag-theme"],"_links":{"self":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":0,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}