ThemeFlood.

Introduction

"This is a great theme with lots of flexibility and adaptation to suit many different types of website. The ability to use a variety of stacks makes Solstice very versatile and adaptable to the design of modern websites."Richard Wagner

Solstice is a RapidWeaver theme that celebrates the summer. This new theme uses a sultry colour scheme by default, flat design and a vivid banner container at the top for beautiful full-width panoramic photographs or other artwork. It's a theme that really captivates the outdoors, and would be a perfect choice of design for many different types of website.

Alongside a broad range of powerful theme style, colour and layout settings, Solstice incorporates a parallax-style header bar region that reduces in size when the page is scrolled. Icons can be placed on the parent links, of the animated drop-down menu. Expert RapidWeaver users can take advantage of Bootstrap 3, FreeStyle, RAFT and Font Awesome support, built directly into the theme. As you would expect, Solstice is fully responsive and displays wonderfully well across a wide range of devices and different web browsers.

Header Bar

The header bar at the top incorporates your site title, site slogan and drop-down navigation menu. You can adjust the positioning of this title bar using provided theme style settings. Fixed (default) means that the title bar always remains visible and is fixed to the top of the page. The scrolling option keeps the title bar affixed above the banner container, but allows it to scroll with the rest of the page. And the relatively positioned option simply slots the title bar in above the banner, and keeps it within the rest of the page flow. All colours applied to the title bar can be customised, together with the font faces for headings and navigation links. This header bar has a clever parallax effect applied, meaning that it will shrink-down in height as the page is scrolled.

Banner Container

Solstice comes supplied with 75 example banner background images (numbered 1.jpg - 75.jpg); which is possibly a record for an addon RapidWeaver theme. The first 30 images were all photographed by myself. The remainder of images provided were photographed by my late grandfather, and depict many summer scenes during the 1970's and 1980's (these images have been digitally reproduced from original slides). As always, you can use any of these example banner background images in your projects or use your own images in the banner instead. To use your own images, place an image in ExtraContent4 or use the FreeStyle banner technique. Your banner images will be scaled responsively and can also be enhanced with title and ALT attributes for the benefit of search engines. If no banner is required, simply omit your image or tick the 'hide banner' option in the Miscellaneous theme style settings. Another trick you can perform is to enable the Banner Content Box in the theme settings; which displays ExtraContent5 as a semi-transparent box over the banner image; great for call-to-action content above the page fold.

Navigation

This RapidWeaver theme provides you with a choice between an animated drop-down menu, a split navigation layout or a sidebar block navigation layout. Various options are provided, so that you can customise the style of your chosen navigation layout. Historically getting any sort of navigation to work on smaller screens like tablets or mobile devices is difficult; so we provide the option to switch the navigation across to a mobile-friendly toggle navigation layout on smaller screens sizes.

To incorporate icons above the parent page links, simply go to the font awesome website and choose the icons you want to use. Copy the code that looks like this:

<i class='fas fa-home'></i>

Paste this code before the name of the page, in either the RapidWeaver webpages list or page title box in the RapidWeaver Page Inspector. Use single quote marks instead of double quotation marks in the code, to maintain compatibility with site map plugins. The theme will automatically scale and centre these icons above each parent page link, and render them as an attractive rounded button, complete with CSS3 animation hover effects. Theme settings are provided, allowing you to customise the colour scheme of these optional icons. These icons will be hidden from other navigation structures in the page (except the footer navigation links). To stop the icon code showing in browser titles, simply ensure that every page in your RapidWeaver project has an appropriate browser title applied in the RapidWeaver Page Inspector. As always, ensure that CSS consolidation is enabled for the icons to work.

Single Page Websites

A unique feature of the Solstice RapidWeaver theme is the ability to create a single page website with navigation buttons that smooth-scroll you to the correct part of the page when clicked. Much of the code to achieve this is already built into the theme, so there is little work you have to do. You can view a live demo site of the singular page configuration here and download the actual project file here to copy the code or build your own smooth-scrolling website from. The smooth-scrolling effect makes use of Bootstrap Scroll Spy, so as you scroll down the page, the links change to indicate what section you are currently viewing.

Other details

Solstice uses valid HTML5 markup; for the best possible performance on modern web browsers and excellent compatibility with a wide range of RapidWeaver addons. This theme has been tested and confirmed to work reliably in all newer web browsers.

Work has been done in the theme to optimise page loading and reduce the overall bandwidth of pages. Internal theme components like stylesheets, Javascript and images have been optimised for the smallest possible file sizes. We call files like Javascript at the end of pages, so that your content loads first. This gives pages a fast and 'snappy' feel to them. jQuery Javascript code within the theme runs inside its own namespace and closure, to greatly reduce the risk of conflicts with other scripts added to pages.