UA-78503712-1 Advents Past | Claremont United Methodist Church

…an inclusive community
responding to God’s love…

Under construction!

Past Advents

at Claremont UMC

2016

Stacks Image 112
Stacks Image 114
Stacks Image 116

Christmas 2016 — Christmas Eve Worship

… with lessons …

%[if %("%id=append%" == "true")% ]%
%[endif]%
%[if %("%id=freestyle_type%" == "gettingstarted")% ]%

Welcome to FreeStyle!

Introduction

In the old days, banners in RapidWeaver typically consisted of fixed height boxes with a CSS background image applied through the theme style settings. The problem with this method was that users were typically tied to whatever settings the theme provided, and options for creativity were rather limited. Then something called 'responsive web design' came along in 2012, and people needed banners that were also fully flexible; in response to the 40% or so of handheld/mobile traffic arriving at some websites.

We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.

Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.

This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.

Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.

Getting started

In the stack settings over on the right, choose the type of banner you want to setup from the Template popup menu. This will load one of several ready-made templates. Each template displays a different set of instructions, together with configurable options relevant to what you're building. Just follow the instructions carefully on the screen, enter your code or content and hit publish to see the results.

Start building RapidWeaver theme banners the easier and smarter way!

%[endif]% %[if %("%id=freestyle_type%" == "blank")% ]% %[if edit]%

FreeStyle - Blank Template

%[endif]%
%[if edit]%

Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "static_image")% ]% %[if edit]%

FreeStyle - Static Image Template

%[endif]% %[if %("%id=image_src%" == "local_image")% ]%
%[endif]% %[if %("%id=image_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=image_src%" == "local_image")% ]% %[if edit]%

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %[if edit]%

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "splash")% ]% %[if edit]%

FreeStyle - Splash Template

%[endif]% %[if %("%id=splashimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "jumbotron")% ]% %[if edit]%

FreeStyle - Jumbotron Template

%[endif]% %[if %("%id=jumbotronimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=jumbotronimage_src%" == "local_image")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "slider")% ]% %[if edit]%

FreeStyle - BX Slider Template

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]%
  • Stacks Image 122
  • Stacks Image 125
  • Stacks Image 128
  • Stacks Image 131
  • Stacks Image 134
  • Stacks Image 137
  • Stacks Image 140
  • Stacks Image 143
  • Stacks Image 146
%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).

Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]%
  • Banner 1
  • Banner 2
  • Banner 3
  • Banner 4
%[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:

<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Images can be attached to your project and referenced as RapidWeaver resources:

<li><img src='http://claremontumc.net/resources/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://claremontumc.net/resources/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic3.jpg' alt='Picture 3' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Or you can use example images bundled in the theme already:

<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "googlemap")% ]% %[if edit]%

FreeStyle - Google™ Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to google.com/maps in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the cog icon at the bottom of the screen. Select Share and Embed Map from the menu
  • In the new modal window that opens, click on the Embed Map tab
  • Set the map size to Custom. Set the width to 1500px and the height to 600px or thereabouts*
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the map. It will look something like this: https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5205174.633627887!2d-3.7632390876009407!3d50.430125479655565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1386361228260
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "openstreetmap")% ]% %[if edit]%

FreeStyle - Open Street Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to openstreetmap.org in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the share icon on the right of the screen
  • If you want to display a map pin, click the Include marker option and drag the pin into position
  • On the share tabs, click the HTML option
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the iFrame code. It will look something like this: http://www.openstreetmap.org/export/embed.html?bbox=-4.046230316162109%2C50.48511856761413%2C-4.003958702087402%2C50.507886381012156&layer=mapnik&marker=50.496503846052356%2C-4.025094509124756
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing*
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "dailymotion")% ]% %[if edit]%

FreeStyle - Dailymotion Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:

  • Go to dailymotion.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Export tab under the video. In the settings, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.dailymotion.com/embed/video/xcir20, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "html5video")% ]% %[if edit]%

FreeStyle - HTML5 Video Template

