ThemeFlood.

Introduction

XXL (also sometimes referred to as extra extra large) is a stunning RapidWeaver theme, formally designed by Henk Vrieselaar. If you're looking for a highly customisable, mobile responsive theme that sports full-screen background slideshows, then look no further than XXL! This theme really is something quite special and unlike much else. For building artwork or photography portfolio websites, XXL is perfect for the job.

XXL has quite a long history. Original versions were fixed-width and non-responsive. A couple of additional 'speciality' versions became available; which had variations to the navigation layout or background content. There were various versions named things like 'XXL-2, XXL2-r', XXL2r-Flickr and suchlike. In recent times, we have merged all the best features from these different themes into one single, simple theme named XXL. This new version of XXL is easy to use, fully mobile responsive, features a simple navigation layout and includes the infamous background slideshow.

Allan Hjorth: "Most web pages we perceive in automatic zombie mode: visually, they all follow expected and habitual patterns. In other words: in the visual perceptual structure they all look alike.

XXL takes us out of the automatic perceptual patterns. Maybe, the strength of XXL is precisely this: we actually have to look at the page with "new eyes", because our "automatic mode" is interrupted. It definitely feels different."

As you can see from the live demo site, XXL really makes an impact! It's a lovely theme to work with. These completed webpages work reliably in all modern web browsers and across various devices. XXL will undoubtedly save you a huge amount of time and money; in trying to custom-build something similar with a blank theme and third-party addons. Lots of style and colour setting exist in XXL, so you can make it look like your own! Plus the theme includes a few 'pro' features, like the complete Bootstrap framework and Font Awesome Icons.

Setup with Stacks

The 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 XXL.

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.

Not using Stacks? No problem!

The demo download project for XXL 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.

Displaying a Single Background Image

Just use either of the two slideshow methods above, but only include a single image in your slider. In the stack settings, you can turn-off slideshow options like navigation, captions and progress indicators. The slideshow plugin (built into the theme) will now load your single image.

Version 5 of XXL introduces a few other ways of applying a static background image:

Drag and drop banner
As the name suggests, you can drag-and-drop a suitable image into the Banner box, within the RapidWeaver page inspector. This image will get applied to the page background. The image is enlarged to fill the whole page; with the widest side being cropped to fit. An image of 2000px square is recommended, however you are welcome to deviate from these suggested sizes. To keep pages loading fast, it is recommended you keep the image size less-than 400KB. Only RapidWeaver 7 and above supports dragged and dropped images in themes.

CSS background
XXL has 15 sample images included, which you are welcome to use. To apply a background using CSS and one of the sample images, use one of these CSS code snippets in the RapidWeaver custom CSS box:

html { background-image: url(../rw_common/themes/flood/images/editable_images/1.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/2.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/3.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/4.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/5.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/6.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/7.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/8.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/9.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/10.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/11.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/12.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/13.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/14.jpg); }
html { background-image: url(../rw_common/themes/flood/images/editable_images/15.jpg); }

Any of the above code snippets can be modified to include a link to your own background image, instead of an image stored within the theme.

ExtraContent

ExtraContent allows you to add more content then RapidWeaver typically allows. There are 6 ExtraContent areas in the XXL theme:

• EC1 is at the top of the page, great for adding your social icons, date, time or whatever
• EC2 is just above the footer
• ExtraContent3 is below the footer
• ExtraContent4 is above the menu. Nice for a short message, social icons or a search box
• ExtraContent5: don’t use this area for text, only for a banner image, slideshow or video in your content
• ExtraContent6: at the bottom right side of the page. Great for adding a button stack, social icons or a search box. Or put the footer text here.

Sidebar

The sidebar container holds your block page navigation links and optional sidebar content. Added in XXL version 5, the sidebar can now be floated either left or right of the main content container using CSS Flexbox. Additionally you can choose to have the sidebar displayed either above or below the main content container on mobile screen sizes.

Navigation

The simple 'block' navigation links XXL uses makes for an exceptionally easy and user-friendly website for site users. In this theme, navigation links are not hidden behind buttons or only available on mouseover. A user can instantly see where they are in the website and click onto subsequent pages.

Responsive Design

The traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. Rest assured, XXL is a fully responsive theme that looks and works great across a wide range of devices and modern web browsers. Using a theme like XXL, you no longer need to build multiple websites for different screen sizes.

Logo

The Logo and site title have a link with the homepage of your website. By default the logo is above the Title. Optional you can put it at the right side of the Title and Slogan. Add a logo image in the normal way, through the RapidWeaver site settings.

Font Awesome

As mentioned already, XXL includes the complete Font Awesome Icon library (the current version is shown in the theme details on this page). With Font Awesome you have over several hundred icons at your disposal, in any colour and any size you like. And they are completely free for commercial use. No extra addons or plugins need to be purchased, to use basic Font Awesome icons in XXL.