Envision 2

Screenshots

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

Features

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 were several theme variations removed from version 2.0?

According to my recent tests, Internet Explorer only reads up to 31 external style sheets. Subsequent external style sheets are ignored. This feature/bug partially explains why many of you experienced rendering issues with Envision 1.0 in Internet Explorer. Envision's theme variations exceeded this threshold and therefore caused Internet Explorer to ignore subsequent style sheets. To resolve this issue, I removed the "Title - Font Weight" and "Page - H1…H4 Font Size" theme variations and replaced their functionality with free RWSnippets included with Envision 2.0. I do apologize for any inconvenience this change may cause, but there is nothing more I can do to resolve this inherent browser limitation.

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, Envision 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 with Envision 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 Envision/RapdiSearch bundle at a discounted rate.

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

Yes. Envision 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 Body Background 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 body background image

You may use up to 20 header background images. Slots 1 - 10 accept JPG images and slots 11 - 20 accept PNG images.

1. Create or find an image you want to use as your body background (repeatable images work best)
2. In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)
3. Right-click on the "Envison" theme and select "Reveal Theme Contents in Finder"
4. In the resultant Finder window, place your image into /Contents/images/editable_images/layout-background-images/
5. Ensure your image is named "image1.jpg"..."image10.jpg" or "image11.png"..."image20.png". Capitalization is important. Ensure your file names use only lower-case letters.***
6. In RapidWeaver, select "Image 1", "Image 2", "Image 3", etc from the "Layout - Background Image" Theme Variations set
7. You may also select "Layout - Background Position" and "Layout - Background Repeat" settings

*** If you are using a JPG image, be sure your image has a ".jpg" extension and uses slots 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 banner images. Slots 1 - 10 accept JPG images and slots 11 - 20 accept PNG images.

1. Create or find an image you want to use as your page banner
2. Ensure the image is as tall as the "Page - Banner Height" variation setting and as wide as the "Layout - Width" variation setting
3. In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)
4. Right-click on the "Envision" theme and select "Reveal Theme 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"..."image10.jpg" or "image11.png"..."image20.png". Capitalization is important. Ensure your file names use only lower-case letters.***
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

Envsion 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. Use the following Javascript snippet anywhere on your website to call your own jQuery Javascript code.

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 code 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 "Page Inspector > Header > Header" tab in a page's Page Inspector
2. 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

Version 2 - Released on 04 Sep, 2009

• + Added "Navigation - Height" theme variation
• + Added "Navigation - Left and Right Padding" theme variation
• + Added "Blog - Colors > Read More Link" color picker
• + Added "Blog - Colors > Read More Link (Hover)" color picker
• + Added 300px, 350px, 400px options to "Header - Height" theme variation
• + Added 50px, 350px, 400px options to "Banner - Height" theme variation
• + Added IE8 compatibility
• + Fixed search icon positioning bug
• - Removed "Title - Font Weight" theme variation (see theme FAQs)
• - Removed "Page - H1 Font Size" theme variation (see theme FAQs)
• - Removed "Page - H2 Font Size" theme variation (see theme FAQs)
• - Removed "Page - H3 Font Size" theme variation (see theme FAQs)
• - Removed "Page - H4 Font Size" theme variation (see theme FAQs)
• + Added RWSnippets as substitutes for removed theme variations

Version 1 - Released on 25 Aug, 2009

Initial releaes