%[endif]%
%[if !edit]%%[endif]%
%[if edit]%

Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:

  • Use free software like Miro Video Converter to convert your media into web-safe .mp4, .ogv and .webm formats
  • Upload these converted files to your web server or an online warehouse (like Amazon S3)
  • Double-click the HTML code box above and edit the code to point to your audio or video in the required formats
  • Adjust the aspect ratio setting to increase the proportionate height of the video container and poster image
  • Change any of the video options shown in the settings on the right, like the poster frame, autoplay, looping, controls and preloading

The opening and closing <video> tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "kickstarter")% ]% %[if edit]%

FreeStyle - Kickstarter Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:

  • Go to kickstarter.com in your desktop web browser and navigate the website to find the project video you want to embed
  • Click on the Share button under the video. In the new window that opens, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.kickstarter.com/projects/doublefine/double-fine-adventure/widget/video.html, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "ted")% ]% %[if edit]%

FreeStyle - TED Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:

  • Go to ted.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Embed button under the video. In the modal window that opens, set the video size to the maximum possible
  • In the Embed this video box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://embed.ted.com/talks/allan_savory_how_to_green_the_world_s_deserts_and_reverse_climate_change.html, that would be the URL to use
  • Paste this URL into the configurable options on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vine")% ]% %[if edit]%

FreeStyle - Vine Video Template

%[endif]%
%[if edit]%

Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:

  • Open the Vine video in your web browser
  • On the lefthand side, click on the Embed button
  • From the embed options, choose the Simple or Postcard options (postcard displays the Vine username, title and description below the video)
  • Set the video to the desired size (normally 600px wide is best for websites). It's recommended that audio is prevented from auto-playing
  • Copy the embed code provided. Paste it into the HTML code box above
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vimeo")% ]% %[if edit]%

FreeStyle - Vimeo™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to vimeo.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letters or numbers sometimes in mixed case. So if the video URL was https://vimeo.com/877053, its ID would be 877053.
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "youtube")% ]% %[if edit]%

FreeStyle - YouTube™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to youtube.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letter and numbers in mixed case. So if the video URL was https://www.youtube.com/watch?v=2YjY_A8g_FA, its ID would be 2YjY_A8g_FA. In other words, the string of letters and numbers after v= is the video ID
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing ?autoplay=1 will cause the video to start playing automatically as the page loads. You can have a video start at a particular point, hide the player controls, loop the video, display a playlist and various other things. See the YouTube developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "calltoaction")% ]% %[if edit]%

FreeStyle - Call To Action Template

%[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]%
%[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=overlay_display%" == "block")% ]% %[if edit]%

FreeStyle Overlay

%[endif]%
%[endif]% %[if %("%id=freestyle_type%" == "hashtag")% ]%
%[if edit]%

FreeStyle - Hashtag Template

%[endif]% %[if %("%id=hashtagimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=hashtagimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]%
%[if %("%id=append%" == "true")% ]%
%[endif]%

… and carols …

%[if %("%id=append%" == "true")% ]%
%[endif]%
%[if %("%id=freestyle_type%" == "gettingstarted")% ]%

Welcome to FreeStyle!

Introduction

In the old days, banners in RapidWeaver typically consisted of fixed height boxes with a CSS background image applied through the theme style settings. The problem with this method was that users were typically tied to whatever settings the theme provided, and options for creativity were rather limited. Then something called 'responsive web design' came along in 2012, and people needed banners that were also fully flexible; in response to the 40% or so of handheld/mobile traffic arriving at some websites.

We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.

Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.

This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.

Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.

Getting started

In the stack settings over on the right, choose the type of banner you want to setup from the Template popup menu. This will load one of several ready-made templates. Each template displays a different set of instructions, together with configurable options relevant to what you're building. Just follow the instructions carefully on the screen, enter your code or content and hit publish to see the results.

Start building RapidWeaver theme banners the easier and smarter way!

%[endif]% %[if %("%id=freestyle_type%" == "blank")% ]% %[if edit]%

FreeStyle - Blank Template

%[endif]%
%[if edit]%

Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "static_image")% ]% %[if edit]%

FreeStyle - Static Image Template

%[endif]% %[if %("%id=image_src%" == "local_image")% ]%
%[endif]% %[if %("%id=image_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=image_src%" == "local_image")% ]% %[if edit]%

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %[if edit]%

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "splash")% ]% %[if edit]%

