Simplify Manual

Using Extra Content (EC) Areas 1 to 3
Stacks Image 286

Extra Content Areas

As you can see on the left image there are 3 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 Banner.
  • The Extra Content 3 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 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 (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="myExtraContent1">
<div id="slider">
<img src="%resource(images/banner_1.jpg)%" />
<img src="%resource(images/banner_2.jpg)%" />
<img src="%resource(images/banner_3.jpg)%" />
<img src="%resource(images/banner_4.jpg)%" />
<img src="%resource(images/banner_5.jpg)%" />
</div>
</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
Convert a RapidWeaver photo album into a PrettyPhoto lightbox gallery
Stacks Image 411
To activate the PrettyPhoto album effect in a Photo Album page, all you need to do is copy and paste the code below into your Page Inspector > Header > Javascript Tab:

jQuery(document).ready(function($){ $('.thumbnail-frame').each(function(i,item){ $('a:first',this).attr( 'rel','prettyPhoto[gallery1]' ).attr( 'href', $('a:first',this).children('img')[0].src.replace(/\-thumb/,'-full') ).attr( 'title', $('p.thumbnail-caption:first',this).text() ); }); $('.thumbnail-frame a').prettyPhoto({theme:'dark_rounded'}); });

Preview and Done!
Change the prettyPhoto lightbox Theme

As you can see highlighted on the left screenshot I've added some code to the end of the function: You can use 5 types of themes:

dark_rounded
dark_square
light_rounded
light_square
facebook

You just need to replace the value above for it to work.
Stacks Image 98
Using the Built in prettyPhoto Script!
Stacks Image 76
To enable the PreettyPhoto on a image, link the image 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.
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 Simplify 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/
Credits and Thanks!
This page is using the Toggle Stack by Will Woodgate
You can get the Toggle Stack for free: here, Thanks Will.
© 2012 WeaverThemes. Contact Me