This tutorial assumes your RapidWeaver theme provides built-in support for the jQuery Javascript framework. If your RapidWeaver theme does not provide built-in support for jQuery, you should add jQuery to your RapidWeaver theme.

Download PrettyPhoto

Download PrettyPhoto

Unzip the downloaded file. You should now see a “prettyPhoto/” folder. This folder contains the Javascript, CSS, and images for PrettyPhoto. Remember the location of this folder because we will need this folder for the next step.

Add PrettyPhoto as a Page Asset

If you haven’t already, open your website file in RapidWeaver and view your Photo Album page in Edit Mode. Open the Page Inspector for the Photo Album page and view the Page Inspector → Header → Assets tab. Click the “Add Files…” button, then navigate to and select the “prettyPhoto/” folder that you downloaded and unzipped earlier.

Import Javascript and CSS

Next, while still on the Page Inspector → Header panel, click the Header tab and insert the following code into the Custom Header field:

<link href="assets/prettyPhoto/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="assets/prettyPhoto/js/jquery.prettyPhoto.js"></script>

Activate PrettyPhoto

And finally, while still on the Page Inspector → Header panel, click the Javascript tab and insert the following code into the Custom Javascript field:

jQuery(document).ready(function($){
    $('.thumbnail-frame').each(function(){
        $('a',this).attr({
            'href' : $('a img',this).attr('src').replace(/thumb/i,'full'),
            'rel' : 'prettyPhoto[gallery]',
            'title' : $('.thumbnail-caption',this).text()
        });
    });
    $('a[rel^=prettyPhoto]').prettyPhoto();
});

That’s it. Preview or publish your Photo Album page and it should now use the PrettyPhoto lightbox when you click a thumbnail image.

Customize PrettyPhoto

For advanced users, you can easily customize the PrettyPhoto theme and PrettyPhoto settings by passing an object as the first parameter into the prettyPhoto() function, like this:

$('a[rel^=prettyPhoto]').prettyPhoto({
    theme : 'light_rounded',
    showTitle : false
});

You can find a complete list of PrettyPhoto options on the PrettyPhoto documentation website.

ExtraContent is a popular feature amongst RapidWeaver themes that allows you (the user) to add custom code to various locations in your RapidWeaver theme that, without ExtraContent, would otherwise be inaccessible. ExtraContent is itself Javascript code that comes built into supporting RapidWeaver themes. Not all RapidWeaver themes support ExtraContent, so check with your theme’s developer or consult your theme’s documentation to be sure.

How does ExtraContent work?

A RapidWeaver theme that supports ExtraContent will define specific ExtraContent containers throughout its layout. For example, my new Archetype RapidWeaver theme provides ExtraContent locations above the content area, above and below the sidebar, and above the footer. Each ExtraContent location is assigned a number (1, 2, 3, 4, and so on). The ExtraContent container at the top left corner of the layout will have the lowest number, usually "1", and the ExtraContent location at the bottom right corner of the layout will have the highest number.

You, the user, can insert custom code at each ExtraContent location. To do so, you must wrap your custom code in a special div element and insert that div element into the Page Inspector → Sidebar panel. Why must you place the custom code in the Sidebar panel? Because RapidWeaver does not provide the tools necessary to insert custom code elsewhere.

For example, to add <h1>Hello world!</h1> at the first ExtraContent location, you insert the following code into the Page Inspector → Sidebar panel.

    <div id="myExtraContent1"><h1>Hello world!</h1></div>

Notice the ID attribute of the div element — “myExtraContent1”. This says that <h1>Hello World!</h1> should be placed into the first ExtraContent location. To place this code into the second ExtraContent location, change the div ID attribute to “myExtraContent2”; the updated code in the Page Inspector → Sidebar panel looks like this:

    <div id="myExtraContent2"><h1>Hello world!</h1></div>

To place <p>This is more custom text</p> into the third ExtraContent location in addition to the code above, use the following code instead.

    <div id="myExtraContent2"><h1>Hello world!</h1></div>
    <div id="myExtraContent3"><p>This is more custom text</p></div>

As you can see, it is very easy to insert different code in different ExtraContent containers. You only need to create a new div element and assign it an ID attribute for the associated ExtraContent container — “myExtraContent” + the number of the ExtraContent location. The exact location for each ExtraContent container varies from theme to theme, so you should consult your theme’s documentation for this information.

It is very important that your custom ExtraContent code, including div wrappers, is rendered as HTML and not Styled Text. If you are using a Styled Text sidebar, select all of your custom ExtraContent code in the Page Inspector → Sidebar panel and choose Format → Ignore Formatting from the Main Menu. This tells RapidWeaver to render your custom ExtraContent code as HTML, not Styled Text.

More Information

This tutorial is a quick introduction to ExtraContent and how to use ExtraContent to customize your RapidWeaver website. If you need more information about ExtraContent itself, please refer to the official ExtraContent documentation.

