Clarion Changing the world, one site at a time...

Clarion Manual

What is Responsive Design?
Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels) , to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Give it a try for yourself »
Setup the Built - IN pagination in a RapidWeaver photo album page
Stacks Image 223

Enable the option in the Styles Tab

Open the Page Inspector > Styles as you can see on the image.

You can see that after adding your own images to the Photo Album type page you just need to enable the option in the Styles Tab, so that you can have a neat pagination effect in your page albums.

By default the pagination is enabled to show 10 items/photos but this can be easily changed with the code snippet below.

Change the number of pagination items

As you can see on the image on the right in the Javascript Tab, I've pasted the code snippet there.

I've added some code to the Javascript box, it shows us the items that we want to paginate, so if we need to increase or even decrease the value we just need to edit the value to whatever suits your needs best.

Just try it yourself, here is the snippet, that you need to copy/paste in your Photo Album page Javascript Tab.

var photoCount = 20;
Stacks Image 237
Using and Implementing the Resources built-in slideshow in your project.
Stacks Image 197

Enable the option in the Styles Tab

These instructions will help you to use the built-in resources slideshow functionality in your own project, this way you are not limited by the 30 slots the Theme provides, you can have dozens of images if you need to.

The first thing you need to do is, enable the [Resources Slides (snippets required)] in your Page Inspector > Styles as you can see on the left image.

Next you will need to add some custom snippet code to your project, keep reading below.

Using the Resources Slides HTML code

As you can see in the reference image, we just need copy and paste the code snippet below in to our Page Inspector > Sidebar Tab.

Don't forget to add your images to the Resources Panel, for the Banner to work, In the example provided you need to create first a folder named images and then drop your images there.

<div id="myExtraContent2">
<div class="flexslider">
<ul class="slides">
<li><img src="%resource(images/banner_1.jpg)%" /></li>
<li><img src="%resource(images/banner_2.jpg)%" /></li>
<li><img src="%resource(images/banner_3.jpg)%" /></li>
<li><img src="%resource(images/banner_4.jpg)%" /></li>
<li><img src="%resource(images/banner_5.jpg)%" /></li>
</ul>
</div>
</div><!-- #myExtraContent -->

I'm using the sidebar to place that code but you use it wherever you think is more comfortable for you, in the content page.

Very Important: After dropping the snippet into your project, please highlight the code and apply > Ignore Formatting from the Format Menu.
Stacks Image 214
Using and Implementing banner links when using the built-in slideshow.
Stacks Image 122
This is a great feature built-in this Theme, sometimes you just need to add links to your slide images, copying and pasting the code below will enable that, just giv it a try.

$wt(document).ready(function() {
var someLinks = [
"http://www.google.com",
"http://www.twitter.com",
"http://www.facebook.com"
];
$wt('.slides li').rwAddLinks(someLinks);
});

Using and Implementing the jQuery Twitter option in your project.

How to create a valid ID to use?

  • Go to www.twitter.com and sign in as normal, go to your settings page.
  • Go to "Widgets" on the left hand side.
  • Create a new widget for what you need eg "user timeline" or "search" etc.
  • Feel free to check "exclude replies" if you dont want replies in results.
  • Now go back to settings page, and then go back to widgets page, you should see the widget you just created. Click edit.
  • Now look at the URL in your web browser, you will see a long number like this: 345217103529394176
  • Use this as your ID below instead!
Stacks Image 134
Stacks Image 253

Enable the option in the Styles Tab

These instructions will help you to use the built-in jQuery Twitter functionality in your own project.

Implementing twitter streams into a website can be very important in helping you get a more professional look. Clarion as this just Built - In.

The first thing you need to do is, enable the [Enable (jQuery twitter)] in your Page Inspector > Styles as you can see on the left image.

Next you will need to add a custom snippet code to your project, see below.

Using the Snippet HTML code

As you can see in the reference image, we just need copy and paste the code snippet below in to our Page Inspector > Sidebar Tab.

<div id="tweets"></div>

I'm using the sidebar to place that code but you use it wherever you think is more comfortable for you, in the content page.

Very Important: After dropping the snippet into your project, please highlight the code and apply > Ignore Formatting from the Format Menu.

Also you need to add your own twitter widget ID and the count, so that you can show your own tweets and the number of items to show.

For that you need to add one line of Javascript code.

Proceed :)
Stacks Image 267
Stacks Image 272