FreeStyle - Splash Template

%[endif]% %[if %("%id=splashimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "jumbotron")% ]% %[if edit]%

FreeStyle - Jumbotron Template

%[endif]% %[if %("%id=jumbotronimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=jumbotronimage_src%" == "local_image")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "slider")% ]% %[if edit]%

FreeStyle - BX Slider Template

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]%
  • Stacks Image 153
  • Stacks Image 156
  • Stacks Image 159
  • Stacks Image 162
%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).

Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]%
  • Banner 1
  • Banner 2
  • Banner 3
  • Banner 4
%[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:

<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Images can be attached to your project and referenced as RapidWeaver resources:

<li><img src='http://claremontumc.net/resources/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://claremontumc.net/resources/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic3.jpg' alt='Picture 3' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Or you can use example images bundled in the theme already:

<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "googlemap")% ]% %[if edit]%

FreeStyle - Google™ Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to google.com/maps in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the cog icon at the bottom of the screen. Select Share and Embed Map from the menu
  • In the new modal window that opens, click on the Embed Map tab
  • Set the map size to Custom. Set the width to 1500px and the height to 600px or thereabouts*
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the map. It will look something like this: https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5205174.633627887!2d-3.7632390876009407!3d50.430125479655565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1386361228260
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "openstreetmap")% ]% %[if edit]%

FreeStyle - Open Street Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to openstreetmap.org in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the share icon on the right of the screen
  • If you want to display a map pin, click the Include marker option and drag the pin into position
  • On the share tabs, click the HTML option
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the iFrame code. It will look something like this: http://www.openstreetmap.org/export/embed.html?bbox=-4.046230316162109%2C50.48511856761413%2C-4.003958702087402%2C50.507886381012156&layer=mapnik&marker=50.496503846052356%2C-4.025094509124756
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing*
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "dailymotion")% ]% %[if edit]%

FreeStyle - Dailymotion Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:

  • Go to dailymotion.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Export tab under the video. In the settings, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.dailymotion.com/embed/video/xcir20, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "html5video")% ]% %[if edit]%

FreeStyle - HTML5 Video Template

%[endif]%
%[if !edit]%%[endif]%
%[if edit]%

Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:

  • Use free software like Miro Video Converter to convert your media into web-safe .mp4, .ogv and .webm formats
  • Upload these converted files to your web server or an online warehouse (like Amazon S3)
  • Double-click the HTML code box above and edit the code to point to your audio or video in the required formats
  • Adjust the aspect ratio setting to increase the proportionate height of the video container and poster image
  • Change any of the video options shown in the settings on the right, like the poster frame, autoplay, looping, controls and preloading

The opening and closing <video> tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "kickstarter")% ]% %[if edit]%

FreeStyle - Kickstarter Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:

  • Go to kickstarter.com in your desktop web browser and navigate the website to find the project video you want to embed
  • Click on the Share button under the video. In the new window that opens, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.kickstarter.com/projects/doublefine/double-fine-adventure/widget/video.html, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "ted")% ]% %[if edit]%

FreeStyle - TED Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:

  • Go to ted.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Embed button under the video. In the modal window that opens, set the video size to the maximum possible
  • In the Embed this video box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://embed.ted.com/talks/allan_savory_how_to_green_the_world_s_deserts_and_reverse_climate_change.html, that would be the URL to use
  • Paste this URL into the configurable options on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vine")% ]% %[if edit]%

FreeStyle - Vine Video Template

%[endif]%
%[if edit]%

Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:

  • Open the Vine video in your web browser
  • On the lefthand side, click on the Embed button
  • From the embed options, choose the Simple or Postcard options (postcard displays the Vine username, title and description below the video)
  • Set the video to the desired size (normally 600px wide is best for websites). It's recommended that audio is prevented from auto-playing
  • Copy the embed code provided. Paste it into the HTML code box above
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vimeo")% ]% %[if edit]%

