You have just installed Nucleus, and now the first thing you want to do is change the look of your brand new weblog/news page. For new users, the way Nucleus handles web pages can be confusing at first. This document will try to guide you through the processes needed to make this excellent tool look the way you want it to.
In this howto, we will explain:
The design of Nucleus-generated sites is managed by the combination of skins & templates. Skins determine the overall look of pages generated by Nucleus. Templates control the always changing parts of the weblog that appear on these different pages. These work together to offer you maximum flexibility, and (once you understand the concept) are very ease to manage.
Example Let's presume that previous kottke.org design was powered by Nucleus. Then the front page of that site would be controlled by a skin and a template like this:
If you want to start changing the look of your site, the concept to remember in the back of your mind is that: dynamic blocks of content (templates) can be inserted into, moved around and removed from the Nucleus webpages (skins). Now let's start changing that bland default design!
If you only want to make some basic changes, leave the skins & templates alone. Start by changing the yellow background and/or moving the 'navigation and links' column from the right side of the page to the left side. (The concerned files are located in yoursite.com/skins/default/). First login to Nucleus. Then, at the bottom of the navigation menu, click on the Skin Files link to go to the web based management of all the files that make up your skins:
Permissions? The NP_SkinFiles enables the web based management of all files in the skins directory. You can always 'read' them. If you want to actually edit them from your browser, set the permissions on all files in the /skins/ directory and subdirectories to 666 or rw-rw-rw. Take care the directories themselves are set to 766 or rwxrw-rw-!!
Skindata.xml? In all the different skin directories, skinbackup.xml files can be found which hold the original code of a skin. These are backup files, which you can restore through the 'import/export' link in your Nucleus admin area. The code Nucleus uses to display your site is stored in the database! You are editing it when you edit one of the text boxes behind the Skins or Templates menu options
Back to the more simple modifications of the default skin:
/skins/directory. Go to the /skins/default/ directory, click on the Edit next to the head.inc file, and in the then appearing text box find the following code snippet:
<!-- site stylesheet (site colors and layout definitions) --> <link rel="stylesheet" type="text/css" href="<%skinfile(default_right.css)%>" />Change the default_right.css to default_left.css, and save:
<!-- site stylesheet (site colors and layout definitions) --> <link rel="stylesheet" type="text/css" href="<%skinfile(default_left.css)%>" />
The stylesheet (default_left.css or default_right.css) controls the appearance of all default Nucleus weblog pages. By editing it, you can easily change or apply new colors, font characteristics, background images to all pages at once. Furthermore, through a stylesheet you control where blocks of content are positioned. And much, much more.
You can edit the stylesheet default_left/_right.css in a normal text editor like NotePad. However, I recommend a good CSS editor like Topstyle Lite, or Pro, for beginners and more experienced users.
The stylesheet will enable you to change the look of your site. But I bet you want to have more control over the look of your site, so there is nothing else to do but dive into Nucleus skins!
First off, log into your admin area and select Nucleus Management. On the page that now appears, under the heading Skins and Templates, is where you will start creating your personal site design.
It is always a good idea to start by cloning the original default skin and default & detailed templates. That way you will not be working on the skin that is controlling your current site design. Here's how:
Now you can start to edit the code of the newly created blue skin and templates.
A large part of the skins and templates are made up out of simple HTML code. In addition to the HTML, you will find Nucleus code that inserts every piece of dynamic information into your webpages. How do you recognize the difference?
Within the Nucleus Admin Area, a lot of assistance is provided. All the small white on darkblue question marks are links to the documentation. And on every 'Edit Skin' page, you will find a list of available skinvars displayed under the editable code box (see screenshot below). Each skinvar is actually a helpful link to an explanation of that variable, so use it!
The first step after cloning the default skin and templates is to edit all the skinvars that refer to the default templates. An example is the <%blog(default/index,10)%> skinvar in the screenshot above. It tells the front page skin to display 10 entries using the default/index template. But we want it to link to blue/index (and all references to detailed to change to blue/item). Change those references accordingly. Don't forget to click on 'Update Skin'. Now you can start changing the design!
When you look at a basic website, you will see it always has a standard structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Title of page</title>
This is my first homepage. <strong>This text is bold</strong>
All Nucleus skins are built around this basic website structure. The only part you need to edit is the one between <body> and </body>, because this is the part that will be displayed in browsers. Change things to your liking, and don't forget to save.
Last tip: I always test a new skin before making it the default one for my blog. That way, your visitors will not be confronted with a half-finished design. You can do this by:
You can find out what skinid is connected to your new skin by hovering over the Clone, Edit or Delete links on the 'Skin Overview' page (see the 'Edit Skins' image). These url's will look like this in your status bar:
In my case, 12 was the skinid of my new skin.
If you are satisfied with the new 'blue' theme you created for your site, go to the settings for your blog and set the default skin to blueSkin (or whatever you named your skin). All right, you're ready!
(7 August 2003, Roel Groeneveld)