/
index.html
261 lines (214 loc) · 16.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8">
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/prettify.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aries - 12 Designs Project</title>
</head>
<body onload="prettyPrint()">
<div id="wrapper"><!-- Begin wrapping -->
<div id="header"><!-- Begin header -->
<div id="masthead" class="left">
<h1>Aries Documentation</h1>
</div>
<hr />
<div id="menu" class="right">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#customize">Customize</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#licensing">Licensing</a></li>
<li><a href="#changelog">Changelog</a></li>
</ul>
</div>
<div class="clear"></div>
<hr />
</div><!-- End header -->
<div id="content"><!-- Begin content -->
<div id="introduction" class="item">
<h2><span class="item-title">Introduction</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p><a href="http://www.12designsproject.com/aries">Aries</a> is a minimalist, elegant, and highly customizable WordPress themes. <strong>I bundled two themes in the package</strong>, the one with the right sidebar, and another one with the left sidebar. If you have a skills in CSS and HTML, you can actually create the 3 column version for this design.</p>
<p>This theme is not a premium theme. It is a limited edition, an exclusive WordPress theme. Only 12 peoples in the world will use it. To fully understands what Aries can do, or can't do, please read this documentation thoroughly. Contact me if you have any question, I will try my best to respond.</p>
<p>Aries is developed for WordPress 3.0+ version. It has been tested and performed fantastically on modern browsers. As a reminder, we did not design Aries for Internet Explorer 6 and 7.</p>
<p>Best regards, Mohd Huzairy.</p>
</div>
</div>
<div id="features" class="item">
<h2><span class="item-title">Features</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p>Aries known features so far:</p>
<ol>
<li><strong>Widgetized Sidebar</strong> — You can arrange your sidebar items easily. We even styled the calendar widget for your pleasure. But beware, never put a search form widget, it looks so uncool. Besides, Aries already have it's own search box at the top of the header.</li>
<li><strong>WordPress 3.0 Custom Menu</strong> — Aries supports the new WordPress custom menu. You can enable it in Dashboard » Appearance » Menus. Now you can arrange your own links easily. But, too many links would break the top level menu area in Aries. To use the dropdown menu, please use <a href="http://shailan.com/wordpress/plugins/dropdown-menu/">Shailan's Dropdown Menu plugin</a>.</li>
<li><strong>Built-in Asides Post Type</strong> — To enable the asides post type, tag your post with "<strong>asides</strong>" category and it will works like a charm. Just make sure you only throws in a text, not a lists, or images.</li>
<li><strong>Built-in Related Post</strong> — This feature has been hardcoded into Aries. You no longer need to use additional plugins to display your related post. But, if you want to display the related post with the thumbnail, you may use additional plugin to do so.</li>
<li><strong>Built-in Share Options</strong> — Readers can share the post with others using three social services: Twitter, Facebook, and StumbleUpon. No need to use additional plugins to share your posts.</li>
<li><strong>Built-in Breadcrumb Navigation</strong> — Aries has it's own breadcrumb navigation to ensure the readers know their current location. The breadcrumb works in all pages, including the search result's page.</li>
<li><strong>Built-in Wp-Pagenavi style</strong> — Aries comes preloaded with the CSS styles for <a href="http://wordpress.org/extend/plugins/wp-pagenavi">WP-Pagenavi plugin</a>.</li>
<li><strong>Highlighted Post Author Comments</strong> — Readers can easily spot the post author comments since it is now differentiated from normal reader's comment.</li>
<li><strong>Image-less</strong> — Aries didn't have a single image file. Aries is utilizing the power of CSS3, along with HTML5.</li>
<li><strong>Lightning Fast</strong> — Since Aries didn't have an admin panel and additional theme hooks, this theme performed extremely fast. Besides, Aries didn't have any image files, and using well coded CSS and HTML.</li>
<li><strong>Two Layout Options</strong> — Aries original design is using a right sidebar. However, if you finds that the left sidebar is much cooler, you can use the left sidebar version which is bundled in the package.</li>
<li><strong>Well Coded and Clean CSS</strong> — Apparently, I am not a fan of single-line CSS code, so I opted out by using the multi-line CSS. In Aries CSS stylesheet, I commented the section of the selector, so that you can make your customization quicker.</li>
</ol>
<br />
<p>Aries unsupported features:</p>
<ol>
<li><strong>Custom Admin Panel</strong> — Unlike other modern WordPress themes, Aries didn't have a custom admin panel. But thanks to that, Aries performed much faster since it eliminates the custom theme hooks, additional PHP codes, and additional function request from the server.</li>
<li><strong>Threaded Comments</strong> — The only reason why I didn't implement this feature is, it is not cool to the eyes. It makes the comment section looks complicated, and crowded. If you insist on using threaded comment features, I suggest you use Disqus, or Intense Debate.</li>
</ol>
</div>
</div>
<div id="usage" class="item">
<h2><span class="item-title">Usage</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p><strong>Basic usage</strong> — After you downloaded the themes, you will get a zip file named aries.zip. I suggest that you make a backup copy of this file. Then, unzip it, and you will see a folder named aries. Inside the folder, you will find three folder: <code>aries_left</code>, <code>aries_right</code>, and <code>documentation</code>. Choose which theme you want to use(aries_left or aries_right), and upload it to your server's themes folder. Browse the themes in Dashboard » Appearance » Themes. Activate the Aries themes and there you go.</p>
<br />
<p><strong>Using border for images</strong> — By default, the image in your post is borderless, except for the wp-caption's images. To apply a border to your image, you need to add an extra classes named <code>frame</code> in the <code><img></code> tag. See the example below:</p>
<pre class="prettyprint scroll">
<img src="http://yourwebsite.com/wp-content/uploads/2010/12/pic.jpg" alt="" title="1202" width="500" height="370" class="frame size-full wp-image-124" />
</pre>
<p><strong>Note:</strong> The maximum image width is 500px. Use a pics larger than that will cause a chaos.</p>
<br />
<p><strong>Using wp-pagenavi instead of using the default page navigation</strong> — To enable the WP-Pagenavi in Aries, please open the <code>pagenavi.php</code> in the themes folder. Below is the content of the specified file:</p>
<pre class="prettyprint">
<!-- Replace the code below with wp-pagenavi code, if you have the plugin installed -->
<div id="pagination">
<p class="previous left"><?php next_posts_link('&larr; Older posts') ?></p>
<p class="next right"><?php previous_posts_link('Newer posts &rarr;') ?></p>
</div>
<div class="clear"></div>
</pre>
<p>Now, replace all the codes and make it become like this:</p>
<pre class="prettyprint">
<?php wp_pagenavi(); ?>
</pre>
<p>Next, uncheck the "Use pagenavi.css?" from the WP-Pagenavi plugin's setting to enable Aries' built-in WP-Pagenavi styles.</p>
<p>That's it. You can now start using the themes.</p>
</div>
</div>
<div id="customize" class="item">
<h2><span class="item-title">Customize</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p><strong>Changing the link's colour</strong> — To change the link's colour is pretty easy. Open the <code>style.css</code> in the themes folder, and locate this piece of code (Line 28):</p>
<pre class="prettyprint">
a
{
text-decoration:none;
color:#a5956c; /* Change the links colour, please use the hex color code */
}
</pre>
<p>Replace the <code>#a5956c</code> with your desired colour. The value needs to be in <a href="http://html-color-codes.com/">hex-color code</a>. Save the file to see the result.</p>
<br />
<p><strong>Use Google Webfont</strong> — By default, Aries is using Times New Roman(for headings) and Arial(for body text). If you prefer other fonts, especially the ones that provided by <a href="http://code.google.com/webfonts">Google Font Directory</a>, you can use it by following these simple steps. First, let say that you would like to use the <a href="http://code.google.com/webfonts/family?family=Droid+Sans&subset=latin">Droid Sans</a> font. Click "Use this font" tab, and copy the code provided, see below for examples:</p>
<pre class="prettyprint scroll">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</pre>
<p>Then, open the <code>header.php</code> files in the themes folder. The excerpt of the codes should be like this:</p>
<pre class="prettyprint scroll">
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('&raquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<?php wp_head(); ?>
</head>
</pre>
<p>Paste the codes that we copied before under the <code>rel=stylesheet</code> on line 7. See the example below:</p>
<pre class="prettyprint scroll">
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('&raquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<?php wp_head(); ?>
</head>
</pre>
<p>Save it. Now, we need to modified the codes in stylesheet. Again, open <code>style.css</code>, and locate this piece of codes(Line 76):</p>
<pre class="prettyprint">
#header h1, .entry-title, .single-entry-title, .entry-content h3, .entry-content h4
{
font-family:"Times New Roman", arial, verdana;
}
</pre>
<p>Replace the "Times New Roman" with "Droid Sans". See the examples below:</p>
<pre class="prettyprint">
#header h1, .entry-title, .single-entry-title, .entry-content h3, .entry-content h4
{
font-family:"Droid Sans", arial, verdana;
}
</pre>
<p>Save the file, and you are done.</p>
<br />
<p><strong>Use background image for site background</strong> — To use a background image, you need to have an image files, preferably the ones that can be repeated. Now, open the <code>style.css</code>, and locate this piece of codes (Line 12):</p>
<pre class="prettyprint">
/* Common HTML tags */
body
{
font:80%/150% arial,sans-serif,verdana;
background:#fff;
color:#666;
border-top:10px solid #eee;
}
</pre>
<p>Then, replace the <code>#fff</code> with <code>#fff url(images/bg.png) repeat</code> like below:</p>
<pre class="prettyprint">
/* Common HTML tags */
body
{
font:80%/150% arial,sans-serif,verdana;
background:#fff url(images/bg.png) repeat;
color:#666;
border-top:10px solid #eee;
}
</pre>
<p>I'm assuming your background image(bg.png) is saved in theme's image folder. Save it, and see the result.</p>
<br />
<p><strong>More?</strong> — You can always contact me if you had problems regarding Aries' customization.</p>
</div>
</div>
<div id="support" class="item">
<h2><span class="item-title">Support</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p>Supports is provided through email. I will personally answer any questions and giving guidance to Aries' users. I will respond within 24 hours, and if I am late than that, you can assume that my internet connection is having a hiccup. You can either <a href="mailto:huzairy@gmail.com">email me</a>, or ask me through <a href="http://twitter.com/mohdhuzairy">twitter</a>.</p>
</div>
</div>
<div id="licensing" class="item">
<h2><span class="item-title">Licensing</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<p>Aries, as a part of 12 Designs Project, is released under <a href="http://www.gnu.org/licenses/gpl">GNU Public License</a> (GPL). As a customer, you are free to use, modify, distribute, or even sell it. But you can't claim that you are the original designer/developer of this works. By stating it is free, it is free as in free speech, not as free in free drinks.</p>
</div>
</div>
<div id="changelog" class="item">
<h2><span class="item-title">Changelog</span> <strong><a href="#">Back to top</a></strong></h2>
<div class="item-content">
<ul>
<li><strong>Version 1.0</strong> — Aries successfully launched on 26th December 2010.</li>
</ul>
<p><strong>Note:</strong> New updates will be delivered through email, for free.</p>
</div>
</div>
</div><!-- End content -->
<hr />
<div id="footer"><!-- Begin footer -->
<p>©<a href="http://www.12designsproject.com">12 Designs Project 2011</a> · Written by <a href="http://mohd.huzairy.com">Mohd Huzairy</a> from <a href="http://www.mentariworks.com">MentariWorks</a>.</p>
</div><!-- End footer -->
</div><!-- End wrapping -->
</body>
</html>