FreeStyle - Vimeo™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to vimeo.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letters or numbers sometimes in mixed case. So if the video URL was https://vimeo.com/877053, its ID would be 877053.
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "youtube")% ]% %[if edit]%

FreeStyle - YouTube™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to youtube.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letter and numbers in mixed case. So if the video URL was https://www.youtube.com/watch?v=2YjY_A8g_FA, its ID would be 2YjY_A8g_FA. In other words, the string of letters and numbers after v= is the video ID
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing ?autoplay=1 will cause the video to start playing automatically as the page loads. You can have a video start at a particular point, hide the player controls, loop the video, display a playlist and various other things. See the YouTube developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "calltoaction")% ]% %[if edit]%

FreeStyle - Call To Action Template

%[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]%
%[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=overlay_display%" == "block")% ]% %[if edit]%

FreeStyle Overlay

%[endif]%
%[endif]% %[if %("%id=freestyle_type%" == "hashtag")% ]%
%[if edit]%

FreeStyle - Hashtag Template

%[endif]% %[if %("%id=hashtagimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=hashtagimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]%
%[if %("%id=append%" == "true")% ]%
%[endif]%

… and candlelightIng!

%[if %("%id=append%" == "true")% ]%
%[endif]%
%[if %("%id=freestyle_type%" == "gettingstarted")% ]%

Welcome to FreeStyle!

Introduction

In the old days, banners in RapidWeaver typically consisted of fixed height boxes with a CSS background image applied through the theme style settings. The problem with this method was that users were typically tied to whatever settings the theme provided, and options for creativity were rather limited. Then something called 'responsive web design' came along in 2012, and people needed banners that were also fully flexible; in response to the 40% or so of handheld/mobile traffic arriving at some websites.

We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.

Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.

This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.

Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.

Getting started

In the stack settings over on the right, choose the type of banner you want to setup from the Template popup menu. This will load one of several ready-made templates. Each template displays a different set of instructions, together with configurable options relevant to what you're building. Just follow the instructions carefully on the screen, enter your code or content and hit publish to see the results.

Start building RapidWeaver theme banners the easier and smarter way!

%[endif]% %[if %("%id=freestyle_type%" == "blank")% ]% %[if edit]%

FreeStyle - Blank Template

%[endif]%
%[if edit]%

Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "static_image")% ]% %[if edit]%

FreeStyle - Static Image Template

%[endif]% %[if %("%id=image_src%" == "local_image")% ]%
%[endif]% %[if %("%id=image_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=image_src%" == "local_image")% ]% %[if edit]%

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %[if edit]%

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "splash")% ]% %[if edit]%

FreeStyle - Splash Template

%[endif]% %[if %("%id=splashimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "jumbotron")% ]% %[if edit]%

FreeStyle - Jumbotron Template

%[endif]% %[if %("%id=jumbotronimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=jumbotronimage_src%" == "local_image")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "slider")% ]% %[if edit]%

FreeStyle - BX Slider Template

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]%
  • Stacks Image 168
  • Stacks Image 171
  • Stacks Image 174
  • Stacks Image 177
  • Stacks Image 180
  • Stacks Image 183
  • Stacks Image 186
  • Stacks Image 189
%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).

Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]%
  • Banner 1
  • Banner 2
  • Banner 3
  • Banner 4
%[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:

<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Images can be attached to your project and referenced as RapidWeaver resources:

<li><img src='http://claremontumc.net/resources/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://claremontumc.net/resources/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic3.jpg' alt='Picture 3' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Or you can use example images bundled in the theme already:

<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "googlemap")% ]% %[if edit]%

FreeStyle - Google™ Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to google.com/maps in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the cog icon at the bottom of the screen. Select Share and Embed Map from the menu
  • In the new modal window that opens, click on the Embed Map tab
  • Set the map size to Custom. Set the width to 1500px and the height to 600px or thereabouts*
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the map. It will look something like this: https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5205174.633627887!2d-3.7632390876009407!3d50.430125479655565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1386361228260
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "openstreetmap")% ]% %[if edit]%

