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.
First, we're going to create a new skin from the admin area. Browse to Nucleus Management > Edit Skins and scroll to the bottom of the page. Let's call this skin 'vista'
Now look up the 'vista' skin in the skin list and go to the Edit screen. The content type is set to text/html. That's what we want, so no need to change that
The Include Mode and Include Prefix setting reuire more attention. To export a skin, we like to have all files (images, stylesheets, etc...) under one single directory. Remember the $DIR_SKINS setting in config.php and the Skins URL in the general site settings? Suppose these were as follows:
/home/user/example/htdocs/skins/
http://example.org/skins/Then we would like to put our files in
/home/user/example/htdocs/skins/vista/
http://example.org/skins/vista/And this is what the Include Mode is for. Setting it to Use skin dir will do this.
The Include Prefix also plays a role. This is the vista/ part
An overview of the correct settings:
The IncludeMode and IncludePrefix settings will cause the include, phpinclude and parsedinclude skinvars to get their files from the skindir. Next to that, there's the skinfile skinvar, which translates its argument to an URL relative to the skinsdir.
In our case:
<%skinfile(myFile.jpg)%>Will get expanded to:
http://example.org/skins/vista/myFile.jpgLets go easy on ourselves and define the global layout in two files called pagefoot.inc and pagehead.inc, which we place in our vista/ directory:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="<%skinfile(layout.css)%>" />
</head>
<body>
<div id="contents"></div><!-- contents div end -->
<div id="stuffbar">
<h2>Navigation</h2>
<ul>
<li><a href="<%todaylink%>">Today</a></li>
<li><a href="<%archivelink%>">Archives</a></li>
</ul>
<h2>About</h2>
<ul>
<li><a href="http://www.nucleuscms.org/">Nucleus</a> Power!</li>
</ul>
</div><!-- stuffbar end -->
</body>
</html>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)
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%blog(vista/main,10)%>
<%parsedinclude(pagefoot.inc)%><%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<h2>Item</h2>
<%item(vista/detailed)%>
<h2>Comments</h2>
<%comments(vista/detailed)%>
<h2>Add Comment</h2>
<%commentform%>
<%parsedinclude(pagefoot.inc)%>Note that I named my templates vista/main and vista/detailed. Makes it easier to see things together six months later. Both templates are actually clones that I made of the default and detailed templates that come with Nucleus.
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archivelist(vista/main)%>
<%parsedinclude(pagefoot.inc)%><%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archive(vista/main)%>
<%parsedinclude(pagefoot.inc)%>When all is done, you can export the skin from the Skin Import/Export page in the admin area. Here's what to do:
Export selected skins/templates button. It will generate a skinbackup.xml for you.skinbackup.xml file together with the other files in the vista/ directory.Importing is the reverse process:
vista/ dir (there will be one directory per skin)Skin Import/Export page in the admin area, select vista from the dropdown, and click the Import button.