Launch theme 1.2 & 1.3

Intro

Building on from the support docs for the first version of this theme.

I strongly recommend using the demo project file included in the disk image. This saves you time and means you'l never have to work from scratch again. Just edit the content already in there (exactly the same as the online demo) to match your content and then publish. Then Robert's your Father's brother.

Setting up Demo Tape

This should be quite sraightforward.

1. Make your demo!

2. Save it as .mp3 and .ogg (Joe Workman has a great doc on how to create those)

3. Call your tracks "1.mp3" and "1.ogg". The theme is setup for 4 tracks (1-4) so if you want to add more or less you'll need to edit a file. This could be tricky but try this:

jquery.cassette.js

Open the theme by clicking "reveal contents in finder" on the theme in Rapidweaver and using your favourite text editor open the file jquery.cassette.js

Sticking with four tracks is easiest but not too difficult to edit this file. Save and then it's setup.

4. Pull in the 3 snippets for "demo tape" into your rapidweaver project

1/3

2/3

3/3

To make your labelled tape image, edit the included "tape.png" in the theme bundle I sent you or use the original PSD. Edit it in your best image editing software (Photoshop, Pixelmator etc) by adding the title of your demo to the tape image. Lovely jubbly.

5. Export / Publish your project to the Internet

6. FTP (using your favourite FTP software - like Cyberduck) the contents of the "demo tape" folder from the theme disc image to the root of the online demo tape.

So two folders "sounds" and "songs". "Sounds" can be transferred as it is but "songs" should now have your tracks in that you want to demo

Demo Tape.jpg

If the page folder is called "demo" then upload it to the "demo" folder. If it's your homepage then just upload it to the root of the site.

Finished!

Refresh the site and check it in your browser.
Now send this page to everyone you know to check out your latest demo tape!

Background Image Snippet

This version of the theme now also includes a background image snippet. Now, instead of selecting the "background image" in styles, just drag a background image to your resources called "background.jpg" and add this snippet to the custom CSS panel. That's it and then background should appear.

YouTube Background Video

Add the YouTube background snippet to the Page Inspector Custom Header section.

Change the VideoId to your video. 'G0k3kHtyoqc' is for the Hobbit Trailer. The Id is in the YouTube URL:

http://www.youtube.com/watch?v=5EjG-1U3wqA

This is the URL to watch the Iron Man 3 Trailer. Swap the 'G0k3kHtyoqc' to '5EjG-1U3wqA' in the Custom Header and it will show the Iron Man 3 tralier in the background.

The YouTube playback only appears after publishing to the Internet, not in RW preview.

Email Signup with secure CSV export

This is perhaps a much nicer standalone email signup form than the MailChimp / Aweber one.

Lots of peeps don't use MailChimp and just want to collect email addresses to use in another programme. This collects them and gives you a .CSV for Excel, or any other programme import, with all the email addresses inside ; )

I don't want to tie you into a system and believe it should be easy for you to get the data in you also to get the data out.

1. Drop in the 3 snippets:

(1/3) Place in Custom Header

(2/3) Place in Content Body

In an HTML Stack would be easiest.

(3/3) Place in Prefix

Place this one in the Page Prefix of the Page Inspector.

Until now it was just dragging in snippets. Now, let's do a little editing.
Please change the word 'password' to something that is more secure and memorable for you. This is what secures the CSV download from unwanted visitors.

Change filename to .php

Change the filename to .php on the page that is showing this email signup form. In the example I have index.php but anything.php is fine. This is important to make sure the form works.

Changing the font or colour of the "button" in Styles will change those used in the signup form.

Next, publish your site.

Submit.php

Lastly, after publishing, FTP into your server and place the submit.php file in the disk image in the root of where the form is.

In my example, the index,php is in my "demo8" folder so place the submit.php in there so it sits side by side with the index.php.

I've used Coda2 here but there are FTP free applications around. There'll be a web FTP including with your host you can use or I also recommend cyberduck.

That's it!

How to retrieve the emails in a CSV file

Go to your Launch page and add "index.php?pass=password" where "index.php" is the name of your filename and "password" is your actual password.

So if your site is coming-soon.php and password "fishsticks" you would type:

www.yourdomain.com/coming-soon.php?pass=fishsticks

Then an "Export all entries" box will appear (as in 1) and you click it to download the latest copy of email addresses. Do this sporadically and then update your master CSV file and you have a copy of email addresses you then take to any mail programme to contact.

As long as no one knows your password to be "fishsticks" then the contact details will be secure.

Countdown Timer

Countdown timer - much demand - with colour and font selectors has now been added : )

Firstly add the 3 snippets and then change the countdown time and colours.

(1/3) Place in Custom Javascript

(2/3) Place in Page

Add this snippet to an HTML stack for example

(3/3) Place in Custom Header

Changing the Countdown time

Currently my demo is counting down to the start of the World Cup Rugby 7s in Russia: June 28, 2013 09:00:00

Just change the month, day, year and time to your own date in "June 28, 2013 09:00:00"

In the Styles tab you can also set the colours of the timer (numbers) and the words (day, month, year). The timer appears after publishing to the Internet or exporting, not in RW preview.

Retina Graphics

The Icon Font, extra content background images and other site elements are now ready for Retina Displays: new iPads, iPhone 4 & 5 and MacBook Pro.

Now it's time to get your content ready!

If you also want to create images in other parts of your content that are Retina ready this is a little bit more tricky : )

For this, 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!
If backgrounds are set for a high resolution like in my demo they are already retina ready and look great on that level of displays.

  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: http://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 importanting into RW.

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

Background Text Image

Adding some cool things to version 1.3 here.. including a little background clip for text experiment.

1. Add some text to your project. 3 Parts for example.
2. Turn the first part to h4, second to h5, third to h6.
3. Drag the "Launch Background Image Text" to the page inspector custom css pane
4. Change the links to 3 images that you wish to show in the text. That's it!

My links in 4 are referring to images online. That's fine for you to do but an easier way is to just use the snippet then add three images to your resources called "image1.jpg", "image2.jpg" and "image3.jpg" and it will pull in the images all automatically. Lovely Jubbly.

Of course also, you can use just h4 or h5 and h6 etc. Get creative and see what you can do.

iPhone Concept

This one is really easy for an awesome effect.

1. Drag in the "Launch iPhone Concept" snippet to an HTML stack.
2. Add about 50px margin and 70px padding to the bottom of the stack to allow for the 3D rotation and huge shadow.
3. Change the link in the snippet to your image.

Like above I've done a hard link to my resources but if you add an image to the RW project resources and call it "iphone-image.jpg" you'll be cooking on gas here.

I'd recommend an image size of 300x460px for best results.

With all cool things, this probably only works well in Safari, Chrome a little and pretty badly in IE and Firefox. Opera is adopting Webkit so should be all good there. So if you make an iphone app and are aiming at Safari users then you should be good to go.

Thanks

Thanks for reading and upgrading the theme now go and make good things.

Bests,
Michael

Acknowledgements

1. This music player is integrated into Rapidweaver from this online resource: http://tympanus.net/codrops/2012/07/12/old-school-cassette-player-with-html5-audio/

2. The PSD in the demo is from here: http://tympanus.net/codrops/2012/07/12/old-school-cassette-player-with-html5-audio/

3. Music is from here: http://freemusicarchive.org/

4. Cool iPhone thermostat object UI: http://dribbble.com/shots/731854-Thermostat-App