IntroductionIf you would like a theme with the the header and the menu at the top and the content and footer below it, choose one of the hundreds of existing beautiful RapidWeaver themes available.
Outline is different. Very different. Outline is a very different, striking theme, designed by Henk Vrieselaar in 2012. Very different from any ordinary theme; a real eye-catcher. Built-in is an option for a background slideshow, with or without thumbnails, and thus Outline is very suitable for photographers to showcase their portfolio.
By pressing the tab on the left side, the content shows up. Here you can you give some info about the background pictures. Clicking the button again hides the content, so your photos are displayed again. In the Theme Styles is an option which opens the content pop-up automatically after switching pages; if you want to simplify your website and make it more friendly for less-savvy users.
Even without background pictures this theme is very clean. But again, only if you want a website different from others...
The Outline theme has innumerable options, too many to mention. Just download the free trial version and play around with all of its options. We definitely recommend you make use of the free demo version provided, because this is a specialist theme unlike a lot of other designs. Some addons do not like the popup functionality, and therefore may not work. It's your responsibility to test the theme and find the best addons that work.
Outline is fully mobile responsive, meaning that this theme is going to work well on a wide range of different web browsers and devices. The latest version of Outline now includes Font Awesome icons and the Bootstrap framework.
ResponsiveThe Internet isn’t just on your computer screen anymore. It’s also on your phone, tablet and laptop. So when you visit a modern webpage the content responds to the device on which it is being rendered. Outline is a full mobile responsive RapidWeaver theme. No more having to build multiple websites for different devices!
NavigationOutline has a jQuery fading dropdown menu. Down and right arrows show alongside the menu items with sub levels for clearer navigation through your website. On your mobile device you'll get a 'hamburger' menu icon towards the top, to toggle the menu open and close. Optional you can add Font Awesome Icons to your menu titles - enter the markup in the RapidWeaver sidebar alongside the page names.
ExtraContentOutline has five extra content areas, setup and read for use:
- ExtraContent 1 is at the top left of the browser
- ExtraContent 2 is in the left corner below
- ExtraContent 3 is in the Open/Close Tab.
- ExtraContent 4 is in the Content PopUp Panel
- ExtraContent 5 at the right side of the container.
LogoThe Logo and the site title setup to automatically link-back to the homepage of your website. There are more options to place a logo on your website, in the theme style options. By default the logo is at the right side of the container. You can also place your logo or image in one of the ExtraContent areas, for example in the ExtraContent 2 container.
ContentBy default, pressing the tab on the left side makes the main content area display as a popup. This is the main feature that makes Outline radically different to other themes on the market. You can choose between three different speeds; slow, medium or fast. An option is available in the theme style settings that will open the content pop-up automatically as the page loads.
Font Awesome IconsFor several years, Outline has supported Font Awesome Icons. We have continued to include Font Awesome icons in the theme. Newer versions now give you access to over 500 quality vector icons; free for personal and commercial use. Font Awesome Icons have a definite advantage over traditional images icons; they laid faster, can be restyled with CSS and remain crystal-sharp at any resolution.
Disable Parent LinksA common request made by many RapidWeaver users is the ability to disable links in a drop-down menu, but keep the text displayed in the menu and acting as a trigger for sub-pages. Several methods have been devised, but the best one is built into this theme. It is available via the theme style option in Theme Styles > Miscellaneous. WARNING - The pages you disable should still contain page content and links, never leave these pages blank with nothing on them. Do not use this option with websites highly dependent on achieving good SEO.
Creating a Slider with StacksThe background slider is very easy to configure with the Stacks plugin. You simply need to download and install the free Henk's Slider stack using this link. This stack requires the Stacks plugin, version 3 or above. Stacks is not included with Outline.
Install the stack into Stacks, by dragging and dropping the stack icon onto your RapidWeaver dock icon. Launch RapidWeaver and in your project file add a new Stacks page type (if you don't already have a Stacks page in your website). Open the Stacks library and search for Henk's Slider. Drag and drop a copy of the stack into your page. Click the blue '+' button to add images to your slider.
These should be images you've added to your project as Resources or already uploaded to a directory on your web server. Simply provide the links to these images. Ideally images should be less-than 500KB each, to promote faster page loading and smoother playback. Slideshow settings can be adjusted in the theme or the slideshow stack itself.
Creating a Slider Without StacksThe demo download project for Outline includes a page called Snippets. In here, you can access the code snippet needed to configure the background slider on a non-Stacks page. This is good to use for page types like the RapidWeaver blog, styled text, Markdown, HTML code or contact form. You can find the code snippet in the Page Inspector > Code > Custom Header box.
Adding a Static Background ImageOutline 2.2 (released August 2019) adds support for dragged-and-dropped RapidWeaver banner images. This offers a quick solution for getting a static image embedded as a body background. Simply drag-and-drop a suitable JPG image into the banner drop zone, within RapidWeaver. Then in the theme style settings, change the Body Background and Colours setting to RapidWeaver Banner. By default, an attractive image of a pond water surface is shown. However you can replace this image with your own. Banner images are applied as a CSS background image and stretched to fill the entire page.
MoreThe free trial version of Outline can be downloaded using this link. There is no time limit imposed on the demo version, but page navigation links are disabled in the demo version. Watermarks may appear in parts of the page (like the banner or footer). Purchasing Outline provides you with a licensed copy of Outline; without any demo restrictions applied.
Clicking this link will take you to a sample website published using Outline. This may give you a better insight into how this theme looks and behaves. If you're interested to see how the demo website was built, the same project file can be downloaded here and opened in RapidWeaver. Feel free to use this file as the basis for a new website.
If you have any other questions about Outline, please don't hesitate to get touch.