Flex 1

Screenshots

Here are a few screenshots of Flex. You can also view the live preview.

Features

Built with web standards in mind

Flex was built with web standards in mind. Flex uses the XHTML 1.0 Strict DTD, and you can use color pickers to style a, p, em, i, strong, b, blockquote, cite, code, ins, del, and more!

Web Browser Support

• Safari
• Firefox
• Chrome
• Internet Explorer 8
• Internet Explorer 7
• Internet Explorer 6

***Rounded corners do not work in Internet Explorer. Transparent PNGs do not work in Internet Explorer 6.

Theme Variations

Frequently Asked Questions

Why do PNG images not work in Internet Explorer 6?

I will no longer support PNG image transparency in IE6. This browser is 8 years old, and there is no excuse for continuing to it. However, Flex will otherwise display as expected.

Why do rounded corners not work in Internet Explorer?

Internet Explorer does not support the border-radius CSS property. I use this CSS property in Flex to provide end users the ability to customize the theme layout using Theme Variations. There are Javascript libraries that enable rounded corners in Internet Explorer, but they provide too much overhead and are not as flexible or customizable for the end user.

Will I need RapidSeach to use the built-in search form?

Yes. You can purchase RapidSearch on my website for an additional USD $15.00. You can also purchase the Flex/RapdiSearch bundle at a discounted rate.

I am already using MooTools, Prototype, or Scriptaculous. Will Flex still work?

Yes. Flex comes bundled with jQuery 1.3.2 in "No Conflict" mode. This ensures it will play nice with any other Javascript libraries you may already be using.

Documentation

Installation

1. Download your purchase to your computer. This will be a ZIP file.
2. Double-click the downloaded ZIP file to expand its contents.
3. Double-click the .rwtheme or .rwplugin file that was in the ZIP file.
4. Restart RapidWeaver.

Table of Contents

• System Requirements
• Custom Header Images
• Custom Banner Images
• How to use built-in search form
• How to use built-in jQuery library
• How to use built-in PrettyPhoto lightbox

System Requirements

1. RapidWeaver 3.6+ (4.0+ recommended)
2. Javascript-enabled web browser

How to use a custom header image

You may use up to 20 header background images with Flex. There are 10 slots for JPG images and 10 slots for PNG images.

1. Create or find an image you want to use as your header background (repeatable images work best)
2. In RapidWeaver, open your website file and view the Theme Library panel
3. Right-click on the "Flex" theme and select "Reveal Contents in Finder"
4. In the resultant Finder window, place your image into /Contents/images/editable_images/header-background-images/
5. Ensure your image is named "image1.jpg", "image2.jpg", "image3.jpg", etc***
6. In RapidWeaver, select "Image 1", "Image 2", "Image 3", etc from the "Header - Background Image" Theme Variations set
7. You may also select "Header - Background Position" and "Header - Background Repeat" settings

*** If you are using a JPG image, be sure your image has a ".jpg" extension and uses slot 1 - 10. If you are using a PNG image, be sure your image has a ".png" extension and uses slot 11 - 20.

How to use a custom page banner image

You may use up to 20 banners with Flex. There are 10 slots for JPG images and 10 slots for PNG images.

1. Create or find an image you want to use as your page banner
2. Ensure the image is 200px tall and as wide as the selected layout width
3. In RapidWeaver, open your website file and view the Theme Library panel
4. Right-click on the "Flex" theme and select "Reveal Contents in Finder"
5. In the resultant Finder window, place your image into /Contents/images/editable_images/page-images/
6. Ensure your image is named "image1.jpg", "image2.jpg", "image3.jpg", etc***
7. In RapidWeaver, select "Image 1", "Image 2", "Image 3", etc from the "Page - Banner Image" Theme Variations set

*** If you are using a JPG image, be sure your image has a ".jpg" extension and uses slot 1 - 10. If you are using a PNG image, be sure your image has a ".png" extension and uses slot 11 - 20.

How to use the built-in search form with RapidSearch

1. You will need an activated copy of RapidSearch to use the built-in search form
2. Create a new RapidSearch page at the top level of your website's page hierarchy
3. View the "General" tab in the RapidSearch page's Page Inspector window
4. Set the "Filename" text field to "index.html"
5. Set the "Folder" text field to "search"
6. In the "Styles" tab of the Page Inspector for any page, set the "Search Form - Visibility" variation to "Show"

How to use the built-in jQuery 1.3.2 Javascript library

Flex includes a built-in and minified copy of jQuery 1.3.2 for your convenience. This copy of jQuery does not use the "$" namespace by default; I have enabled "No Conflict" mode so that it plays nice with other Javascript libraries you may already be using. To use jQuery with Flex, use the following Javascript snippet anywhere on your website.

jQuery(document).ready(function($){
	alert('Insert your Javascript here. You may now safely use the $ namespace.');
});

If you paste this snippet into a Styled Text page or sidebar, be sure you also highlight the Javascript and select "Format -> Ignore Formatting" from the "Format" menu. To include custom jQuery plugins, you can insert the necessary <script> tags like this:

1. Open the "Header" tab in a page's Page Inspector
2. On the "Header" tab, select the "Header" sub-tab
3. Insert the necessary <script> tags and publish the page

How to use the built-in Pretty Photo lightbox gallery

For a Styled Text page

1. Create a Styled Text page
2. Open the Page Inspector for this page and view the "Header" tab
3. Upload a page asset (an image file, a SWF file, or a MOV file)
4. Enter and select some text on the Styled Text page
5. With the text selected, click the "Add Link" icon (located at the bottom left of the Styled Text page in Edit Mode)
6. Click on the drop-down box and select "Asset -> [Name of Asset]"
7. Next, click "Custom Attributes" to reveal the advanced settings
8. Click the "+" icon to add a new custom attribute
9. Set the new attribute "key" to "rel"
10. Set the new attribute "value" to "prettyPhoto"

For an HTML page

1. Create an HTML page
2. Open the Page Inspector for this page and view the "Header" tab
3. Upload a page asset (an image file, a SWF file, or a MOV file)***
4. Create a hyperlink and assign it an "rel" attribute, as shown immediately below

<a href="path/to/asset" title="Asset Title" rel="prettyPhoto">Link text or thumbnail</a>

***The "href" attribute does not need to be to an asset on the given page. It can be any relative or absolute URI to any asset available on the World Wide Web. You can learn more by watching my advanced Pretty Photo tutorial on my website. You can also learn more about Pretty Photo at the PrettyPhoto website.

Release Notes

None available