|
1
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
3 |
<head> |
|
|
4 |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> |
|
|
5 |
<title>A Guide To Thematic</title> |
|
|
6 |
<style type="text/css"> |
|
|
7 |
@import url('library/styles/reset.css'); |
|
|
8 |
@import url('library/styles/typography.css'); |
|
|
9 |
body { |
|
|
10 |
color:#333; |
|
|
11 |
font: 14px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; |
|
|
12 |
line-height:21px; |
|
|
13 |
margin:72px auto 53px auto; |
|
|
14 |
width:800px; |
|
|
15 |
} |
|
|
16 |
strong, em { |
|
|
17 |
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; |
|
|
18 |
} |
|
|
19 |
em.thankyou { |
|
|
20 |
font-family:Georgia,serif; |
|
|
21 |
font-size:18px; |
|
|
22 |
margin-bottom:36px; |
|
|
23 |
} |
|
|
24 |
p, ul, ol, dd, pre { |
|
|
25 |
margin-bottom:21px; |
|
|
26 |
} |
|
|
27 |
pre, code { |
|
|
28 |
font:13px Monaco, monospace; |
|
|
29 |
line-height:21px; |
|
|
30 |
} |
|
|
31 |
p.intro, |
|
|
32 |
p.intro em { |
|
|
33 |
color:#111; |
|
|
34 |
font-family:Georgia,serif; |
|
|
35 |
font-size:24px; |
|
|
36 |
line-height:36px; |
|
|
37 |
} |
|
|
38 |
ul { |
|
|
39 |
list-style:square; |
|
|
40 |
margin-right:3em; |
|
|
41 |
} |
|
|
42 |
h1 { |
|
|
43 |
color:#111; |
|
|
44 |
font-family:Georgia,serif; |
|
|
45 |
font-size:36px; |
|
|
46 |
line-height:36px; |
|
|
47 |
margin-bottom:24px; |
|
|
48 |
} |
|
|
49 |
h2,h3,h4 { |
|
|
50 |
color:#111; |
|
|
51 |
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; |
|
|
52 |
font-weight:bold; |
|
|
53 |
} |
|
|
54 |
h2 { |
|
|
55 |
font-family:Georgia,serif; |
|
|
56 |
font-size:18px; |
|
|
57 |
letter-spacing:2px; |
|
|
58 |
margin-bottom:21px; |
|
|
59 |
padding-top:21px; |
|
|
60 |
text-transform:uppercase; |
|
|
61 |
} |
|
|
62 |
h3 { |
|
|
63 |
color:#333; |
|
|
64 |
font-family:Georgia,serif; |
|
|
65 |
font-size:18px; |
|
|
66 |
font-style:italic; |
|
|
67 |
font-weight:normal; |
|
|
68 |
margin-bottom:21px; |
|
|
69 |
} |
|
|
70 |
li { |
|
|
71 |
color:#111; |
|
|
72 |
} |
|
|
73 |
li h3 { |
|
|
74 |
color:#111; |
|
|
75 |
font-size:14px; |
|
|
76 |
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; |
|
|
77 |
font-style:normal; |
|
|
78 |
font-weight:bold; |
|
|
79 |
margin:0; |
|
|
80 |
} |
|
|
81 |
li p { |
|
|
82 |
color:#333; |
|
|
83 |
} |
|
|
84 |
.content-column { |
|
|
85 |
float:left; |
|
|
86 |
margin:0 3em 0 0; |
|
|
87 |
} |
|
|
88 |
iframe { |
|
|
89 |
border:1px solid #ccc; |
|
|
90 |
border-top-color:#aaa; |
|
|
91 |
margin-bottom:21px; |
|
|
92 |
} |
|
|
93 |
#ts-forums { |
|
|
94 |
height: 300px; |
|
|
95 |
margin-top: 10px; |
|
|
96 |
width: 100%; |
|
|
97 |
} |
|
|
98 |
</style> |
|
|
99 |
<meta name="robots" content="index,nofollow,noodp,noydir" /> |
|
|
100 |
</head> |
|
|
101 |
<body> |
|
|
102 |
<h1>A Guide To Thematic</h1> |
|
|
103 |
<p class="intro">Thematic is more than just a WordPress theme, it's also a <em>Theme Framework</em>. Now, that doesn't mean it's hard to use, bloated or overcomplicated. <em>Quite the opposite</em>. It's extremely easy to use, lean and easy to customize. This guide will show you why and how.</p> |
|
|
104 |
|
|
|
105 |
<h2>Widget-Ready Areas</h2> |
|
|
106 |
<p>Thematic has 13 widget-ready areas, called <em>Asides</em>, that can be used creatively to customize your theme.</p> |
|
|
107 |
<ul> |
|
|
108 |
<li><h3>Primary Aside</h3> |
|
|
109 |
<p>Located immediately after the content area in the markup. Typically used as a sidebar. By default it contains <em>Search</em>, <em>Pages</em>, <em>Categories</em> and <em>Archives</em> widgets. Use the widgets panel under <code>Design</code> to add your own widgets and override the default.</p></li> |
|
|
110 |
<li><h3>Secondary Aside</h3> |
|
|
111 |
<p>Located immediately after the Primary Aside in the markup. Typically used as a sidebar. By default it contains <em>Links</em>, <em>RSS Feeds</em> and <em>Meta</em> widgets. Use the widgets panel under <code>Design</code> to add your own widgets and override the default.</p></li> |
|
|
112 |
<li><h3>Subsidiary Asides</h3> |
|
|
113 |
<p>Located in the footer. Empty of widgets by default, they will not apear in the theme markup until you add a widget.</p></li> |
|
|
114 |
<li><h3>Index Asides</h3> |
|
|
115 |
<p>Located in the content area of the index, or blog page. Empty of widgets by default, they will not apear in the theme markup until you add a widget. The location of the <em>Index Insert</em>, which appears between posts, is controlled from the theme options page. The default position sets it to appear after the second post.</p></li> |
|
|
116 |
<li><h3>Single Asides</h3> |
|
|
117 |
<p>Located in the content area of single post pages. Empty of widgets by default, they will not apear in the theme markup until you add a widget.</p></li> |
|
|
118 |
<li><h3>Page Asides</h3> |
|
|
119 |
<p>Located in the content area of static pages. Empty of widgets by default, they will not apear in the theme markup until you add a widget.</p></li> |
|
|
120 |
</ul> |
|
|
121 |
|
|
|
122 |
<h2>Theme Options</h2> |
|
|
123 |
<p>Thematic currently has three options that can be set from the <code>Theme Options</code> panel under <code>Design</code>: <em>Index Insert Position</em>, <em>Info on Author Page</em> and <em>Text in Footer</em>.</p> |
|
|
124 |
<p>The <em>Index Insert Position</em> setting controls the position of a widget-ready area on the index, or blog page. You can enter the number of posts you would like to appear <em>before</em> this widget-ready area. The default number is 2.</p> |
|
|
125 |
<p>Activating the <em>Info on Author Page</em> will display a <a href="http://microformats.org/wiki/hcard">microformatted vCard</a>—with the author's avatar, bio and email—on the author page. It's turned off by default. If you want to use this option, make sure you fill out the biographical info in your WordPress profiles.</p> |
|
|
126 |
<p>The <em>Text in Footer</em> option lets you insert your own <abbr>HTML</abbr> text into the footer of the theme. The default setting links to WordPress and the Thematic project page.</p> |
|
|
127 |
|
|
|
128 |
<h2>Dynamic Contextual Body Classes</h2> |
|
|
129 |
<p>Thematic makes use of the dynamic contextual class functions developed by Scott Wallick and Andy Skelton for <a href="http://www.plaintxt.org/themes/sandbox/">The Sandbox</a>. These functions make Thematic almost endlessley customizable through <abbr title="Cascading Stylesheets">CSS</abbr> alone.</p> |
|
|
130 |
<p>To really see how these classes work, where they appear and how you can use them, I recommend the Firefox extension, <a href="http://www.getfirebug.com/">Firebug</a>.</p> |
|
|
131 |
|
|
|
132 |
<h2>Thematic Child Themes</h2> |
|
|
133 |
<p>Thematic has been specially optimized to take advantage of the power of WordPress Child Themes. Unless you plan on making <strong>extreme</strong> modifications I recommend you use a <em>Child Theme</em> to customize Thematic.</p> |
|
|
134 |
<p>I've compiled a few Thematic Child Themes here that can help you get started.</p> |
|
|
135 |
<div class="content-column"> |
|
|
136 |
<h3>Free Child Themes</h3> |
|
|
137 |
<ul> |
|
|
138 |
<li><a href="http://allancole.com/wordpress/themes/boumatic/">Boumatic</a></li> |
|
|
139 |
<li><a href="http://www.cozmoslabs.com/2008/10/25/byty-free-child-theme-built-thematic/">Byty</a></li> |
|
|
140 |
<li><a href="http://patdryburgh.net/blamatic/">Blamatic</a></li> |
|
|
141 |
<li><a href="http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/">CatDrop</a></li> |
|
|
142 |
<li><a href="http://patdryburgh.net/junction/">Junction</a></li> |
|
|
143 |
<li><a href="http://www.themelab.com/2008/08/30/monochromatic-a-thematic-child-theme/">Monochromatic</a></li> |
|
|
144 |
<li><a href="http://www.ideetransfer.de/blog/2008/01/29/the-theme/">Ideetransfer</a></li> |
|
|
145 |
</ul> |
|
|
146 |
</div> |
|
|
147 |
<div class="content-column"> |
|
|
148 |
<h3>Commercial Child Themes</h3> |
|
|
149 |
<ul> |
|
|
150 |
<li><a href="http://themeshaper.com/acamas-theme-clarity-elegance-power/">Acamas</a></li> |
|
|
151 |
<li><a href="http://themeshaper.com/travailler-professional-wordpress-cms-theme/">Travailler</a></li> |
|
|
152 |
</ul> |
|
|
153 |
</div> |
|
|
154 |
|
|
|
155 |
<h2>Theme Support</h2> |
|
|
156 |
<p>If you have a question, problem or concern with Thematic you can <a href="http://themeshaper.com/contact/">contact Ian Stewart</a>. Better yet, I recommend posting to the <a href="http://themeshaper.com/forums/" title="ThemeShaper Forums">ThemeShaper Forums</a> after looking there for an answer.</p> |
|
|
157 |
<iframe id="ts-forums" src="http://themeshaper.com/forums/"></iframe> |
|
|
158 |
<p>The latest Thematic version, updates and bug fixes are always available at the <a href="http://code.google.com/p/thematic/">Thematic Project on Google Code</a>.</p> |
|
|
159 |
|
|
|
160 |
<h2>Credit and Inspiration</h2> |
|
|
161 |
<p>Thematic is a fork of the hugely succesful and amazing <a href="http://www.plaintxt.org/themes/sandbox/">Sandbox theme for WordPress</a> and inherits the bulk of that code base. I owe a huge debt of gratitude to Scott Wallick and Andy Skelton, not only for their work on The Sandbox but for their ongoing help with, and support of, my efforts. Thank you, Scott and Andy.</p> |
|
|
162 |
<p>In addition, Thematic has been inspired by and uses techinques from the following people and projects.</p> |
|
|
163 |
<ul> |
|
|
164 |
<li><a href="http://code.google.com/p/blueprintcss/">Blueprint</a></li> |
|
|
165 |
<li><a href="http://blog.kaizeku.com/">Avice (Chaoskaizer) De’véreux</a></li> |
|
|
166 |
<li>Tung (Small Potato) Do</li> |
|
|
167 |
<li><a href="http://efficienttips.com/wordpress-seo-title-description-tag/">Milan Kaneria</a></li> |
|
|
168 |
<li><a href="http://960.gs/">960.gs</a></li> |
|
|
169 |
<li><a href="http://www.pearsonified.com/">Chris Pearson</a></li> |
|
|
170 |
<li><a href="http://justintadlock.com/">Justin Tadlock</a></li> |
|
|
171 |
<li><a href="http://tarskitheme.com/">Tarski</a></li> |
|
|
172 |
<li><a href="http://devkick.com/lab/tripoli/">Tripoli</a></li> |
|
|
173 |
</ul> |
|
|
174 |
|
|
|
175 |
<h2>Copyright & License</h2> |
|
|
176 |
<p>Thematic is copyright <a href="http://themeshaper.com/">Ian Stewart</a> and released, like WordPress, under <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU General Public License, version 2 (GPL)</a>. |
|
|
177 |
<p>Thematic has a credit link in the footer template. You may remove or edit this link without cost or concern—although it sure is appreciated if you link back to <a href="http://themeshaper.com/">ThemeShaper</a>, or the <a href="http://themeshaper.com/thematic-for-wordpress/">Thematic project</a>, in some way.</p> |
|
|
178 |
|
|
|
179 |
<p><em class="thankyou">Thank you</em>.</p> |
|
|
180 |
|
|
|
181 |
</body> |
|
|
182 |
</html> |