Configure your Twitter ID

The next step is to include the code snippet below in to your Page Inspector > Header > Javascript Tab

twitterFetcher.fetch('345217103529394176', 'tweets', 3, true, true, true);


Now you just need to adjust your settings to something that you think it reflects your needs.
Using Extra Content (EC) Areas 1 to 4
Stacks Image 286

Extra Content Areas

As you can see on the left image there are 4 spots/areas available for your Extra Content.

You can check a greater resolution of this areas here.

  • The Extra Content 1 is used in the Header.
  • The Extra Content 2 is used in the Banner.
  • The Extra Content 3 is used below Banner.
  • The Extra Content 4 is used below the Content.

How to use those areas?

Well, you need to download the Extra Content snippets from the Extra Content Website here: http://foss.seydoggy.com/?p=ExtraContent or you can open the Resources folder inside the Theme .dmg file you've purchased and there you'll find all you need.

Give it a try, it's great… you can even use ExtraContent Stacks Plugin, it is a simpler way of doing things with Stacks and a custom ExtraContent Stacks Library item.
Implementing Social Icons Links in your project.
To use this feature in your Theme you just need to copy and paste the code below in your Page Inspector > Header > Sidebar or in any other section in your content page.

Once pasted, replace # with the page url to your social network, then highlight the lines of code and apply "Format > Ignore Formatting" in the RapidWeaver toolbar.

<div id="myExtraContent1">
<div id="socialicons">
<div>
<a href="#" class="zocial icon facebook flat">Sign in with Facebook</a>
<a href="#" class="zocial icon googleplus flat">Sign in with Google+</a>
<a href="#" class="zocial icon twitter flat">Sign in with Twitter</a>
<a href="#" class="zocial icon linkedin flat">Sign in with LinkedIn</a>
</div>
</div>
</div><!-- #myExtraContent -->

The above example will push the icons to the Header section, but you can place them anywhere with just this code:

<div>
<a href="#" class="zocial icon facebook flat">Sign in with Facebook</a>
<a href="#" class="zocial icon googleplus flat">Sign in with Google+</a>
<a href="#" class="zocial icon twitter flat">Sign in with Twitter</a>
<a href="#" class="zocial icon linkedin flat">Sign in with LinkedIn</a>
</div>

The Cool Kids

<a href="#" class="zocial dropbox">Sync with Dropbox</a>
<a href="#" class="zocial evernote">Clip to Evernote</a>
<a href="#" class="zocial forrst">Follow me on Forrst</a>
<a href="#" class="zocial dribbble">Sign in with Dribbble</a>
<a href="#" class="zocial cloudapp">Sign in to CloudApp</a>
<a href="#" class="zocial github">Fork me on Github</a>
<a href="#" class="zocial spotify">Play on Spotify</a>
<a href="#" class="zocial instapaper">Read It Later</a>
<a href="#" class="zocial soundcloud">Follow me on Soundcloud</a>
<a href="#" class="zocial tumblr">Follow me on Tumblr</a>
<a href="#" class="zocial smashing">Read on Smashing Magazine</a>
<a href="#" class="zocial itunes">Available on iTunes</a>
<a href="#" class="zocial appstore">Available on the App Store</a>
<a href="#" class="zocial macstore">Available on the Mac App Store</a>
<a href="#" class="zocial android">Available on Android Market</a>
<a href="#" class="zocial pinterest">Follow me on Pinterest</a>
<a href="#" class="zocial quora">Follow me on Quora</a>
<a href="#" class="zocial lanyrd">Attend on Lanyrd</a>

The Not-So-Cool But Have-To-Be-Invited Kids

<a href="#" class="zocial paypal">Pay with Paypal</a>
<a href="#" class="zocial amazon">Sign in with Amazon</a>
<a href="#" class="zocial skype">Call me on Skype</a>
<a href="#" class="zocial lastfm">Sign in with Last.fm</a>
<a href="#" class="zocial yelp">Write a review on Yelp</a>
<a href="#" class="zocial foursquare">Check in with foursquare</a>
<a href="#" class="zocial klout">Influence with Klout</a>

The Older (but Solid) Kids