FreeStyle - Open Street Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to openstreetmap.org in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the share icon on the right of the screen
  • If you want to display a map pin, click the Include marker option and drag the pin into position
  • On the share tabs, click the HTML option
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the iFrame code. It will look something like this: http://www.openstreetmap.org/export/embed.html?bbox=-4.046230316162109%2C50.48511856761413%2C-4.003958702087402%2C50.507886381012156&layer=mapnik&marker=50.496503846052356%2C-4.025094509124756
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing*
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "dailymotion")% ]% %[if edit]%

FreeStyle - Dailymotion Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:

  • Go to dailymotion.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Export tab under the video. In the settings, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.dailymotion.com/embed/video/xcir20, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "html5video")% ]% %[if edit]%

FreeStyle - HTML5 Video Template

%[endif]%
%[if !edit]%%[endif]%
%[if edit]%

Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:

  • Use free software like Miro Video Converter to convert your media into web-safe .mp4, .ogv and .webm formats
  • Upload these converted files to your web server or an online warehouse (like Amazon S3)
  • Double-click the HTML code box above and edit the code to point to your audio or video in the required formats
  • Adjust the aspect ratio setting to increase the proportionate height of the video container and poster image
  • Change any of the video options shown in the settings on the right, like the poster frame, autoplay, looping, controls and preloading

The opening and closing <video> tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "kickstarter")% ]% %[if edit]%

FreeStyle - Kickstarter Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:

  • Go to kickstarter.com in your desktop web browser and navigate the website to find the project video you want to embed
  • Click on the Share button under the video. In the new window that opens, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.kickstarter.com/projects/doublefine/double-fine-adventure/widget/video.html, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "ted")% ]% %[if edit]%

FreeStyle - TED Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:

  • Go to ted.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Embed button under the video. In the modal window that opens, set the video size to the maximum possible
  • In the Embed this video box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://embed.ted.com/talks/allan_savory_how_to_green_the_world_s_deserts_and_reverse_climate_change.html, that would be the URL to use
  • Paste this URL into the configurable options on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vine")% ]% %[if edit]%

FreeStyle - Vine Video Template

%[endif]%
%[if edit]%

Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:

  • Open the Vine video in your web browser
  • On the lefthand side, click on the Embed button
  • From the embed options, choose the Simple or Postcard options (postcard displays the Vine username, title and description below the video)
  • Set the video to the desired size (normally 600px wide is best for websites). It's recommended that audio is prevented from auto-playing
  • Copy the embed code provided. Paste it into the HTML code box above
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vimeo")% ]% %[if edit]%

FreeStyle - Vimeo™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to vimeo.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letters or numbers sometimes in mixed case. So if the video URL was https://vimeo.com/877053, its ID would be 877053.
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "youtube")% ]% %[if edit]%

FreeStyle - YouTube™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to youtube.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letter and numbers in mixed case. So if the video URL was https://www.youtube.com/watch?v=2YjY_A8g_FA, its ID would be 2YjY_A8g_FA. In other words, the string of letters and numbers after v= is the video ID
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing ?autoplay=1 will cause the video to start playing automatically as the page loads. You can have a video start at a particular point, hide the player controls, loop the video, display a playlist and various other things. See the YouTube developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "calltoaction")% ]% %[if edit]%

FreeStyle - Call To Action Template

