Nuance Changing the world, one site at a time…

• Using the ExtraContent Stack from Adam Merrifield on Vimeo.
• More here: http://foss.seydoggy.com/?p=ExtraContent

The following steps describe how to utilize the Social Icons within your project.

1. Insert the following code in the Sidebar area within RapidWeaver:

   
   <ul class="icons">
   	<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
   	<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
   	<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
   	<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
   	<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
   	<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
   </ul>
   
   

2. Replace the # with the page URL of your social icon.
3. Replace the class value with the corresponding socia nerwork name of the social icon of your choice.
4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.

The following steps describe how to add a banner image by utilizing the Resources section (requires RapidWeaver 5+) within RapidWeaver.

1. Click and drag your image in the Resources area of the project file.
2. Insert the following code in the Custom CSS box within RapidWeaver:

   
   #banner {background-image: url("%resource(my-image.jpg)%")}
   
   

3. Replace the "my-image" with the name of the image. Your image will now display in the banner area of the theme.

The following steps describe how to add a slider to your project (requires RapidWeaver 5+) within RapidWeaver. You can see a demo of the slider in this page.

1. Go to your Page Inspector > Styles and choose Banner Image > Hidden.
2. Go to your Page Inspector > Styles and choose Banner Height > None.
3. Insert the following code in your page Content or Sidebar:

   
   <div id="myExtraContent1">
   	<div class="wt-slider">
   		<div class="s-slide" style="background-image: url(%pathto(images/overlay.png)%), url(%pathto(images/banners/banner_1.jpg)%);)">
   			<div class="s-item">
   				<h1>Page built with Stacks</h1>
   				<p>Nuance includes a FREE Stack called "Gridly" that<br /> you can use to create pages like this!</p>
   			</div>
   		</div>
   		<div class="s-slide" style="background-image:url(%pathto(images/overlay.png)%), url(%pathto(images/banners/banner_2.jpg)%)"><div class="s-item"><h1>Slide 2</h1></div></div>
   		<div class="s-slide" style="background-image:url(%pathto(images/overlay.png)%), url(%pathto(images/banners/banner_3.jpg)%)"><div class="s-item"><h1>Slide 3</h1></div></div>
   		<div class="s-slide" style="background-image:url(%pathto(images/overlay.png)%), url(%pathto(images/banners/banner_4.jpg)%)"><div class="s-item"><h1>Slide 4</h1></div></div>
   		<div class="s-slide" style="background-image:url(%pathto(images/overlay.png)%), url(%pathto(images/banners/banner_5.jpg)%)"><div class="s-item"><h1>Slide 5</h1></div></div>
   	</div>
   </div>
   
   

4. You can change the height of the Slider using this code in Page Inspector > CSS:

   
   .s-slide { height: 650px }
   
   

5. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.
6. Use the Javascript snippets below to configure your Slider like adding "fade, autoplay, pauseOnHover" and more, just place the code in your Page Inspector > Javascript Tab and your are all set:

   
   var fade = true;
   var autoplay = false;
   var infinite = true;
   var pauseOnHover = false;
   var autoplaySpeed = 3000;
   var arrows = true;
   var speed = 300;
   
   

One more nice and cool effect built-in, the ability to use slide effects triggered by scroll events.
To do that you will need to add some class's to the element you want to animate, one simple example would be something like this:

1. Insert the following code in an HTML stack or anywhere that allows HTML:

   
   <div id="myExtraContent2">
   	<div class="wow fadeIn">
   		<h1>Be Creative</h1>
   		<p>Everything you would expect and more from one of the most popular<br /> RapidWeaver Themes out there!</p>
   		<ul class="actions">
   			<li><a href="#three" class="button special scrolly">Learn More!</a></li>
   		</ul>
   	</div>
   </div>
   
   

2. You can see that I've added the class's named "wow" and "fadeIn" in the element above.
3. The other options you can use are here. Just pick the one you want and your done.

Corp Theme as some nice and cool effects built-in, an example is the ability to scroll when clicking on a link. The following steps describe how to scroll through sections, as an example we will be using the ExtraContent 1 in the banner.

1. Insert the following code in an HTML stack or anywhere that allows HTML:

   
   <div id="myExtraContent2">
   	<h1>Be Creative</h1>
   	<p>Everything you would expect and more from one of the most popular<br /> RapidWeaver Themes out there!</p>
   	<ul class="actions">
   		<li><a href="#three" class="button special scrolly">Learn More!</a></li>
   	</ul>
   </div>
   
   

2. Replace the ID value "#content" in the link href above with the name of the ID you need to scroll to and use the class name "scrolly" to enable the scroll effect on you page.
3. Optional ExtraContent sections ID's are #two, #three, #four, #five and #footer.