<a href="#" class="zocial wikipedia">View on Wikipedia</a>
<a href="#" class="zocial disqus">Sign in with Disqus</a>
<a href="#" class="zocial intensedebate">Sign in with IntenseDebate</a>
<a href="#" class="zocial google">Sign in with Google</a>
<a href="#" class="zocial gmail">Sign in with Gmail</a>
<a href="#" class="zocial vimeo">Upload to Vimeo</a>
<a href="#" class="zocial scribd">Read more on Scribd</a>
<a href="#" class="zocial youtube">Subscribe on YouTube</a>
<a href="#" class="zocial wordpress">Sign in with WordPress</a>
<a href="#" class="zocial songkick">Sign in with Songkick</a>
<a href="#" class="zocial posterous">Sign in with Posterous</a>
<a href="#" class="zocial eventbrite">Sign in with Eventbrite</a>
<a href="#" class="zocial flattr">Tip with Flattr</a>
<a href="#" class="zocial plancast">Follow me on Plancast</a>

The Kids That Kinda Smell but Some People Don't Mind

<a href="#" class="zocial yahoo">Submit resume for CEO</a>
<a href="#" class="zocial ie">Download Internet Explorer 5</a>
<a href="#" class="zocial meetup">Report bugs with Meetup.com</a>
<a href="#" class="zocial openid">Learn how-to-use OpenID</a>
<a href="#" class="zocial html5">Register now for HTML6</a>
<a href="#" class="zocial aol">Chat with your parents</a>

The Kids That Nobody Normally Notices

<a href="#" class="zocial guest">Sign in as guest</a>
<a href="#" class="zocial creativecommons">View Creative Commons Licence</a>
<a href="#" class="zocial rss">Subscribe to RSS</a>
<a href="#" class="zocial chrome">Add to Chrome</a>

The He's-My-Son-So-Of-Course-He's-Here Kid

<a href="#" class="zocial eventasaurus">Sign up for Eventasaurus</a>

Kids By Request

<a href="#" class="zocial weibo">Join me on Weibo</a>
<a href="#" class="zocial plurk">Sign in with Plurk</a>
<a href="#" class="zocial grooveshark">Play on Grooveshark</a>
<a href="#" class="zocial blogger">Post on Blogger</a>
<a href="#" class="zocial viadeo">Sign in with Viadeo</a>
<a href="#" class="zocial podcast">Subscribe to this Podcast</a>
<a href="#" class="zocial fivehundredpx">View Portfolio on 500px</a>
<a href="#" class="zocial bitcoin">Bitcoin accepted here</a>
<a href="#" class="zocial ninetyninedesigns">View Portfolio on 99Designs</a>
<a href="#" class="zocial pinboard">Bookmark with Pinboard</a>
<a href="#" class="zocial stumbleupon">Stumble!</a>
<a href="#" class="zocial myspace">Find me on Myspace</a>
<a href="#" class="zocial windows">Sign in with Windows Live</a>
<a href="#" class="zocial eventful">Find Events with Eventful</a>
<a href="#" class="zocial xing">Sign in with Xing</a>
<a href="#" class="zocial flickr">Upload to Flickr</a>
<a href="#" class="zocial delicious">Sign in with Del.icio.us</a>
<a href="#" class="zocial googleplay">Download from Google Play</a>
<a href="#" class="zocial opentable">Reserve with OpenTable</a>
<a href="#" class="zocial digg">Digg this</a>
<a href="#" class="zocial reddit">Share on Reddit</a>
<a href="#" class="zocial angellist">Fund us on AngelList</a>
<a href="#" class="zocial instagram">Sign-in with Instagram</a>

The Multi-Purpose Kids

<a href="#" class="zocial call">Call a phone</a>
<a href="#" class="zocial email">Send a message</a>
<a href="#" class="zocial cal">Add to calendar</a>
<a href="#" class="zocial cart">Add to cart</a>
<a href="#" class="zocial print">Print this page</a>
<a href="#" class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial">Primary action</a>
<a href="#" class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial">Secondary action</a>

Icon versions of the above