%[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]%
%[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=overlay_display%" == "block")% ]% %[if edit]%

FreeStyle Overlay

%[endif]%
%[endif]% %[if %("%id=freestyle_type%" == "hashtag")% ]%
%[if edit]%

FreeStyle - Hashtag Template

%[endif]% %[if %("%id=hashtagimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=hashtagimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]%
%[if %("%id=append%" == "true")% ]%
%[endif]%

Dedication of 2016 Nativity at Claremont UMC on 11 December 2016

%[if %("%id=append%" == "true")% ]%
%[endif]%
%[if %("%id=freestyle_type%" == "gettingstarted")% ]%

Welcome to FreeStyle!

Introduction

In the old days, banners in RapidWeaver typically consisted of fixed height boxes with a CSS background image applied through the theme style settings. The problem with this method was that users were typically tied to whatever settings the theme provided, and options for creativity were rather limited. Then something called 'responsive web design' came along in 2012, and people needed banners that were also fully flexible; in response to the 40% or so of handheld/mobile traffic arriving at some websites.

We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.

Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.

This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.

Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.

Getting started

In the stack settings over on the right, choose the type of banner you want to setup from the Template popup menu. This will load one of several ready-made templates. Each template displays a different set of instructions, together with configurable options relevant to what you're building. Just follow the instructions carefully on the screen, enter your code or content and hit publish to see the results.

Start building RapidWeaver theme banners the easier and smarter way!

%[endif]% %[if %("%id=freestyle_type%" == "blank")% ]% %[if edit]%

FreeStyle - Blank Template

%[endif]%
%[if edit]%

Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "static_image")% ]% %[if edit]%

FreeStyle - Static Image Template

%[endif]% %[if %("%id=image_src%" == "local_image")% ]%
%[endif]% %[if %("%id=image_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=image_src%" == "local_image")% ]% %[if edit]%

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %[if edit]%

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>
%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "splash")% ]% %[if edit]%

FreeStyle - Splash Template

%[endif]% %[if %("%id=splashimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "jumbotron")% ]% %[if edit]%

FreeStyle - Jumbotron Template

%[endif]% %[if %("%id=jumbotronimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=jumbotronimage_src%" == "local_image")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "slider")% ]% %[if edit]%

FreeStyle - BX Slider Template

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]%
  • Stacks Image 257
  • Stacks Image 260
  • Stacks Image 263
  • Stacks Image 266
  • Stacks Image 269
  • Stacks Image 272
%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).

Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]%
  • Banner 1
  • Banner 2
  • Banner 3
  • Banner 4
%[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:

<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Images can be attached to your project and referenced as RapidWeaver resources:

<li><img src='http://claremontumc.net/resources/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://claremontumc.net/resources/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic3.jpg' alt='Picture 3' title='Title for 2' /></li>
<li><img src='http://claremontumc.net/resources/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Or you can use example images bundled in the theme already:

<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "googlemap")% ]% %[if edit]%

FreeStyle - Google™ Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to google.com/maps in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the cog icon at the bottom of the screen. Select Share and Embed Map from the menu
  • In the new modal window that opens, click on the Embed Map tab
  • Set the map size to Custom. Set the width to 1500px and the height to 600px or thereabouts*
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the map. It will look something like this: https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5205174.633627887!2d-3.7632390876009407!3d50.430125479655565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1386361228260
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "openstreetmap")% ]% %[if edit]%

FreeStyle - Open Street Map Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

  • Go to openstreetmap.org in your desktop web browser
  • Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
  • Click on the share icon on the right of the screen
  • If you want to display a map pin, click the Include marker option and drag the pin into position
  • On the share tabs, click the HTML option
  • Copy the iFrame code provided and paste it into a blank text or code file
  • Extract the URL (src attribute) from the iFrame code. It will look something like this: http://www.openstreetmap.org/export/embed.html?bbox=-4.046230316162109%2C50.48511856761413%2C-4.003958702087402%2C50.507886381012156&layer=mapnik&marker=50.496503846052356%2C-4.025094509124756
  • In the configurable options on the right, paste the URL into the Map URL box
  • Adjust the height setting so that a good proportion of the map is showing*
  • The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "dailymotion")% ]% %[if edit]%

FreeStyle - Dailymotion Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:

  • Go to dailymotion.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Export tab under the video. In the settings, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.dailymotion.com/embed/video/xcir20, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "html5video")% ]% %[if edit]%

FreeStyle - HTML5 Video Template

%[endif]%
%[if !edit]%%[endif]%
%[if edit]%

Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:

  • Use free software like Miro Video Converter to convert your media into web-safe .mp4, .ogv and .webm formats
  • Upload these converted files to your web server or an online warehouse (like Amazon S3)
  • Double-click the HTML code box above and edit the code to point to your audio or video in the required formats
  • Adjust the aspect ratio setting to increase the proportionate height of the video container and poster image
  • Change any of the video options shown in the settings on the right, like the poster frame, autoplay, looping, controls and preloading