RapidSearch is the easiest way to add powerful Google^™ search to any RapidWeaver website. RapidSearch is a RapidWeaver plugin that allows you to search for web pages, images, blog entries, and news articles from your own website or from an unlimited number of other websites. Search results are displayed immediately on your own website with your own branding.

For many RapidWeaver users, however, having a dedicated search page is not sufficient. This tutorial demonstrates how to add a RapidSearch form to your RapidWeaver website’s header, sidebar, or footer so that your website’s visitors can quickly and easily search your RapidWeaver website from any page.

Prerequisites

This tutorial assumes you have purchased RapidSearch and have added a RapidSearch page to your RapidWeaver website.

The HTML markup

First thing’s first. Here is the HTML you will need to add the search form to your RapidWeaver website. It is extremely important that you change the form’s action attribute in the following markup so that it points to your RapidSearch page using a relative or absolute URL. This markup will not work if the form’s action attribute does not point to your RapidSearch page.

<form action="http://your_website.com/path/to/your/RapidSearch/page.html" method="get">
    <fieldset>
        <input type="text" name="query" value=""/>
        <input type="submit" value="Search"/>
    </fieldset>
</form>

Add the search form

With ExtraContent

Follow these directions only if your RapidWeaver theme supports ExtraContent. Many RapidWeaver themes support ExtraContent, a feature that enables you to inject custom HTML in various locations of your website’s layout, such as the header, sidebar, or footer. These locations vary from theme to theme, so you should consult your theme’s documentation before you choose an ExtraContent location.

1. Open your website file in RapidWeaver
2. Select a page that should display the search form
3. Open the Page Inspector → Sidebar panel

After you open the Page Inspector → Sidebar panel, copy and paste the following markup into the Sidebar panel; ensure you apply Main Menu → Format → Ignore Formatting to the pasted code if your sidebar is using Styled Text formatting rather than HTML formatting. You may need to change the myExtraContent1 ID attribute of the ExtraContent container in the markup below, depending on the ExtraContent container you choose. For example, you may change the ID attribute to myExtraContent2 or myExtraContent3. Refer to your theme’s documentation for more information about the ExtraContent containers available in your theme. Also, be sure you change the form’s action attribute as I mentioned above.

<div id="myExtraContent1">
    <form action="/path/to/your/RapidSearch/page.html" method="get">
        <fieldset>
            <input type="text" name="query" value=""/>
            <input type="submit" value="Search"/>
        </fieldset>
    </form>
</div>

Without ExtraContent

Follow these directions only if your RapidWeaver theme does not support ExtraContent.

1. Open your website file in RapidWeaver
2. Select a page that should display the search form
3. Open the Page Inspector → Sidebar panel

After you open the Page Inspector → Sidebar panel, copy and paste the following markup into the Sidebar panel; ensure you apply Main Menu → Format → Ignore Formatting to the pasted code if your sidebar is using Styled Text formatting rather than HTML formatting. Without ExtraContent, this RapidSearch form can only be added to your RapidWeaver website’s sidebar.

<form action="/path/to/your/RapidSearch/page.html" method="get">
    <fieldset>
        <input type="text" name="query" value=""/>
        <input type="submit" value="Search"/>
    </fieldset>
</form>

Search your website

You will need to publish your RapidWeaver website before the new search form will work. After you publish your RapidWeaver website, open your published website in a web browser. View a page that uses the new RapidSearch form, enter a keyword in the search form, and click “Search”. Assuming you correctly changed the form’s action attribute, you will be directed to the RapidSearch page and shown a list of search results. Congratulations! Your website’s visitors can now search your website from any page — not just the dedicated RapidSearch page.

Install jQuery

Open your website file in RapidWeaver. Select a page and view its Page Inspector → Header → Header field. Insert the following code into the Header field.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

This code includes the latest jQuery framework from Google’s content delivery network. This ensures the code is minified (to reduce bandwidth) and delivered from a server closest to the website visitor’s physical location (to reduce latency).

Avoid conflicts with other Javascript frameworks

Next, we should make sure the included jQuery framework does not conflict with other Javascript frameworks already included on the current page. To do this, insert the following code into the Page Inspector → Header → Header field immediately after the code you just added (see above).

<script type="text/javascript">
    $.noConflict();
</script>

This code relinquishes the $ handle to other libraries, such as MooTools or Prototype.

Start using jQuery

Now is the fun part. Let’s write some custom code with jQuery. First, add the following Javascript inside the <script> element (see above) immediately after $.noConflict();.

jQuery(document).ready(function($){
    //add your code here
});

The Page Inspector → Header → Header tab should now read:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function($){
        //your code here
    });
</script>

Next, replace "//your code here" with your own Javascript. Although we relinquished control of the $ handle earlier using $.noConflict, we can continue to use the $ handle since the jQuery object is aliased by the .ready() callback function. That's it! Now start coding.