Inspire 2.0 will be released after it is fully tested. I will not release a “beta” version first – this time the release will be final. I think most people will get the first release and use it on a production website, despite my warning that it is not stable enough. After the final version is released, it’s very troublesome to upgrade the beta version because many customizations will be lost.
Anyway, before the final release of Inspire 2.0, I would like to give a technical preview of Inspire 2.0: introducing new features and new skills. Meanwhile, as I’ve promised to Mamba, I will provide a short tutorial about how to implement the technology.

0. Software Matters

It’s very important that you have necessary softwares for your coding. It’s true that you can edit CSS and HTML files with Notepad but trust me, none of the designers use Notepad. You should get yourself professional editors. Dreamweaver is a good choice but it’s too expensive. I use Notepad++ for HTML editing. It’s free and cool. There’re many CSS editors and I use TopStyle. It’s a commercial software (USD 79.95) and if you don’t feel like purchasing the latest fancy Topstyle 4, you can download Topstyle 3.5 Lite. It’s free and enough for use.

1. 960 Grid System

960 GS is a very popular CSS framework. It’s small, efficient and flexible. Here’s an brief introduction from 960.gs

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

To integrate 960 GS into a XOOPS theme is quite easy. Get the css file(s) from the official website and put it in your theme folder. Open your theme CSS file (usually it’s style.css) and add following lines in the <head> part.

<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/themes/yourtheme/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/themes/yourtheme/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/themes/yourtheme/960.css" />

Please change yourtheme to your theme folder name. The first two lines are not necessary. But I strongly recommend you to include them.
That’s all you need to do. And as to how to use 960 GS for XOOPS theme design, it is basically the same as normal web design. Here is a tutorial from Net Tuts+.
Inspire 2.0 uses 960 GS to assist in layout design. It can make sure that the theme works well in different browsers.

2. JQuery and JQuery Tools.

XOOPS 2.4 has built-in support for JQuery. And as a designer, choosing a UI library can help with the design work. The most famous UI library is JQuery UI. However, I use JQuery Tools instead of JQuery UI. Because JQuery UI is too big and I only use 5% of the library. JQuery Tools is small (5.72KB) and provide most frequently used UI functions.
To use JQuery Tools is extremely easy, just insert the following line in the <head> part of theme.html

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>

JQuery Tools even provide a CDN service for us. And the official site has detailed documents.

3. system_homepage.html

Inspire 1.0 uses “show center block” to judge whether it’s on homepage or not. That means you have to set up a center block and display it on homepage ONLY. It’s kind of stupid you may think. But I can not find a better way to judge homepage for Inspire 1.0. I hope XOOPS future releases will provide a smarty tag for judging homepage. Anyway, as the design has changed for Inspire 2.0, making it possible to use system_homepage.html override instead of “show center block” (for Inspire 1.0, it’s not possible to use system_homepage.html, you can figure it out yourself).
system_homepage.html will override the <{$xoops_contents}> on homepage. So you can put your whatever you want to display on homepage ONLY in system_homepage.html.
But there’s a problem. XOOPS will cache system_homepage.html. If you use XOOPS tools module or other “blocks anywhere” modules to show modules blocks (e.g. latest news and latest posts) on homepage using system_homepage.html, the content will not be update timely. In other words, it will be cached. You can not adjust cache for system_homepage in the Admin panel – you have to do dirty code hack.
Open header.php in your XOOPS root folder and on about Line 92, find the following code:

$xoTheme->contentCacheLifetime = 604800;

change it into

$xoTheme->contentCacheLifetime = 0;

The cache will be turned off for system_homepage.html

4. What’s Inspire 2.0 gonna be?

The Inspire 2.0 to be released will be different from Inspire 2.0 used on XOOPS China. It is a lite version of Inspire 2.0 on XOOPS China. I will not include all of the JQuery features in the release because a lot of coding work is needed to fit it on your own webiste. And many people complain to me that Inspire 1.0 ruined their website – they don’t really understand how to use it. This time I will include minimum JQuery – Login Overlay and Use Menu only. You can apply other JQuery features by yourself. Or you may consider purchasing a theme customizing service from us.