<a href="#" class="zocial icon facebook">Sign in with Facebook</a>
<a href="#" class="zocial icon googleplus">Sign in with Google+</a>
<a href="#" class="zocial icon twitter">Sign in with Twitter</a>
<a href="#" class="zocial icon google">Sign in with Google</a>
<a href="#" class="zocial icon linkedin">Sign in with LinkedIn</a>
<a href="#" class="zocial icon paypal">Pay with Paypal</a>
<a href="#" class="zocial icon amazon">Sign in with Amazon</a>
<a href="#" class="zocial icon dropbox">Sync with Dropbox</a>
<a href="#" class="zocial icon evernote">Clip to Evernote</a>
<a href="#" class="zocial icon skype">Call me on Skype</a>
<a href="#" class="zocial icon guest">Sign in as guest</a>
<a href="#" class="zocial icon spotify">Play on Spotify</a>
<a href="#" class="zocial icon lastfm">Sign in with Last.fm</a>
<a href="#" class="zocial icon songkick">Sign in with Songkick</a>
<a href="#" class="zocial icon forrst">Follow me on Forrst</a>
<a href="#" class="zocial icon dribbble">Sign in with Dribbble</a>
<a href="#" class="zocial icon cloudapp">Sign in to CloudApp</a>
<a href="#" class="zocial icon github">Fork me on Github</a>
<a href="#" class="zocial pinterest icon">Follow me on Pinterest</a>
<a href="#" class="zocial quora icon">Follow me on Quora</a>
<a href="#" class="zocial pinboard icon">Bookmark with Pinboard</a>
<a href="#" class="zocial lanyrd icon">Attend on Lanyrd</a>
<a href="#" class="zocial icon itunes">Download on iTunes</a>
<a href="#" class="zocial icon android">Download on Android</a>
<a href="#" class="zocial icon disqus">Sign in with Disqus</a>
<a href="#" class="zocial icon yahoo">Sign in with Yahoo</a>
<a href="#" class="zocial icon vimeo">Upload to Vimeo</a>
<a href="#" class="zocial icon chrome">Add to Chrome</a>
<a href="#" class="zocial icon ie">Get a new browser</a>
<a href="#" class="zocial icon html5">Made from HTML5</a>
<a href="#" class="zocial icon instapaper">Read It Later</a>
<a href="#" class="zocial icon scribd">Read more on Scribd</a>
<a href="#" class="zocial icon wikipedia">View on Wikipedia</a>
<a href="#" class="zocial icon flattr">Tip with Flattr</a>
<a href="#" class="zocial icon tumblr">Follow me on Tumblr</a>
<a href="#" class="zocial icon posterous">Subscribe to my Posterous</a>
<a href="#" class="zocial icon gowalla">Check in with Gowalla</a>
<a href="#" class="zocial icon foursquare">Check in with foursquare</a>
<a href="#" class="zocial icon yelp">Write a review on Yelp</a>
<a href="#" class="zocial icon soundcloud">Follow me on Soundcloud</a>
<a href="#" class="zocial icon smashing">Read on Smashing Magazine</a>
<a href="#" class="zocial icon wordpress">Sign in with WordPress</a>
<a href="#" class="zocial icon intensedebate">Sign in with IntenseDebate</a>
<a href="#" class="zocial icon openid">Sign in with OpenID</a>
<a href="#" class="zocial icon gmail">Sign in with Gmail</a>
<a href="#" class="zocial icon eventbrite">Sign in with Eventbrite</a>
<a href="#" class="zocial icon eventasaurus">Sign in with Eventasaurus</a>
<a href="#" class="zocial icon meetup">Sign in with Meetup.com</a>
<a href="#" class="zocial icon aol">Sign in with AIM</a>
<a href="#" class="zocial icon plancast">Follow me on Plancast</a>
<a href="#" class="zocial icon youtube">Subscribe on YouTube</a>
<a href="#" class="zocial icon appstore">Available on the Mac App Store</a>
<a href="#" class="zocial icon creativecommons">View Creative Commons Licence</a>
<a href="#" class="zocial icon rss">Subscribe to RSS</a>
<a href="#" class="zocial weibo icon">Follow me on Weibo</a>
<a href="#" class="zocial plurk icon">Follow me on Plurk</a>
<a href="#" class="zocial grooveshark icon">Follow me on Grooveshark</a>
<a href="#" class="zocial blogger icon">Post on Blogger</a>
<a href="#" class="zocial viadeo icon">Sign in with Viadeo</a>
<a href="#" class="zocial podcast icon">Subscribe to this Podcast</a>
<a href="#" class="zocial fivehundredpx icon">View Portfolio on 500px</a>
<a href="#" class="zocial bitcoin icon">Bitcoin accepted here</a>
<a href="#" class="zocial ninetyninedesigns icon">View Portfolio on 99Designs</a>
<a href="#" class="zocial stumbleupon icon">Stumble!</a>
<a href="#" class="zocial itunes icon">Download on iTunes</a>
<a href="#" class="zocial myspace icon">Find me on Myspace</a>
<a href="#" class="zocial windows icon">Sign in with Windows Live</a>
<a href="#" class="zocial eventful icon">Find Events with Eventful</a>
<a href="#" class="zocial klout icon">Influence with Klout</a>
<a href="#" class="zocial xing icon">Sign in with Xing</a>
<a href="#" class="zocial flickr icon">Upload to Flickr</a>
<a href="#" class="zocial delicious icon">Sign in with Del.icio.us</a>
<a href="#" class="zocial googleplay icon">Download from Google Play</a>
<a href="#" class="zocial opentable icon">Reserve with OpenTable</a>
<a href="#" class="zocial digg icon">Digg this</a>
<a href="#" class="zocial reddit icon">Share on Reddit</a>
<a href="#" class="zocial angellist icon">Fund us on AngelList</a>
<a href="#" class="zocial instagram icon">Sign-in with Instagram</a>
<a href="#" class="zocial call icon">Call a phone</a>
<a href="#" class="zocial email icon">Send a message</a>
<a href="#" class="zocial cal icon">Add to calendar</a>
<a href="#" class="zocial print icon">Print this page</a>
<a href="#" class="zocial cart icon">Add to cart</a>
Sign in with Google+ Sign in with Google Sign in with LinkedIn Pay with Paypal Sign in with Amazon Sync with Dropbox Clip to Evernote Call me on Skype Sign in as guest Play on Spotify Sign in with Last.fm Sign in with Songkick Follow me on Forrst Sign in with Dribbble Sign in to CloudApp Fork me on Github Follow me on Pinterest Follow me on Quora Bookmark with Pinboard Attend on Lanyrd Download on iTunes Download on Android Sign in with Disqus Sign in with Yahoo Upload to Vimeo Add to Chrome Get a new browser Made from HTML5 Read It Later Read more on Scribd View on Wikipedia Tip with Flattr Follow me on Tumblr Subscribe to my Posterous Check in with Gowalla Check in with foursquare Write a review on Yelp Follow me on Soundcloud Read on Smashing Magazine Sign in with WordPress Sign in with IntenseDebate Sign in with OpenID Sign in with Gmail Sign in with Eventbrite Sign in with Eventasaurus Sign in with Meetup.com Sign in with AIM Follow me on Plancast Subscribe on YouTube Available on the Mac App Store View Creative Commons Licence Subscribe to RSS Follow me on Weibo Follow me on Plurk Follow me on Grooveshark Post on Blogger Sign in with Viadeo Subscribe to this Podcast View Portfolio on 500px Bitcoin accepted here View Portfolio on 99Designs Stumble! Download on iTunes Find me on Myspace Sign in with Windows Live Find Events with Eventful Influence with Klout Sign in with Xing Upload to Flickr Sign in with Del.icio.us Download from Google Play Reserve with OpenTable Digg this Share on Reddit Fund us on AngelList Sign-in with Instagram Call a phone Add to calendar Print this page Add to cart

