Ralfs Simple Theme

Diese Seite gibt es auch auf deutsch!

Description

It is not the primary target of this theme, to give you a world class design, but provide you with a theme that seamlessly integrates my solutions for using Lightbox JS and HaloScan comments in a better way. Even so I hope the theme is acceptable in the way it looks like.
My theme based on the Tiger theme that is shipped with RapidWeaver.

The theme is free for private an commercial use. A link to my page would be nice and donations are welcome (Use the button in the sidebar).

New additional theme version with PopUp Menu
The theme package now comes with two versions of the theme. The allready known version with a regular menu in the sidebar, and a new version with a PopUp Menu in the top bar.
RapidWeaver 3.6 Update
The theme is ready for use with RapidWeaver 3.6. The new theme styles are supportet for free choice of colors. The new list and blog features are supported also.
Because RapidWeaver is having inline comments now, the comment retrieval via AJAX is disabled for the permalink pages.
A tiny new feature of RapidWeaver is making the usage of lightbox in "normal" pages verry easy (as long as lightbox is included in your theme). A mini tutorial will explain how later on this page.

Functions

As I mentioned bevore, the integration of my two solutions are the special thing about this theme. This means:

  • RapidWeaver Photoalbums are using Lightbox JS automatically.
  • It is easy to use Lightbox on usual pages.
  • Only two lines of JavaScript code are required to show HaloScan comments directly on a blog page.
Furthermore the theme itself has the folowing variations:
  • 2 Theme versions: One with a regular menu in the sidebar, one with a PopUp Menu in the top bar.
  • Icons: Green, blue, orangee
  • Sidebar: left, right, hidden
  • Width: 600, 680, 1000 und flexibel
  • Colors: free of choice through theme styles
  • All new RapidWeaver 3.6 features are supported

Installation

To install the theme, simply double click the theme file or drop it do the "~/Library/Application Support/RapidWeaver" folder manually.
All required librarys and files are allready included in the theme file. That are:

  • Prototype 1.5.0
  • Sriptaculous 1.7.0
  • Lightbox JS 2.02
I hope I don't violate an licensing terms by bundling all of this libraries and frameworks with my theme. As far as I understood their terms, I don't. But if I, please leave me an info!

Usage

The general usage of a theme file is known as I think, so I will only describe the special features.

Lightbox JS
The Lightbox Effect is enabled for all RapidWeaver Photoalbums by default. Since RapidWeaver 3.6 it is possible to define a "rel" tag for a link. This way it has become verry easy to add the Lightbox Effekt even to a single photo that is on a styled text page.

  1. Insert an image to a page and set the properties as usual.

  2. Add the highres image to the page as an asset. The highres image must have the proper dimensions to be displayed in the lightbox.



  3. Now select the preview image on the page an press the "Add Link" button. Select the highres image asset from the dropdown list and enter "lightbox" into the "rel" field.

Thats it! Now the image should be opened inthe lightbox.

HaloScan Comments

NOTICE! You need to have PHP enabled on your server, so you can't use this with .mac!

This is the reason why it is not enabled by default, but it is verry simple to activate it:
Open the page inspector [Shift + Command + i]. In the "Page Header" section enter the following code into the CustomJavascript field:
var pageId = 'PAGE_ID';
onloads.push(getHaloComments);
Replace the term PAGE_ID with the unique page id of the blog page used by RapidWeaver. If you don't know it, you can explore the code view ([alt + command + u]) of the blog page to find it.
The second line is needed to autmatically call the JavaScript function when the page has loaded.
For the automatic detection of the HaloScan Username, the comments feed RSS link is required in the sidebar, so be sure to have it enabled!
  • The images of the close button and the load progress did not appear in RapidWeavers preview.
    In preview mode the automatic detection of the root path didn't work, so the images can't be found. If you export this stuff it will work correctly.
  • The comments of my blog entries didn't appear in RapidWeavers preview mode.
    The solution to display the comments uses a PHP Script to retrieve the comments. Even if PHP is supportet in RapidWeaver pages if it is embedetd, it is not supported in external files. When you export the page to a server it will work.
  • The images of the photoalbum are not displayed in the lightbox, the usual RapidWeaver HTML view is called instead.
    In some cases the automatic "onload" of the lightbox function won't work. In most of this cases the hint from the lightbox support section will help: Just add the ligthbox function explicitly to the "onload" machanism of the page by entering the following line of code to the "Custom JavaScript" field in "Page Header" section of the page inspector:
    onloads.push(initLightbox);
  • The images of the photoalbum are not displayed in the lightbox, the plain image is displaey instead.
    The lightbox effect start working when the page has fineshed loading. If you click on an image while the page ist still loading, the lightbox effect won't appear. This is an general lightbox issue.
  • Not all of the comments are displayed on the blog page.
    Due to the limitations of the comments feed, only the 10 newest comments will be provided by the feed. So only the newest 10 comments can be displayed on the blog page.

Screenshots