Archetype

Overview

Archetype is a new standard for RapidWeaver themes. My Archetype RapidWeaver theme is carefully hand-crafted with W3C standards compliant HTML 5 and CSS 3 code that is compatible with modern web browsers including Safari, Chrome, Firefox, Internet Explorer 7, Internet Explorer 8, and Internet Explorer 9. Here is a brief overview of my new Archetype RapidWeaver theme:

• W3C standards compliant markup
• HTML 5 and CSS 3 state-of-the-art code
• Four (4) ExtraContent locations for your custom code
• Horizontal navigation with up to seven (7) drop-down and fly-out submenus
• Up to thirty (30) custom background images (PNGs)
• Up to thirty (30) custom banner images (JPGs)
• Left, right, or hidden sidebar with optional sidebar navigation

• Sidebar navigation with links to siblings of the current page
• Three (3) built-in Theme Styles to help you start customizing your website
• Color pickers for almost every layout element
• Built-in jQuery Javascript framework using Google's CDN
• Built-in Modernizr Javascript framework
• Built-in RapidSearch form for site-wide Google search
• Supports Safari, Chrome, Firefox, IE7, IE8, and IE9

“Extra Content” Support

Archetype supports ExtraContent, a popular RapidWeaver feature that allows you to insert custom code at various locations of your RapidWeaver website that are otherwise inaccessible. Refer to the User Guide for more information about ExtraContent and Archetype.

Built-in RapidSearch Form

Archetype has a built-in RapidSearch form so you can easily add Google search to your Archetype RapidWeaver website. The form is located in the header so it remains visible even if the sidebar is hidden. You can hide this search form on a page-by-page basis.

jQuery Support

Archetype includes the jQuery 1.4.2 Javascript framework so you can start adding cool effects and progressive enhancements to your RapidWeaver website out-of-the-box. The bundled jQuery framework is included from Google's content delivery network to reduce bandwidth and latency.

RapidWeaver Plugin Compatibility

My Archetype RapidWeaver theme is compatible with many of the most popular 3rd party RapidWeaver plugins, including but not limited to:

System Requirements

• RapidWeaver 3.6+ (4.0+ recommended)
• Javascript-enabled web browser

By purchasing this product you agree to its license agreement.

Screenshots

Live Preview

View a real, live website that uses the Archetype RapidWeaver theme.
Launch Preview Website

Theme Variations

User Guide

How to use a custom background image

You may use up to 30 background PNG images. The top of each background image will be aligned flush with the bottom of the main navigation menu. Each background image will also be repeated horizontally. Background images are perfect for adding transparent, repeating patterns to your Archetype website's background. You can preview the three included background images as examples.

1. Create or find an image you want to use as your body background. Transparent, repeatable images will work best. Your image must be a PNG image with a .png file extension.
2. In RapidWeaver, open your website file and view the Themes panel (View → Show Themes).
3. Right-click on the Archetype theme and select Reveal Theme Contents in Finder.
4. In the resultant Finder window, place your image into
   /Contents/images/editable_images/.
5. Ensure your image is named background1.png…background30.png. Capitalization is important. Ensure your file names use only lower-case letters.
6. In RapidWeaver, select Background 1, Background 2, Background 3, etc from the Website - Background Image options in the Theme Variations panel.

How to use a custom banner image

You may use up to 30 banner JPG images. The banner image must be a JPG image with a .jpg file extension. The banner image will appear immediately above the main content and sidebar.

1. Create or find an image you want to use as your page banner. Your image must be 40px less than the selected Website - Width in the Theme Variations panel. Your image must be 180px tall.
2. In RapidWeaver, open your website file and view the Themes panel (View → Show Themes).
3. Right-click on the Archetype theme and select Reveal Theme Contents in Finder.
4. In the resultant Finder window, place your image into
   /Contents/images/editable_images/.
5. Ensure your image is named image1.jpg…image30.jpg. Capitalization is important. Ensure your file names use only lower-case letters.
6. In RapidWeaver, select Banner 1, Banner 2, Banner 3, etc from the Website - Banner Image options in the Theme Variations panel.

How to use ExtraContent

Archetype is my first RapidWeaver theme to include support for ExtraContent. You can insert custom code into four additional locations in your Archetype RapidWeaver website:

• Location 1: Top of your main content area
• Location 2: Top of your sidebar
• Location 3: Bottom of your sidebar
• Location 4: Below both the content and sidebar, above the footer

You can read my ExtraContent tutorial to learn how to use ExtraContent.

How to use the built-in RapidSearch form

You need my RapidSearch plugin for RapidWeaver to use the built-in search form. The built-in search form will not become functional until you publish your RapidWeaver website.

1. Create a new RapidSearch page at the top level of your website's page hierarchy.
2. View the Page Inspector → General tab for the RapidSearch page.
3. Set the Filename to "index.html".
4. Set the Folder to "search".
5. Ensure you correctly set the Base URL in the Site Setup panel.
6. For each page in your website that should display the RapidSearch form, view the
   Page Inspector → Styles tab and set Header - Search Form to "Show".

Frequently Asked Questions

Does Archetype support ExtraContent?

Yes. Archetype provides four (4) ExtraContent locations. Please refer to the user guide for more information. You can also read my ExtraContent tutorial to learn how to use ExtraContent.

Will HTML 5 and CSS 3 work in my web browser?

Yes. Archetype was hand-crafted using modern HTML 5 and CSS 3 code. Archetype will work in Safari, Chrome, Firefox, IE7, IE8, and IE9. Several CSS 3 features, such as rounded corners and shadows, will degrade gracefully in IE.

Does Archetype work in Internet Explorer 6?

No, I am no longer supporting Internet Explorer 6.

Why do rounded corners not work in Internet Explorer?

Internet Explorer does not support the border-radius CSS property.

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.

I am already using MooTools, Prototype, or Scriptaculous. Will there be a conflict with the built-in jQuery library?

No. Archetype comes bundled with the latest jQuery library in "No Conflict" mode. This ensures it will play nice with any other Javascript libraries you may already be using.