The Flat Ones

<a href="#" class="zocial icon facebook flat">Sign in with Facebook</a>
<a href="#" class="zocial icon googleplus flat">Sign in with Google+</a>
<a href="#" class="zocial icon twitter flat">Sign in with Twitter</a>
<a href="#" class="zocial icon google flat">Sign in with Google</a>
<a href="#" class="zocial icon linkedin flat">Sign in with LinkedIn</a>
<a href="#" class="zocial icon paypal flat">Pay with Paypal</a>
<a href="#" class="zocial icon amazon flat">Sign in with Amazon</a>
<a href="#" class="zocial icon dropbox flat">Sync with Dropbox</a>
<a href="#" class="zocial icon evernote flat">Clip to Evernote</a>
<a href="#" class="zocial icon skype flat">Call me on Skype</a>
<a href="#" class="zocial icon guest flat">Sign in as guest</a>
<a href="#" class="zocial icon spotify flat">Play on Spotify</a>
<a href="#" class="zocial icon lastfm flat">Sign in with Last.fm</a>
<a href="#" class="zocial icon songkick flat">Sign in with Songkick</a>
<a href="#" class="zocial icon forrst flat">Follow me on Forrst</a>
<a href="#" class="zocial icon dribbble flat">Sign in with Dribbble</a>
<a href="#" class="zocial icon cloudapp flat">Sign in to CloudApp</a>
<a href="#" class="zocial icon github flat">Fork me on Github</a>
<a href="#" class="zocial pinterest icon flat">Follow me on Pinterest</a>
<a href="#" class="zocial quora icon flat">Follow me on Quora</a>
<a href="#" class="zocial pinboard icon flat">Bookmark with Pinboard</a>
<a href="#" class="zocial lanyrd icon flat">Attend on Lanyrd</a>
<a href="#" class="zocial icon itunes flat">Download on iTunes</a>
<a href="#" class="zocial icon android flat">Download on Android</a>
<a href="#" class="zocial icon disqus flat">Sign in with Disqus</a>
<a href="#" class="zocial icon yahoo flat">Sign in with Yahoo</a>
<a href="#" class="zocial icon vimeo flat">Upload to Vimeo</a>
<a href="#" class="zocial icon chrome flat">Add to Chrome</a>
<a href="#" class="zocial icon ie flat">Get a new browser</a>
<a href="#" class="zocial icon html5 flat">Made from HTML5</a>
<a href="#" class="zocial icon instapaper flat">Read It Later</a>
<a href="#" class="zocial icon scribd flat">Read more on Scribd</a>
<a href="#" class="zocial icon wikipedia flat">View on Wikipedia</a>
<a href="#" class="zocial icon flattr flat">Tip with Flattr</a>
<a href="#" class="zocial icon tumblr flat">Follow me on Tumblr</a>
<a href="#" class="zocial icon posterous flat">Subscribe to my Posterous</a>
<a href="#" class="zocial icon gowalla flat">Check in with Gowalla</a>
<a href="#" class="zocial icon foursquare flat">Check in with foursquare</a>
<a href="#" class="zocial icon yelp flat">Write a review on Yelp</a>
<a href="#" class="zocial icon soundcloud flat">Follow me on Soundcloud</a>
<a href="#" class="zocial icon smashing flat">Read on Smashing Magazine</a>
<a href="#" class="zocial icon wordpress flat">Sign in with WordPress</a>
<a href="#" class="zocial icon intensedebate flat">Sign in with IntenseDebate</a>
<a href="#" class="zocial icon openid flat">Sign in with OpenID</a>
<a href="#" class="zocial icon gmail flat">Sign in with Gmail</a>
<a href="#" class="zocial icon eventbrite flat">Sign in with Eventbrite</a>
<a href="#" class="zocial icon eventasaurus flat">Sign in with Eventasaurus</a>
<a href="#" class="zocial icon meetup flat">Sign in with Meetup.com</a>
<a href="#" class="zocial icon aol flat">Sign in with AIM</a>
<a href="#" class="zocial icon plancast flat">Follow me on Plancast</a>
<a href="#" class="zocial icon youtube flat">Subscribe on YouTube</a>
<a href="#" class="zocial icon appstore flat">Available on the Mac App Store</a>
<a href="#" class="zocial icon creativecommons flat">View Creative Commons Licence</a>
<a href="#" class="zocial icon rss flat">Subscribe to RSS</a>
<a href="#" class="zocial weibo icon flat">Follow me on Weibo</a>
<a href="#" class="zocial plurk icon flat">Follow me on Plurk</a>
<a href="#" class="zocial grooveshark icon flat">Follow me on Grooveshark</a>
<a href="#" class="zocial blogger icon flat">Post on Blogger</a>
<a href="#" class="zocial viadeo icon flat">Sign in with Viadeo</a>
<a href="#" class="zocial podcast icon flat">Subscribe to this Podcast</a>
<a href="#" class="zocial fivehundredpx icon flat">View Portfolio on 500px</a>
<a href="#" class="zocial bitcoin icon flat">Bitcoin accepted here</a>
<a href="#" class="zocial ninetyninedesigns icon flat">View Portfolio on 99Designs</a>
<a href="#" class="zocial stumbleupon icon flat">Stumble!</a>
<a href="#" class="zocial itunes icon flat">Download on iTunes</a>
<a href="#" class="zocial myspace icon flat">Find me on Myspace</a>
<a href="#" class="zocial windows icon flat">Sign in with Windows Live</a>
<a href="#" class="zocial eventful icon flat">Find Events with Eventful</a>
<a href="#" class="zocial klout icon flat">Influence with Klout</a>
<a href="#" class="zocial xing icon flat">Sign in with Xing</a>
<a href="#" class="zocial flickr icon flat">Upload to Flickr</a>
<a href="#" class="zocial delicious icon flat">Sign in with Del.icio.us</a>
<a href="#" class="zocial googleplay icon flat">Download from Google Play</a>
<a href="#" class="zocial opentable icon flat">Reserve with OpenTable</a>
<a href="#" class="zocial digg icon flat">Digg this</a>
<a href="#" class="zocial reddit icon flat">Share on Reddit</a>
<a href="#" class="zocial angellist icon flat">Fund us on AngelList</a>
<a href="#" class="zocial instagram icon flat">Sign-in with Instagram</a>
<a href="#" class="zocial call icon flat">Call a phone</a>
<a href="#" class="zocial email icon flat">Send a message</a>
<a href="#" class="zocial cal icon flat">Add to calendar</a>
<a href="#" class="zocial print icon flat">Print this page</a>
<a href="#" class="zocial cart icon flat">Add to cart</a>

