Elegance Manual

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 Adavanced built-in slideshow in your project
Stacks Image 197

Enable the option in the Styles Tab

This instructions will help you how to use the built-in advanced slideshow functionality in your own project, that lets you add captions to your slides.

So, the first thing to do is to Enable the Advanced Slides like the example shown on the left screenshot.

Very Important: 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. RapidWeaver.
Stacks Image 47

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.

<div id="myExtraContent1">

<! -------------------------------------------------------------------------------------------------------------- THE SLIDER CONTENT --------------------------------------------------------------------------------------------------------------- >
<div id="featured">
<img src="%resource(images/banner_1.jpg)%" />
<img src="%resource(images/banner_2.jpg)%" />
<img src="%resource(images/banner_3.jpg)%" data-caption="#htmlCaption" />
<img src="%resource(images/banner_4.jpg)%" />
<img src="%resource(images/banner_5.jpg)%" />
</div>
<!-- Captions for Slides -->
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>

</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.
Stacks Image 214
Using the [Social Network Icons (HTML)] snippet
Stacks Image 253
As you can see on the left you need to drop the code snippet in to an area of our project, those can be place in any place you want, it could be the sidebar in Page Inspector or in your Page Content.

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

Here's the code snippet:

<div id="social">
<a href="#"><img src="%pathto(images/icons/aquaticus_social/24px/facebook.png)%" alt="Facebook" /></a>
<a href="#"><img src="%pathto(images/icons/aquaticus_social/24px/twitter.png)%" alt="Twitter" /></a>
<a href="#"><img src="%pathto(images/icons/aquaticus_social/24px/lastfm.png)%" alt="Last.fm" /></a>
<a href="#"><img src="%pathto(images/icons/aquaticus_social/24px/linkedin.png)%" alt="LinkedIn" /></a>
<a href="#"><img src="%pathto(images/icons/aquaticus_social/24px/vimeo.png)%" alt="Vimeo" /></a>
</div>

Changing the icons size!

As you can see highlighted the value 24xp, is the default size that will going to be applied to your icons, you can change this by editing that value to something different, like the values below:

16px
24px
48px
60px

Also you need to edit the URL to point to your social network changing the # value, as an example if I want to insert my Twitter URL I just need to change the # value and replace it with my Twitter page, http://twitter.com/weaverthemes
Stacks Image 267
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 Infinity 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/ Ensure your images are named the same way as the ones in that folder "banner_1.jpg"..."banner_xx.jpg".

In RapidWeaver, select "Banner 01", "Banner 02", "Banner 03", 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/
Using Extra Content (EC) Areas 1 & 2
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 Banner.
  • The Extra Content 2 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.
Using the Built in prettyPhoto Script!
Stacks Image 76
To enable the PreettyPhoto on a image or link, just link the image to a bigger image in the Resources, then just add a Name and Value of rel=prettyPhoto to the Custom Attributes, something like what you can see on the left.

Preview and you're done.
Credits and Thanks!
This page is using the Toggle Stack by Will Woodgate
You can get the Toggle Stack for free: here, Thanks Will.