Autonomy Manual
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 »
Give it a try for yourself »
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.
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.
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;
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.
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.
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.
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 -->
<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.
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);
});
var someLinks = [
"http://www.google.com",
"http://www.twitter.com",
"http://www.facebook.com"
];
$wt('.slides li').rwAddLinks(someLinks);
});
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!
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. Autonomy 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.
Implementing twitter streams into a website can be very important in helping you get a more professional look. Autonomy 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.
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 :)
<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 :)
Configure your Twitter ID
The next step is to include the code snippet below in to your Page Inspector > Header > Javascript Tab
Now you just need to adjust your settings to something that you think it reflects your needs.
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.
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.
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.
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.
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.
The above example will push the icons to the Header section, but you can place them anywhere with just this code:
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 -->
<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>
<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>
<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>
Sync with Dropbox
Clip to Evernote
Follow me on Forrst
Sign in with Dribbble
Sign in to CloudApp
Fork me on Github
Play on Spotify
Read It Later
Follow me on Soundcloud
Follow me on Tumblr
Read on Smashing Magazine
Available on iTunes
Available on the App Store
Available on the Mac App Store
Available on Android Market
Follow me on Pinterest
Follow me on Quora
Attend on Lanyrd
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>
<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>
<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>
<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>
<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>
<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>
Join me on Weibo
Sign in with Plurk
Play on Grooveshark
Post on Blogger
Sign in with Viadeo
Subscribe to this Podcast
View Portfolio on 500px
Bitcoin accepted here
View Portfolio on 99Designs
Bookmark with Pinboard
Stumble!
Find me on Myspace
Sign in with Windows Live
Find Events with Eventful
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
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>
<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>
<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 Facebook
Sign in with Google+
Sign in with Twitter
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
Send a message
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>
<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 Facebook
Sign in with Google+
Sign in with Twitter
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
Send a message
Add to calendar
Print this page
Add to cart
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!
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!
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 Autonomy 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, Ensure your images are named the same way as the ones in those folders "banner_1.jpg"..."banner_xx.jpg.
In RapidWeaver, select "01 (jpg)", "02 (jpg)", "03 (jpg)", etc from the "Page Inspector > Styles > Banner Images" Theme Variations set.
Note: You can use this free online image editor to edit your images if you want: http://pixlr.com/editor/
This step should bring up your Themes panel!
Find the Theme you need to add your images to in this case search Autonomy 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, Ensure your images are named the same way as the ones in those folders "banner_1.jpg"..."banner_xx.jpg.
In RapidWeaver, select "01 (jpg)", "02 (jpg)", "03 (jpg)", etc from the "Page Inspector > Styles > Banner Images" Theme Variations set.
Note: You can use this free online image editor to edit your images if you want: http://pixlr.com/editor/
This page is using the Toggle Stack by Will Woodgate
You can get the Toggle Stack for free: here, Thanks Will.
You can get the Toggle Stack for free: here, Thanks Will.