Envision 2

Screenshots
Here are a few screenshots of Envision. You can also view the live preview.
Features
Hybrid Menu
Envision provides a hybrid horizontal menu with vertical dropdowns that provides 1 horizontal menu level
with up to 7 vertical dropdowns. You can also control the menu dropdown opacities.
Body Background Images
Use up to 20 JPG and PNG header background images. Customize the background position and specify its
repeat direction using Theme Variations in the Page Inspector.
Page Banners
Use up to 20 JPG and PNG page banner images. Banners can be shown or hidden on a per-page basis.
You can also customize the banner height using Theme Variations.
Rounded Corners
Apply rounded corners to the layout corners and control the corner radii for
using Theme Variations in the Page Inspector.
Sidebars
Place your sidebar on the left or the right side of the website page. You can also hide the sidebar, too,
on a per-page basis.
Built-in jQuery Javascript
The jQuery Javascript library is built-in! Out-of-the-box, you immediately have access to the entire
jQuery library, and it uses "No Conflict Mode" to safely avoid conflicts with other Javascript libraries.
Built-in RapidSearch Form
Use the built-in RapidSearch
form to quickly and easily add site-wide Google search to your Envision website. RapidSearch is sold separately or in a bundle.
Built-in PrettyPhoto Lightbox
The PrettyPhoto Lightbox plugin is built-in!
Out-of-the-box, you can quickly and easily create galleries and slideshows with photos, videos, Flash movies, and external websites.
See an example gallery
Supports JS-Kit Echo Comments
Envision supports JS-Kit's Echo comment system out-of-the-box. Enjoy real-time conversation
among various social graphs from your Envision website.
Learn more about Echo
Color Pickers & Variations
Envision provides a ton of color pickers and theme variations for almost every layout element so you can
quickly customize every aspect of your website.
Theme Styles
Envision provides 3 theme styles to help get you started. Use these Theme Styles as a jumping off point
to quickly and easily customize your own Flex website.
Supports RapidWeaver 4
Envision works with RapidWeaver 4 and supports all of the latest RapidWeaver 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
Layout - Width
- 700px
- 800px
- 900px (Default)
- 1000px
- 1100px
- 1200px
Layout - Font Family
- HelveticaNeue-Light (Default)
- HelveticaNeue
- Helvetica
- Georgia
- Times
- Lucida
- Verdana
- Trebuchet MS
Layout - Base Font Size
- 11px
- 12px (Default)
- 13px
- 14px
Layout - Corner Radius
- 0px
- 2px
- 4px
- 6px
- 8px
- 10px (Default)
Layout - Colors
- Background
Layout - Background Image
- None (Default)
- Image 1 (JPG) ... Image 10 (JPG)
- Image 11 (PNG) ... Image 20 (PNG)
Layout - Background Repeat
- No Repeat (Default)
- Repeat X
- Repeat Y
- Repeat X and Y
Layout - Background Position
- Top Left
- Top Center
- Top Right
- Bottom Right
- Bottom Center
- Bottom Left
Header - Title Font Size
- 12px
- 18px
- 24px
- 36px
- 48px
- 60px (Default)
- 72px
Title - Font Family
- HelveticaNeue-Light (Default)
- HelveticaNeue
- Helvetica
- Georgia
- Times
- Lucida
- Verdana
- Trebuchet MS
Header - Slogan Font Size
- 12px
- 18px (Default)
- 24px
- 36px
- 48px
- 60px
- 72px
Header - Height
- Auto (Default)
- 50px
- 100px
- 150px
- 200px
- 250px
- 300px
- 350px
- 400px
Navigation - Tab Font Size
- 12px
- 14px (Default)
- 16px
- 18px
- 20px
Navigation - Gradient
- Show (Default)
- Hide
Navigation - Dropdown Opacity
- 100% (Default)
- 95%
- 90%
- 85%
- 80%
- 75%
- 70%
Header / Navigation - Colors
- Title
- Slogan
- Tab Link
- Tab Link (Hover)
- Tab Link (Current)
- Menu Background
- Submenu Link
- Submenu Link (Hover)
- Submenu Link (Current)
- Submenu Link Background
- Submenu Link Background (Hover)
- Submenu Link Border
- Submenu Border
Page - Title
- Show (Default)
- Hide
Page - Banner Image
- None (Default)
- Image 1 (JPG) ... Image 10 (JPG)
- Image 11 (PNG) ... Image 20 (PNG)
Page - Banner Height
- 50px
- 100px
- 150px
- 200px (Default)
- 250px
- 300px
- 350px
- 400px
Page - Colors
- Title
- Text
- H1
- H2
- H3
- H4
- Link
- Link (Hover)
- Strong / Bold
- Em / Italic
- Code
- Blockquote
- Blockquote Border
- Insertion
- Deletion
- Breadcrumb Link
- Breadcrumb Link (Hover)
- Section Top Border
- Background
Sidebar - Position
- Left
- Right (Default)
- Hide
Sidebar - Font Size
- 11px
- 12px (Default)
- 13px
- 14px
Sidebar - Colors
- Title
- Text
- Link Text
- Link Text (Hover)
- Link Background
- Link Background (Hover)
- Link Border
- Section Top Border
- Background
Search Form - Visibility
- Show (Default)
- Hide
Search Form - Colors
- Section Top Border
- Text Field Border
- Background
Footer - Colors
- Text
- Link
- Link (Hover)
- Background
Blog - Colors
- Entry Title
- Entry Title (Hover)
- Entry Meta Text
- Entry Meta Link
- Entry Meta Link (Hover)
- Read More Link
- Read More Link (Hover)
Photo Album - Colors
- Thumbnail Caption
- Thumbnail Border
- Fullsize Page Header Background
- Fullsize Page Body Background
- Fullsize Page Title
- Fullsize Page Caption
- Fullsize Page Text
- Fullsize Page Link
- Fullsize Page Link (Hover)
- Fullsize Page Photo Border
Photo Album - Grid Spacing
- 12px
- 18px (Default)
- 24px
- 36px
- 48px
File Sharing - Colors
- Link
- Link (Hover)
- Description
Movie Album - Colors
- Thumbnail Caption
- Thumbnail Border
- Popup Caption
- Popup Background
Movie Album - Grid Spacing
- 12px
- 18px (Default)
- 24px
- 36px
- 48px
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
- Download your purchase to your computer. This will be a ZIP file.
- Double-click the downloaded ZIP file to expand its contents.
- Double-click the .rwtheme or .rwplugin file that was in the ZIP file.
- 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
- RapidWeaver 3.6+ (4.0+ recommended)
- 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.
- Create or find an image you want to use as your body background (repeatable images work best)
- In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)
- Right-click on the "Envison" theme and select "Reveal Theme Contents in Finder"
- In the resultant Finder window, place your image into /Contents/images/editable_images/layout-background-images/
- 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.***
- In RapidWeaver, select "Image 1", "Image 2", "Image 3", etc from the "Layout - Background Image" Theme Variations set
- 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.
- Create or find an image you want to use as your page banner
- Ensure the image is as tall as the "Page - Banner Height" variation setting and as wide as the "Layout - Width" variation setting
- In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)
- Right-click on the "Envision" theme and select "Reveal Theme Contents in Finder"
- In the resultant Finder window, place your image into /Contents/images/editable_images/page-images/
- 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.***
- 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
- You will need an activated copy of RapidSearch to use the built-in search form
- Create a new RapidSearch page at the top level of your website's page hierarchy
- View the "General" tab in the RapidSearch page's Page Inspector window
- Set the "Filename" text field to "index.html"
- Set the "Folder" text field to "search"
- 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:
- Open the "Page Inspector > Header > Header" tab in a page's Page Inspector
- Insert the necessary
<script>tags and publish the page
How to use the built-in Pretty Photo lightbox gallery
For a Styled Text page
- Create a Styled Text page
- Open the Page Inspector for this page and view the "Header" tab
- Upload a page asset (an image file, a SWF file, or a MOV file)
- Enter and select some text on the Styled Text page
- With the text selected, click the "Add Link" icon (located at the bottom left of the Styled Text page in Edit Mode)
- Click on the drop-down box and select "Asset -> [Name of Asset]"
- Next, click "Custom Attributes" to reveal the advanced settings
- Click the "+" icon to add a new custom attribute
- Set the new attribute "key" to "rel"
- Set the new attribute "value" to "prettyPhoto"
For an HTML page
- Create an HTML page
- Open the Page Inspector for this page and view the "Header" tab
- Upload a page asset (an image file, a SWF file, or a MOV file)***
- 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


































