Thank you very much for your purchase.

Departure Theme

I appreciate your support and hope this helps you rule your next web project like a boss. Here's how to get the most out of the Departure Theme for Rapidweaver...
It's a pretty feature packed and really powerful theme like no other so take your time through this doc to find out all the cool things you can do : )

I'm going to split this into 4 sections based on the 4 different project demos included:

1. Real Web App
2. Web App UI
3. Standard RW pages
4. Landing pages

Strap in and here we go....

Firstly... some general tips

  1. If things are not playing nice, highlight the snippet in the page and then Format and "ignore formatting"
  2. This theme is optimised for speed. To keep things snappy, before you export go to Rapidweaver preferences and select Enable smart publishing; consolidate common files; consolidate CSS files then export / publish and your site should be as fast as it gets.
  3. The original CSS and Javascript files are included in the theme under "originals" should you need to edit them; the ones used in the theme are minified
  4. Use the demo Departure projects files included with this theme to see how all this fits together and get ideas on how to make cool changes and customisations (highly recommended - you don't need to start from scratch!) & feel free to use it as a blueprint to build on to make it quicker and easier to complete your project.

1. Real Web App

Airport Departures Board Header

This is the easy way. Just activate the page's slogan under general of the page inspector and type away. You could do it site wide in the site setup but this way allows you to override if you want this to be the different title of each page.

Airport Departures Board Header - more complex

If you want the words to be on separate boards and have the little title above it (like "destination") you'll need to use the snippet.

Import the snippet called "Departure Loader"

<ul>
         <li>
         <h3>destination</h3>
         <span class="foldable">
         <span>(.COM) Airport</span>
         </span>
         </li>
         <li>
         <h3>airline</h3>
         <span class="foldable">
         <span>Rapidweaver</span>
         </span>
         </li>
         <li>
         <h3>Status</h3>
         <span class="foldable">
         <span>Boarding</span>
         </span>
         </li>
</ul>
 
Change the bold parts to your title and if you want the titles above it please edit the italics or just delete the whole <h3>...</h3> if you don't want them.

HTML5 Local Storage

This part is awesome.

It's reliable, safe and secure. You can use this to build lists that users can save and re-visit and re-load their settings. Great for lists for groups, to-do apps, preferences in an app and many other cool things.

Cools lists - 3 kinds of checkboxes

For list styles 1 & 3 it's the same HTML code
For list style 2 it is slightly different.

For 1 & 3 use this snippet:

<div class="switch">
<input type="checkbox" value="chB1" />
<label></label>
</div>

Paste in as many checkboxes as you want. To make the Local Storage work, change the bold to anything but I recommend chB1, chB2, chB3 etc.

If you imagine that when you save the list, the site wants to remember the preferences for each switch so having a different name allows it to do this.

For list style 2 please use:

<input type="checkbox" id="slider" class="slider-toggle" value="chB1">
</label>
<label for="slider" class="slider"></label>

And change the bold as the first example

Note: style 2 doesn't work well in Firefox but degrades gracefully to a standard checkbox.

--

Please see the demo real web app list as well as the preferences layout demo in the Web App UI demo. You can combine these lists with the notifications too.

To make the buttons to save, load and clear just use the snippet:

<div class="buttons">
<button onclick="save()" class="black" id="custom-save"> SAVE</button>
<button onclick="load_()" class="green" id="custom-load">LOAD</button>
<button onclick="document.location.reload(true)" class="red">RESET</button>
</div>

If you don't want "reset" then you can delete this.
There's also an option to add gradients to the buttons too in the theme settings.

2. Web App UI

Touch Gallery

1. Put your images into the RW resources section
2. Paste in the Gallery snippet:

<ul class="gallery">
<li><img src="%resource(img1.jpg)%" rel="group1" data-glisse-big="%resource(img1.jpg)%" class="tl" title="This is a pretty sweet gallery" /></li>
<li><img src="%resource(img2.jpg)%" rel="group1" data-glisse-big="%resource(img2.jpg)%" class="tl" title="Looks really good on your iPhone" /></li>
<li><img src="%resource(img3.jpg)%" rel="group1" data-glisse-big="%resource(img3.jpg)%" class="tl" title="Check it on your iPad too" /></li>
</ul>

Make sure the image names match and change the title text (it appears as a pop up!)

To make more just copy and paste the <li>...</li>
Think in 3s - the demo has 9 images.

Make the images at least 700px wide and it will handle the rest.

Notifications

The easy custom method.

1. Put the snippet for the custom notification in the "header" of the page inspector:

    <script>
        $(document).ready(function() {            
            $('#custom').click(function() {
                $.notification(
                    {
                        title: "Get editing your own notification",
                        content: "Change the text in the snippet & Page Inspector",
                        border: false,
                        icon: '<span class="icon-">&#9729;</span>'
                    }
                );
            });
                                    
        });
    </script>

Change the text and icon to your liking.

2. Make a link the usual way.

Add "#" to the link URL and id "custom"
(as below)

The more complex method.

If you want to change the random text in the theme you'll have to edit the "yuzoolthemes.js" file in the theme.
Change the text for "standard"; "text"; "time"; "timeout"; "error" and then call them in the links like above but use their ids instead of "custom".

This is really for people building apps and for those, this should be an easy and quick way for deployment.

But it's not that tricky and should only take 5 mins for anyone and then you can add some cool notifications to your site like after clicking a call to action etc. Try it and you'll be amazed.

Open the theme contents and edit "yuzoolthemes.js" as below.

Animation

Under page inspector theme options, "select options", there is a tick box for "animation".

This will bring in the content more slowly for a nice effect. If it blurs in Safari (check in Preview > Safari; not RW preview for more accurate assessment) flick this on and it will smooth out any text glitches.

Loaders and Progress bars

These are fully animated and can be easily set in the snippet.

<div class="progress">
<span class="progress-val">79%</span>
<span class="progress-bar"><span class="progress-in" style="width: 79%"></span></span>
</div>

Change the "79" to any number. Great for showing a coming soon indicator.

Login, Messages UI, Search

These are really UI concepts. These can be easily added using the snippets but will need backend coding to make them actually work (function) but they still allow you to get the front-end of your project off the ground quickly.

They are intended for people making web app concepts and UIs.

Graphs - Concept

1. Pull in the HTML snippet to the page.

2. Pull in the JS to the custom js section in the page inspector.
This is where the data goes.

This (like above) is mainly a concept for your apps.

To make it easy to edit the data and make your own graphs I would recommend:

The Chart Stack:
http://www.nimblehost.com/store/charts/

Mini Sub Menu (round menu)

Great for splitting up heavy content pages or sub-menu for a web app.

1. Pull in the snippet

        <nav>
            <ul class="subnav">
                <li><a href="javascript:void(0);" <span class="icon-">&#59255;</span></a></li>
                <li><a href="javascript:void(0);" <span class="icon-">&#128318;</span></a></li>
                <li><a href="javascript:void(0);" <span class="icon-">&#128247;</span></a></li>
                <li><a href="javascript:void(0);" <span class="icon-">&#128100;</span></a></li>
                <li><a href="javascript:void(0);" <span class="icon-">&#9881;</span></a></li>
                <li><a href="javascript:void(0);" <span class="icon-">&#59201;</span></a></li>
            </ul>
        </nav>
 
2. Change the links to your pages (on your site or external sites) and the icons to those that best represent the options.

Delete or copy paste the <li>...</li> to make more or less sub-menus.

3. Standard RW Pages

All the standard pages are business as usual to setup: contact form, blog, photo album, sitemap, stacks etc

Couple things to bear in mind....
 
1. When you are making a blog, hit the "blog page" option in theme options "select options"
2. Other options there include transparency borders, padding (you have to add your own in Stacks etc otherwise full width) and the options to make the site go full screen on the ipad and iphone and desktop. This is instead of centralising the content in the content box. Only tick one of these and choose what best applies to your site goals.
3. Font awesome compatibility is just if you want to use the Font Awesome stack.

The other options should be quite straight forward and recommend playing with them to see how they work.

Icon Font

For the icon font use the snippet:

<span class="icon-">&#57347;</span>

Change the Bold to the lower number like in the chart below in pink. For the full layout of icons included in Departure please go to http://www.entypo.com/characters/
This includes the standard icons and social icons.

Responsive Image Slider

1. Add the images to the resources section in RW
2. Use this snippet:

<ul class="rslides">
<li><img src="%resource(image.jpg)%" alt="" /></li>
<li><img src="%resource(image2.jpg)%" /></li>
<li><img src="%resource(image3.jpg)%" /></li>
</ul>

Make sure the images names match as in the bold and add as many images as you wish by copying and pasting <li>...</li>

Responsive full screen video

1. Use the video snippet:

<div class="video">
<iframe src="http://player.vimeo.com/video/57130400?title=0&amp;byline=0&amp;portrait=0&amp;badge=0" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Change the bold bit to your youtube or Vimeo embed code

4. Landing Pages

Departure is great for amazing landing pages.

If you have an app, use the included appstore buttons, if you are sellign software or want to show your web design portfolio use the included iPhone, iPad, MacBook Air sliders to show off your work.

Square call to action buttons

1. Make a link the usual way
2. Add the class "square" and you're off

You can change the colour in the colour inspector too.

Icon Font Features

The same as the icon font references above but if you use the snippet below instead, the icons are bigger and make great feature pages:

<span class="iconfeatures-">&#128241;</span>

Change the bold as above.

iPhone, iPad, iPad Mini, MacBook air image sliders

1. Add your images to the resources section of RW.
2. Drag in the appropriate snippet - depending on the slider you want to use.

<div class="macbookair">
<ul class="rslides">
<li><img src="%resource(macbook-air.jpg)%" alt="" /></li>
<li><img src="%resource(macbook-air2.jpg)%" alt="" /></li>
<li><img src="%resource(macbook-air3.jpg)%" alt="" /></li>
</ul>
</div>

(MacBookAir example)

Make sure the bold names match the names of the images in the resources section.
Add as many <li>...</li> as you want for 5 or 6 images for example. Just copy and paste.

These are fully responsive but pleae make the images accurately for best results, dimensions below:

iPhone = 269px x 437px
iPad = 406 x 545
iPad Mini = 412 x 510
MacBook = 508 x 320

And for the iPhone I would recommend making it double at 538 x 874 to make sure the image looks good on retina displays. More on retina and how to optimise your images below.

Testimonials

Testimonials are great for adding trust to your site.

1. Drag in the snippet:

<div class="testimonialrotator sskin_clean" id="testimonials" style="width:100%;">
<div class="testimonial-tobe">
<div class="testtext">It's 3-themes-in-1: Web App, Portfolio site, Landing Page</div>
<div class="testauthor">All Rapidweaver Project files included.</div>
</div>
<div class="testimonial-tobe">
<div class="testtext">Everything you see in the demos you get</div>
<div class="testauthor">No kidding.</div>
</div>
     <div class="testimonial-tobe">
<div class="testtext">Read throught these and look at the demos</div>
<div class="testauthor">I think this is the best one so far.</div>
</div>
</div>

Change the bold parts to your text.
You can delete the "<div class="testauthor">I think this is the best one so far.</div>" if you don't want the author section. But usually a good idea to keep it to add more trust.
Also, you can add as many as you like. Here we have 3 but you could easily make it 6 comments by copying and pasting this section below:

     <div class="testimonial-tobe">
<div class="testtext">Read throught these and look at the demos</div>
<div class="testauthor">I think this is the best one so far.</div>
</div>

5. Other bits....

Web App Mode

Departure can be made into a full screen web app automatically. Users can save the site to their iPhone / iPad home screen and it creates a beautiful high resolution icon and startup screen.

Create 3 images like included in the disk image (icon, startup retina and startup).

Sizes are:

Icon: 114x114
Startup retina: 640 x 920
Startup: 320 x 460

Save them as .pngs and add them to your project resources with the same file names as below and it will then work automatically.

Retina Images

Logo - Drag in your logo in the Site setup panel. To make it retina HD ready, make sure it is at least 900px wide. The site will compress it to 450px wide and as a result it will have double the pixel density and sweetness for the HiDPI screens.

For the rest of the site:

Add your images to the resources section and drag the Retina Snippet to the page and link it to the image. Until someone releases a Retina snippet, this is the easiest way, trust me!

  1. Drag in the Retina snippet to an HTML stack.
  2. Add the image at double the intended size to the resources panel. So, if you want the image to be 400px wide on your website, create it at 800px wide and add it to the resources section at 800px
  3. Change the filename in the snippet from "image.jpg" to your image name and also the "210" to the intended size. So from "210" to "400" as in this example.

Dragging images straight into image stacks won't do any good at the moment.

Images that are big can suddenly get big in filesize so use this to keep the site lightweight before uploading them to the resources section: imageoptim.com

Before running it through this optimiser it's also a good idea to save the images at 30-50% jpg quality in Photoshop or Pixelmator. Experiment to see which looks best (depends on the type of image) but this will help optimise your image and will end up being the same file size as the target pixel size would be. It's always best to get them right before importing into RW.

Using an image Warehouse on your server is a great idea too to keep the RW project a small filesize.

Need any further help?

Enjoy this theme, and if you have any questions, need further assistance, have comments or what not, please contact me at http://support.yuzoolthemes.com.

There’ll be amends posted there to themes and update information as well as any bug fixes and your chance to raise a support ticket too.

Cheers and happy weaving,
Michael Frankland
Yuzoolthemes.com