Thanks for being awesome, this one is on me ; )

And now time for something completely different

Prisms is a different, fun and stylish kind of theme. I expect to see great sites from you with it!

The best thing (as always) is to open the RW theme sandwich I've included of my demo page and copy and paste from there as this requires a few page links to be setup. We'll go through those settings now.

Firstly... some general tips

1. Use the demo RW project file - copy and paste juiciness from there into your own project
2. Unlike some of my previous themes, keep the RW preferences set to the default so like this:

1. Scrolling Navigation

This is the fun part that we have to get right!

Take out Stacks and fire!

Add up to 6 pages

The first (Home) is where all the content will go.

The next 1-5 pages will appear in the navigation, but they will remain empty content pages. I would recommend this and hide the "Home" page - the logo acts as a scroll to top anyway.

Add content to the Home page

Go to the home page and start adding your content. The page is laid out like this:


EC1 appears at the top and so has no scroll to navigation (except the logo).

Add 5 extra content areas to your "Home" Page. Fill them with content (see my demo). And that's it.


To link up the sections to the navigation we would add the follow to the "page title" of each page:

<a href="#main">Features</a> ---> for linking to the main content
<a href="#extraContent2">Our Work</a> ---> for linking to the EC2 section of the page
And so on... (depending on how many sections you require, up to EC5)

Change the bold ("our work" or "features") to the text that you want to appear in the site navigation.

The pages can be as long as you want in terms of contet and have images, text or videos or any other Stacks you want.

Note: Keep the other pages empty. We just add them to the RW project to create the navigation at the top of the page and to link to the rest of the actual content on the "home" page. So, essentially, this is a 1 page website design.

A note on margins and padding

Of course it is entirely up to you but I liked to add a margin of about 340px to the bottom of each section so that the next part remains out of view whilst scrolling. But I'm sure you can think of a cooler way to do things.

2. Colourful Background

It just happens automatically whilst scrolling and page refreshing. Enjoy it!

3. Font Awesome 3.0

Add this snippet to your project:

<i class="icon-camera-retro"></i>

Then, just change the words "camera-retro" to the icon that you want to show from here:

So for the flag it would be <i class="icon-flag"></i>

Check the examples ( for how to make bigger icons:

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

4. Google Maps (responsive)

Grab your Google map embed code from Google in the usual way and then add this little wrapper around the code:

<div class="gmap-wrapper"><iframe width="960" height="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" .... <iframe></div>

5. Portfolio

Just drag in the Portfolio snippet to a Stacks page.

It's already ready and will take 7 portfolio pieces and animate them automatically.

You just have to add your 7 pieces as 1.jpg, 2.jpg etc to the resources section.

For the smaller images I'd recommend: 400x300px
And for the bigger (1.jpg and 7.jpg) I'd recommend: 800x600px

6. Buttons - Call to actions

<a href="#" class="button">Buy this app today</a>

You can change the link to the title or your page so "mypage.html" and the title of the button from "Buy this app today" as the bold parts above.
To change the button colours, use the page styles. Y


For the social icons in my demo (bottom of page) please use:

<a href="#" class="Sbutton">Facebook</a>

Notice that you just add an "S" infront of the word button to change this to a social variant. This means you can make two kinds of buttons on the page. These are smaller and both have separate colour options in the theme settings.

That said, the only difference with the smaller ones (Sbutton) is that they are smaller. They don't have to be just for social so you could see them as just a smaller sized button. I just intended them for the social links in the design.

7. Responsive Slider

1. Drag in your images to the resources section.

2. Drag in the snippet into an HTML stack and match the file names.

That's it! And you can have as many images as you wish.

8. Responsive Video

To make videos full screen - responsive - just use this snippet:

<div class="video"><iframe src=";byline=0&amp;portrait=0" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Inbetween the bold parts, add your youtube or vimeo video embed code.

Other Options

This can be switched off in the options.

Add your logo to the Site Setup section in the usual way and make sure it is at least 220px wide, or 440px to make it full HD Retina compatible for the HiDPI screens. I use the SiteTitle (text) for the demo. Both will automatically link with "scroll to top" in your site.

That's it

Don't hesitate to get in touch if you have any more specific questions and happy weaving.

Send me links of your finished projects with the Prisms theme and I'll feature them on my blog. Can't wait to hear your feedback,