The opening and closing <video> tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "kickstarter")% ]% %[if edit]%

FreeStyle - Kickstarter Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:

  • Go to kickstarter.com in your desktop web browser and navigate the website to find the project video you want to embed
  • Click on the Share button under the video. In the new window that opens, set the video size to the maximum possible
  • In the embed code box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://www.kickstarter.com/projects/doublefine/double-fine-adventure/widget/video.html, that would be the URL to use
  • Paste this URL into the stack settings on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "ted")% ]% %[if edit]%

FreeStyle - TED Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:

  • Go to ted.com in your desktop web browser and navigate the website to find the video you want to embed
  • Click on the Embed button under the video. In the modal window that opens, set the video size to the maximum possible
  • In the Embed this video box, copy the iFrame embed code into a blank text or code file
  • Copy the video URL. So if the video URL was http://embed.ted.com/talks/allan_savory_how_to_green_the_world_s_deserts_and_reverse_climate_change.html, that would be the URL to use
  • Paste this URL into the configurable options on the right (marked Video URL)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vine")% ]% %[if edit]%

FreeStyle - Vine Video Template

%[endif]%
%[if edit]%

Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:

  • Open the Vine video in your web browser
  • On the lefthand side, click on the Embed button
  • From the embed options, choose the Simple or Postcard options (postcard displays the Vine username, title and description below the video)
  • Set the video to the desired size (normally 600px wide is best for websites). It's recommended that audio is prevented from auto-playing
  • Copy the embed code provided. Paste it into the HTML code box above
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vimeo")% ]% %[if edit]%

FreeStyle - Vimeo™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to vimeo.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letters or numbers sometimes in mixed case. So if the video URL was https://vimeo.com/877053, its ID would be 877053.
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "youtube")% ]% %[if edit]%

FreeStyle - YouTube™ Video Template

%[endif]%
%[if edit]%

The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

  • Go to youtube.com in your desktop web browser and navigate the website to find the video you want to embed
  • Take a note of the video ID, displayed in your browser address bar. This is often a random string of letter and numbers in mixed case. So if the video URL was https://www.youtube.com/watch?v=2YjY_A8g_FA, its ID would be 2YjY_A8g_FA. In other words, the string of letters and numbers after v= is the video ID
  • Copy and paste this ID into the stack settings on the right (marked Video ID)
  • The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again
A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing ?autoplay=1 will cause the video to start playing automatically as the page loads. You can have a video start at a particular point, hide the player controls, loop the video, display a playlist and various other things. See the YouTube developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "calltoaction")% ]% %[if edit]%

FreeStyle - Call To Action Template

%[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]%
%[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% Banner 1 %[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=overlay_display%" == "block")% ]% %[if edit]%

FreeStyle Overlay

%[endif]%
%[endif]% %[if %("%id=freestyle_type%" == "hashtag")% ]%
%[if edit]%

FreeStyle - Hashtag Template

%[endif]% %[if %("%id=hashtagimage_src%" == "local_image")% ]%
%[endif]% %[if %("%id=hashtagimage_src%" == "html_src")% ]% Banner 1 %[endif]%
%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='http://claremontumc.net/resources/ice-cream.jpg' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]%
%[if %("%id=append%" == "true")% ]%
%[endif]%

Under construction

Stacks Image 277
Stacks Image 278
Stacks Image 279
Stacks Image 280
Stacks Image 281
Stacks Image 7

2007 Nativity

Stacks Image 13

2008 Nativity

Stacks Image 103
Stacks Image 104
Stacks Image 105

2009 Nativity

Stacks Image 88
Stacks Image 82
Stacks Image 83

2010 Nativity

Stacks Image 79
Stacks Image 80

2011 Nativity

Stacks Image 75
Stacks Image 76
Stacks Image 77

2012 Nativity

Stacks Image 71
Stacks Image 72
Stacks Image 73

2013 Nativity

Stacks Image 67
Stacks Image 68
Stacks Image 69

2014 Nativity – UNDER (RE-)CONSTRUCTION

2015 Nativity

Stacks Image 31

2016 Nativity – see home page