nucleus/documentation/skins.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4         <!-- $Id: skins.html 1457 2010-10-26 15:47:41Z ftruscot $ -->
   5         <title>Nucleus - Skins and Templates</title>
   6         <link rel="stylesheet" type="text/css" href="styles/manual.css" />
   7 </head>
   8 <body>
   9
  10 <div class="heading">
  11 Skins &amp; Templates
  12 </div>
  13
  14 <h1>Introduction</h1>
  15
  16 <p>
  17 <a href="index.html">Back to the manual</a>
  18 </p>
  19
  20 <p>So, you've installed Nucleus... You've got several options now concerning the look of your site:</p>
  21 <ol>
  22         <li>Go with the default skin/templates that comes with Nucleus</li>
  23         <li>Start from the default skin/templates, and modify it to your needs (colors, etc...)</li>
  24         <li>Start your own skin/templates, and define your own CSS stylesheets</li>
  25         <li>Download one of the dozens of free skins available on the <a href="http://skins.nucleuscms.org/" title="Nucleus CMS skins">Nucleus Skins site</a>.</li>
  26 </ol>
  27 <p>This document tries to help you with doing this.</p>
  28
  29 <h1><a id="toc"></a>Table Of Contents</h1>
  30
  31 <ul>
  32         <li><a href="#htmlcss">HTML and CSS</a></li>
  33         <li><a href="#defaultskin">The default skin</a></li>
  34         <li><a href="#templatesvsskins">Templates vs. Skins</a></li>
  35         <li><a href="#skincascade">How skins are chosen</a></li>
  36         <li>Howto:
  37                 <ul>
  38                         <li><a href="#howto-additem">An 'add item' form on your website</a></li>
  39                         <li><a href="#howto-cssforms">Using CSS to define the look of forms</a></li>
  40                         <li><a href="#howto-karma">Enabling karma votes</a></li>
  41                         <li><a href="#howto-edit">'Edit item'-links</a></li>
  42                 </ul>
  43         </li>
  44         <li><a href="#export">Writing skins with Export/Import in mind</a></li>
  45 </ul>
  46
  47 <h1>HTML and CSS <a id="htmlcss" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
  48
  49 <p>
  50 When editing skins and templates, you'll need at least some basic knowledge about HTML and CSS. This section provides some pointers to online tutorials and references:
  51 </p>
  52
  53 <ul>
  54         <li><a href="http://www.w3schools.com/">W3Schools</a>: online web building tutorials (HTML, XHTML, CSS)</li>
  55         <li><a href="http://thenoodleincident.com/tutorials/css/">CSS Panic Guide</a>: links to various CSS resources</li>
  56         <li><a href="http://hotwired.lycos.com/webmonkey/authoring/html_basics/index.html">Webmonkey: HTML Basics</a></li>
  57         <li><a href="http://hotwired.lycos.com/webmonkey/authoring/stylesheets/">Webmonkey: Stylesheets</a></li>
  58         <li><a href="http://diveintoaccessibility.org">Dive Into Accessibility</a>: Online book, not really about HTML, but about accessibility and how to make your site more accessible.</li>
  59 </ul>
  60
  61
  62
  63
  64
  65
  66
  67 <h1>The default skin <a id="defaultskin" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
  68
  69 <p>This section briefly explains which files are used by the default skin, and how you can edit them.</p>
  70
  71 <p>The default skin uses three files:</p>
  72 <ol>
  73         <li><tt>default.css</tt>: CSS stylesheet that defines the page style. Colors, layout etc. are defined in this file</li>
  74         <li><tt>atom.gif</tt>: The logo that appears in the upper left corner of the screen</li>
  75         <li><tt>nucleus2.gif</tt>: Nucleus logo</li>
  76 </ol>
  77
  78 <p>The CSS file <tt>default.css</tt> contains extra information about how pages are built up by the default skins and templates. Basically, it comes down to three <tt>div</tt>-containers: <tt>.contents</tt>, <tt>.logo</tt> and <tt>.menu</tt></p>
  79
  80 <p>To edit the <tt>default.css</tt> file, you'll need a simple texteditor that does not add extra data, like Notepad (comes with windows),emacs or TextPad. Do <strong>not</strong> use WordPad, Word, OpenOffice Writer, ... since those add extra markup data.</p>
  81
  82
  83
  84
  85
  86
  87 <h1>Templates vs. Skins <a id="templatesvsskins" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
  88
  89 <p>
  90 In Nucleus, both templates and skins are used to determine the way your blog looks. So, what is the difference between these two?
  91 </p>
  92
  93 <ol>
  94         <li>
  95                 <b>Skins</b> define how your sites look. Each skin consists of several types: one for the main index, one for the detailed item pages, one for the archive, ...
  96                 The skins also contain instructions of where to include a weblog, and which template should be used to do so.
  97         </li>
  98         <li>
  99                 Ha! This means <b>templates</b> are used to define the way the weblog block in your page looks like. The reason why templates aren't included in the skins themselves, is that several skins can use the same template to display a blog.
 100         </li>
 101 </ol>
 102
 103 <p>An example is given in the image below. The whole page is defined by a skin, while the parts in the red rectangles (category list and blog contents) are formatted according to the templates. It's the skin that defines where the red rectangles will appear.</p>
 104
 105 <div class="screenshot">
 106 <img src="pics/skinsandtemplates.png" width="300" height="283" alt="Skins and Templates example" />
 107 </div>
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117 <h1>How skins are chosen <a id="skincascade" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 118
 119 <p>
 120 This section tries to explain how Nucleus chooses the skin to use when you request a page.
 121 </p>
 122
 123 <h2>Skin Types</h2>
 124
 125 <p>
 126 First of all, there are several skin types between which Nucleus makes a choice according to the request URL: see the list below. This should be very obvious.
 127 </p>
 128
 129 <table>
 130         <tr><th>Query String Format</th><th>Which skin type?</th><th>Which weblog is shown?</th></tr>
 131         <tr><td>?itemid=..</td><td>item</td><td>Deducted from <i>itemid</i></td></tr>
 132         <tr><td>?archive=..</td><td>archive</td><td>Default weblog, or <i>blogid</i> attribute</td></tr>
 133         <tr><td>?archivelist=...</td><td>archivelist</td><td><i>archivelist</i>-attribute</td></tr>
 134         <tr><td>?archivelist</td><td>archivelist</td><td>Default weblog</td></tr>
 135         <tr><td>?query=...</td><td>search</td><td>Default weblog, or <i>blogid</i> attribute</td></tr>
 136         <tr><td>?memberid=..</td><td>member</td><td>None</td></tr>
 137         <tr><td>?imagepopup=..</td><td>imagepopup</td><td>None (popup window with image)</td></tr>
 138         <tr><td><i>(other or empty)</i></td><td>index</td><td>Default weblog, or <i>blogid</i> attribute</td
 139         ></tr>
 140 </table>
 141
 142 <p>
 143 Next to these 7 types, there is an <i>error</i> type, which is used when errors occur.
 144 </p>
 145
 146 <h2>The Skin Cascade</h2>
 147
 148 <p>
 149 The table above also indicates how the blog to be displayed is chosen. The skin that will be used, is the default skin for that weblog, as selected in the settings for that weblog.
 150 </p>
 151
 152 <p>
 153 Not every skin needs to have definitions for all skin parts. When a part is missing, the skin called 'default' will be used instead (see below). This allows you for example to only create one error page and one member page.
 154 </p>
 155
 156 <h2>The 'default' Skin</h2>
 157
 158 <p>
 159 Nucleus requires that at all times there exists a skin called '<b>default</b>'. This is the skin to which is backed up when a skinpart is missing. If the same skinpart is also missing from the 'default' skin, the error message 'no appropriate skin found' will be shown.
 160 </p>
 161
 162 <p>
 163 Another reason why the 'default' skin is required, is to be able to display error messages when no blog is selected (e.g. the 'no such blog' error)
 164 </p>
 165
 166
 167
 168
 169
 170
 171
 172
 173 <h1>Howto: An 'add item' form on your website <a id="howto-additem" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 174
 175 <p>
 176 Nucleus provides facilities to add an 'add item' form to your weblog. It adds an 'add item' link that shows and hides the 'add item' form right above the current contents of your weblog. Entering text in this form results into an instant preview, so you can immediately see how the actual weblog item will look like.
 177 </p>
 178
 179 <p>
 180 All modifications below apply to the <b>skin</b> for the <b>main index</b> page. You don't need to alter any templates.
 181 </p>
 182
 183 <h2>1. JavaScript code</h2>
 184 <p>
 185 First of all, you need to include the edit.js Javascript code by putting the following line somewhere in between the &lt;head&gt; and &lt;/head&gt; tags. This file contains the functions that are needed to make the preview work and to hide/show the 'add item' form.
 186 </p>
 187
 188 <pre>
 189 &lt;script type="text/javascript"
 190         src="nucleus/javascript/edit.js"&gt;&lt;/script&gt;
 191 </pre>
 192
 193 <h2>2. Indicate where the form will show up</h2>
 194
 195 <p>
 196 The, you add a logical container somewhere on your page, where you want to have the 'add item' form. The "display:none;" makes sure it is hidden.
 197 </p>
 198
 199 <pre>
 200 &lt;div id="edit" style="display:none;"&gt;
 201 ...
 202 &lt;/div&gt;
 203 </pre>
 204
 205 <h2>3. Code that inserts the form and preview</h2>
 206
 207 <p>
 208 Now, you can add your custom HTML into this container, and use &lt;%additemform%&gt; and &lt;%preview(<i>templatename</i>)%&gt; to insert the 'add item' form and the preview code respectively. An example is given below
 209 </p>
 210
 211 <pre>
 212 &lt;h2&gt;Add Item&lt;/h2&gt;
 213 &lt;%additemform%&gt;
 214
 215 &lt;h2&gt;Preview&lt;/h2&gt;
 216 &lt;%preview(mytemplate)%&gt;
 217 </pre>
 218
 219 <h2>4. The 'add item'-link</h2>
 220 <p>
 221 And the finishing touch: a link or button to trigger the visibility of the form. Two examples are given. The first one is a simple link:
 222 </p>
 223
 224 <pre>
 225 &lt;a href="javascript:showedit();"&gt;add item&lt;/a&gt;
 226 </pre>
 227
 228 <p>
 229 The second example is a hidden button in the topleft corner
 230 </p>
 231
 232 <pre>
 233 &lt;div style="position: absolute; left: 0px;
 234             top: 0px; width: 10px; height: 10px"
 235      onclick="javascript:showedit();"&gt;
 236 &lt;/div&gt;
 237 </pre>
 238
 239
 240
 241
 242
 243
 244 <h1>Howto: CSS to define the look of forms <a id="howto-cssforms" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 245
 246 <p>
 247 Through variables such as &lt;%searchform%&gt; and &lt;%commentform%&gt;, forms can easily be included into your skin. To allow styles to be applied on those forms, CSS classes have been assigned to the input fields and buttons, and to a surrounding DIV-container.
 248 </p>
 249
 250 <p>
 251 Below is a list of which CSS class corresponds to which form. These are the classes assigned to the surrounding DIV-container.
 252 </p>
 253
 254 <table>
 255         <tr>
 256                 <th>Form Type</th>
 257                 <th>Skin Variable</th>
 258                 <th>CSS Class Name</th>
 259         </tr>
 260         <tr>
 261                 <td>Add Item to Blog</td>
 262                 <td>&lt;%additemform%&gt;</td>
 263                 <td>.blogform</td>
 264         </tr>
 265         <tr>
 266                 <td>Add Comment</td>
 267                 <td>&lt;%commentform%&gt;</td>
 268                 <td>.commentform</td>
 269         </tr>
 270         <tr>
 271                 <td>Login Form</td>
 272                 <td>&lt;%loginform%&gt;</td>
 273                 <td>.loginform</td>
 274         </tr>
 275         <tr>
 276                 <td>Search Form</td>
 277                 <td>&lt;%searchform%&gt;</td>
 278                 <td>.searchform</td>
 279         </tr>
 280         <tr>
 281                 <td>Member to Member Mail</td>
 282                 <td>&lt;%membermailform%&gt;</td>
 283                 <td>.mailform</td>
 284         </tr>
 285 </table>
 286
 287 <p>
 288 Below is an overview of the CSS classes assigned to buttons and input fields.
 289 </p>
 290
 291 <table>
 292         <tr>
 293                 <th>Type</th>
 294                 <th>CSS Class Name</th>
 295         </tr>
 296         <tr>
 297                 <td>Input fields (text and textarea)</td>
 298                 <td>.formfield</td>
 299         </tr>
 300         <tr>
 301                 <td>Buttons</td>
 302                 <td>.formbutton</td>
 303         </tr>
 304 </table>
 305
 306 <p>
 307 An example of how to use these classes in you stylesheets is given below:
 308 </p>
 309
 310 <pre>
 311 /* applies to all input fields */
 312 .formfield {
 313   background-color: gray;
 314 }
 315
 316 /* only applies to buttons for comment forms */
 317 .commentform .formbutton {
 318   border: 1px solid #000;
 319   background-color: #ddd;
 320   color: #000;
 321   font-size: xx-large;
 322 }
 323 </pre>
 324
 325 <p>In the example above, all formfields that nucleus generates are given a gray background, and the submit button on the comment form has large text, a black 1px border, black text and a light-gray background.</p>
 326
 327
 328 <h1>Howto: Enabling karma votes <a id="howto-karma" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 329
 330 <p>The default skins and templates have karma votes disabled (better: left out). Here's how to add them to your <i>template</i>.</p>
 331
 332 <h2>1. Open the template for the main index</h2>
 333
 334 <p>Start editing the template named <tt>'default'</tt> (when starting from the default skins/templates that come with Nucleus)</p>
 335
 336 <h2>2. Edit the 'Item body' template-part</h2>
 337
 338 <p>Edit the <i>bottom part</i> of the item body templatepart to be as follows:</p>
 339
 340 <pre>
 341 &lt;div class="iteminfo"&gt;
 342   &lt;%time%&gt; -
 343   &lt;a href="&lt;%authorlink%&gt;"&gt;&lt;%author%&gt;&lt;/a&gt; -
 344   karma: &lt;%karma%&gt;
 345     [&lt;a href="&lt;%karmaposlink%&gt;"&gt;+&lt;/a&gt;/&lt;a href="&lt;%karmaneglink%&gt;"&gt;-&lt;/a&gt;] -
 346   &lt;%edit%&gt;
 347   &lt;%comments%&gt;
 348 &lt;/div&gt;
 349 </pre>
 350
 351 <p>On the main page, the iteminfo line for the items will now look like:</p>
 352
 353 <div><i>9:00:39 PM - <a href="">God</a> - karma: 5 [<a href="">+</a>/<a href="">-</a>] - <a href="">edit</a></i></div>
 354
 355 <h2>3. Template for the detailed pages</h2>
 356
 357 <p>At this time, the karma score is only listed on the main page. To make it appear on the detailed page also, the same change needs to be applied to the template with name '<tt>detailed</tt>'</p>
 358
 359
 360
 361
 362
 363
 364 <h1>Howto: 'edit item' links <a id="howto-edit" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 365
 366 <p>The default Nucleus skin includes 'edit item'-links that are only visible to the author of a item and to the people having the right to alter the item. This section explains which template-parts are needed for this feature to work.</p>
 367
 368 <h2>'editlink'-template</h2>
 369
 370 <p>The 'Edit Link'-templatepart defines how an 'edit item'-link is formatted. By default, the contents is:</p>
 371 <pre><code>&lt;a href="&lt;%editlink%&gt;" onclick="&lt;%editpopupcode%&gt;"&gt;edit&lt;/a&gt;</code></pre>
 372
 373 <p>If you would rather edit the item in the admin area, instead of in the popup bookmarklet, use the following code instead:</p>
 374
 375 <pre><code>&lt;a href="nucleus/index.php?action=itemedit&amp;amp;itemid=&lt;%itemid%&gt;"&gt;edit&lt;/a&gt;
 376 </code></pre>
 377
 378 <h2>Positioning the edit-link</h2>
 379
 380 <p>Next to the 'editlink' template, there's the <code>&lt;%edit%&gt;</code>-templatevar that, when placed somewhere in the 'item body'-templatepart, inserts the editlink.</p>
 381
 382 <p>See the example from the <a href="#howto-karma">karma votes howto</a> to see an example.</p>
 383
 384
 385
 386
 387 <h1>Writing skins with Export/Import in mind <a id="export" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
 388
 389 <p>Nucleus v2.0 introduced the ability to import and export skins and templates. This section describes the creation of a simple skin, highlighting the features involved.</p>
 390
 391 <h2>Creating a new skin</h2>
 392
 393 <ol>
 394         <li>
 395                 <p>First, we're going to create a new skin from the admin area. Browse to <code>Nucleus Management &gt; Edit Skins</code> and scroll to the bottom of the page. Let's call this skin '<strong>vista</strong>'</p>
 396         </li>
 397         <li>
 398                 <p>Now look up the 'vista' skin in the skin list and go to the <code>Edit</code> screen. The content type is set to <code>text/html</code>. That's what we want, so no need to change that</p>
 399                 <p>The <code>Include Mode</code> and <code>Include Prefix</code> setting reuire more attention. To export a skin, we like to have all files (images, stylesheets, etc...) under one single directory. Remember the <code>$DIR_SKINS</code> setting in <code>config.php</code> and the <code>Skins URL</code> in the general site settings? Suppose these were as follows:</p>
 400                 <pre><code>/home/user/example/htdocs/skins/
 401 http://example.org/skins/</code></pre>
 402                 <p>Then we would like to put our files in</p>
 403                 <pre><code>/home/user/example/htdocs/skins/vista/
 404 http://example.org/skins/vista/</code></pre>
 405                 <p>And this is what the <strong><code>Include Mode</code></strong> is for. Setting it to <strong>Use skin dir</strong> will do this.</p>
 406                 <p>The <strong><code>Include Prefix</code></strong> also plays a role. This is the <strong>vista/</strong> part</p>
 407                 <p>An overview of the correct settings:</p>
 408                 <ul>
 409                         <li><strong>Name</strong>: vista</li>
 410                         <li><strong>Content Type</strong>: text/html</li>
 411                         <li><strong>Include Mode</strong>: Use skin dir</li>
 412                         <li><strong>Include Prefix</strong>: vista/</li>
 413                 </ul>
 414         </li>
 415 </ol>
 416
 417 <h2>Edit the skin</h2>
 418
 419 <p>The <code>IncludeMode</code> and <code>IncludePrefix</code> settings will cause the <code>include</code>, <code>phpinclude</code> and <code>parsedinclude</code> skinvars to get their files from the skindir. Next to that, there's the <code>skinfile</code> skinvar, which translates its argument to an URL relative to the skinsdir.</p>
 420
 421 <p>In our case:</p>
 422
 423 <pre><code>&lt;%skinfile(myFile.jpg)%&gt;</code></pre>
 424
 425 <p>Will get expanded to:</p>
 426
 427 <pre><code>http://example.org/skins/vista/myFile.jpg</code></pre>
 428
 429 <p>Lets go easy on ourselves and define the global layout in two files called <code>pagefoot.inc</code> and <code>pagehead.inc</code>, which we place in our <code>vista/</code> directory:</p>
 430
 431 <h3>pagehead.inc</h3>
 432
 433 <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 434 &lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
 435 &lt;head&gt;
 436         &lt;title&gt;My Site&lt;/title&gt;
 437         &lt;link rel="stylesheet" type="text/css" href="&lt;%skinfile(layout.css)%&gt;" /&gt;
 438 &lt;/head&gt;
 439 &lt;body&gt;
 440
 441 &lt;div id="contents"&gt;</code></pre>
 442
 443 <h3>pagefoot.inc</h3>
 444
 445 <pre><code>&lt;/div&gt;&lt;!-- contents div end --&gt;
 446
 447 &lt;div id="stuffbar"&gt;
 448         &lt;h2&gt;Navigation&lt;/h2&gt;
 449
 450         &lt;ul&gt;
 451                 &lt;li&gt;&lt;a href="&lt;%todaylink%&gt;"&gt;Today&lt;/a&gt;&lt;/li&gt;
 452                 &lt;li&gt;&lt;a href="&lt;%archivelink%&gt;"&gt;Archives&lt;/a&gt;&lt;/li&gt;
 453         &lt;/ul&gt;
 454
 455         &lt;h2&gt;About&lt;/h2&gt;
 456
 457         &lt;ul&gt;
 458                 &lt;li&gt;&lt;a href="http://www.nucleuscms.org/"&gt;Nucleus&lt;/a&gt; Power!&lt;/li&gt;
 459         &lt;/ul&gt;
 460 &lt;/div&gt;&lt;!-- stuffbar end --&gt;
 461
 462 &lt;/body&gt;
 463 &lt;/html&gt;</code></pre>
 464
 465 <p>The contents of the skinparts then becomes kind of trivial: (I'm not defining them all, you'll get the point by seeing the most important ones)</p>
 466
 467 <h3>Main Index</h3>
 468 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
 469
 470 &lt;h1&gt;My Blog&lt;/h1&gt;
 471
 472 &lt;%blog(vista/main,10)%&gt;
 473
 474 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
 475
 476 <h3>Item Pages</h3>
 477
 478 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
 479
 480 &lt;h1&gt;My Blog&lt;/h1&gt;
 481
 482 &lt;h2&gt;Item&lt;/h2&gt;
 483 &lt;%item(vista/detailed)%&gt;
 484
 485 &lt;h2&gt;Comments&lt;/h2&gt;
 486 &lt;%comments(vista/detailed)%&gt;
 487
 488 &lt;h2&gt;Add Comment&lt;/h2&gt;
 489 &lt;%commentform%&gt;
 490
 491 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
 492
 493 <p>Note that I named my templates <strong>vista/main</strong> and <strong>vista/detailed</strong>. Makes it easier to see things together six months later. Both templates are actually clones that I made of the <strong>default</strong> and <strong>detailed</strong> templates that come with Nucleus.</p>
 494
 495 <h3>Archive List</h3>
 496
 497 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
 498
 499 &lt;h1&gt;My Blog&lt;/h1&gt;
 500
 501 &lt;%archivelist(vista/main)%&gt;
 502
 503 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
 504
 505 <h3>Archive</h3>
 506
 507 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
 508
 509 &lt;h1&gt;My Blog&lt;/h1&gt;
 510
 511 &lt;%archive(vista/main)%&gt;
 512
 513 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
 514
 515 <h2>Export the skin</h2>
 516
 517 <p>When all is done, you can export the skin from the <code>Skin Import/Export</code> page in the admin area. Here's what to do:</p>
 518
 519 <ol>
 520         <li>Select vista, vista/detailed and vista/main from the skins and template list</li>
 521         <li>Add some textual description and hit the <code>Export selected skins/templates</code> button. It will generate a <code>skinbackup.xml</code> for you.</li>
 522         <li>Save this <code>skinbackup.xml</code> file together with the other files in the <code>vista/</code> directory.</li>
 523         <li>Package all files from the vista directory inside a zipfile</li>
 524         <li>All done! Your skin can now be shared with others</li>
 525 </ol>
 526
 527 <h2>Importing a skin</h2>
 528
 529 <p>Importing is the reverse process:</p>
 530
 531 <ol>
 532         <li>Unzip the zip file under your skins directory, so you end up with a <code>vista/</code> dir (there will be one directory per skin)</li>
 533         <li>From the <code>Skin Import/Export</code> page in the admin area, select <code>vista</code> from the dropdown, and click the <code>Import</code> button.</li>
 534         <li>Follow the instructions</li>
 535         <li>The skin is now installed. It can be selected from the blogsettings.</li>
 536 </ol>
 537
 538 </body>
 539 </html>