If you need to adjust the Icons size in the flat version of the Icons you can paste this code in your Page Inspector > Header > CSS Tab

body .zocial { font-size: 16px; }
Sign in with Google+ Sign in with Google Sign in with LinkedIn Pay with Paypal Sign in with Amazon Sync with Dropbox Clip to Evernote Call me on Skype Sign in as guest Play on Spotify Sign in with Last.fm Sign in with Songkick Follow me on Forrst Sign in with Dribbble Sign in to CloudApp Fork me on Github Follow me on Pinterest Follow me on Quora Bookmark with Pinboard Attend on Lanyrd Download on iTunes Download on Android Sign in with Disqus Sign in with Yahoo Upload to Vimeo Add to Chrome Get a new browser Made from HTML5 Read It Later Read more on Scribd View on Wikipedia Tip with Flattr Follow me on Tumblr Subscribe to my Posterous Check in with Gowalla Check in with foursquare Write a review on Yelp Follow me on Soundcloud Read on Smashing Magazine Sign in with WordPress Sign in with IntenseDebate Sign in with OpenID Sign in with Gmail Sign in with Eventbrite Sign in with Eventasaurus Sign in with Meetup.com Sign in with AIM Follow me on Plancast Subscribe on YouTube Available on the Mac App Store View Creative Commons Licence Subscribe to RSS Follow me on Weibo Follow me on Plurk Follow me on Grooveshark Post on Blogger Sign in with Viadeo Subscribe to this Podcast View Portfolio on 500px Bitcoin accepted here View Portfolio on 99Designs Stumble! Download on iTunes Find me on Myspace Sign in with Windows Live Find Events with Eventful Influence with Klout Sign in with Xing Upload to Flickr Sign in with Del.icio.us Download from Google Play Reserve with OpenTable Digg this Share on Reddit Fund us on AngelList Sign-in with Instagram Call a phone Add to calendar Print this page Add to cart
How to use the FancyBox with single and grouped images?
Stacks Image 411
To activate the FancyBox effect in an image, first highlight the text or click the image you want to use, then Link to what you want.

This example assumes that you want to link to an image in the Resources panel named image.gif as you can see on the left.

When the Link Inspector drops down, just click the (+) button and give the link in the Custom Attributes a class named "fb-single" / for single images and local videos and "fb-group" / for gallery images or "fb-iframe" for youtube videos.

Preview and Done!
How to replace the default images for your own!
In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)

This step should bring up your Themes panel!

Find the Theme you need to add your images to in this case search Clarion and right click it, this should open a context box where you can see something like "Reveal Contents in Finder"

In the resultant Finder window, place your image(s) into the folder /images/editable_images/ for the Banner Images and /images/bgs/ for the Body Images, Ensure your images are named the same way as the ones in those folders "banner_1.jpg"..."banner_xx.jpg or "bg_1.jpg" … "bg_xx.jpg".

In RapidWeaver, select "01 (jpg)", "02 (jpg)", "03 (jpg)", etc from the "Page Inspector > Styles > Banner Images" Theme Variations set, do the same process if you need to change the Body Background Images.

Note: You can use this free online image editor to edit your images if you want: http://pixlr.com/editor/
Credits and Thanks!
This page is using the Toggle Stack by Will Woodgate
You can get the Toggle Stack for free: here, Thanks Will.