Adding Images & Video to the Camera Slider

Step 1: Add the image that you want in the Resources folder in RapidWeaver.

Canari Banner Image Resources

Step 2: Open up your snippets menu and click and drag “Canari – Banner or California – Banner” into the Pageinspector under header.

Canari Banner Snippet

Step3: Once dragged it should look like this

Canari Banner Snippet Header

Make sure that it says “image1?.

Canari Snippet image1

Step4: Replace “banner1.jpg with the name of the file that you want to use.

Canari Choose Banner Image

To remove the caption just delete the div “fadeFromTop”.

Canari Banner Edit 1

Inserting a Video

1
2
3
<div id=”image1? data-src=”%resource(banner1.jpg)%”>
     Video Embed Codes are to placed in this area
</div>
Video Embed Codes are to placed in this area

Canari Banner Edit 1

be sure to have a screen shot of the video to place as the banner image.

Extra Content

Step 1. Paste the Included Extra Content Snippet (or copy and paste the code from below) into the main content or the sidebar content.

1
2
3
4
5
6
7
<div id=”myExtraContent1?>SLIDER CAPTION 1 CONTENT HERE</div>
<div id=”myExtraContent2?>SLIDER CAPTION 2 CONTENT HERE</div>
<div id=”myExtraContent3?>SLIDER CAPTION 3 CONTENT HERE</div>
<div id=”myExtraContent4?>BANNER CONTENT HERE</div>
<div id=”myExtraContent5?>ABOVE MAIN AREA CONTENT HERE</div>
<div id=”myExtraContent6?>BOTTOM LEFT CORNER CONTENT HERE</div>
<div id=”myExtraContent7?>BOTTOM RIGHT CORNER CONTENT HERE</div>

Step 2. Replace the “CONTENT HERE” text with the desired content for each Extra Content area.3. Highlight

&

for each Extra Content are you are using and select “Ignore Formatting” from the “Format” Drop down menu. (Or use keyboard shortcut Cmd .[period] )4. When you are done your editor content should look like the screenshot below.

Canari Extra Content Example

Note: Every consecutive Extra Content area needs to be pasted leading up to the last number you are using into the editor in order for them to work properly. Example: To use Extra Content#6, you must include the code for Extra Content#1-#5. Make sure to delete any open space between

&

for every area you do not wish to use or else there will be blank space in those areas. Also the same goes for the Extra Content Stack. Insert all Extra Content areas that lead up to the one you want to use. Make sure to label them in the stacks editor as #1-#7.

Social Media Icons

Canari Social Media Icons

Step 1. Paste any of the included Social Media Snippets (or copy and paste code from below) into the main content or the sidebar content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class=”social behance”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/behance.png)%”/></a></div>
<div class=”social deviantart”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/deviantart.png)%”/></a></div>
<div class=”social dribbble”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/dribbble.png)%”/></a></div>
<div class=”social facebook”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/facebook.png)%”/></a></div>
<div class=”social forrst”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/forrst.png)%”/></a></div>
<div class=”social github”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/github.png)%”/></a></div>
<div class=”social lastfm”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/lastfm.png)%”/></a></div>
<div class=”social linkedin”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/linkedin.png)%”/></a></div>
<div class=”social picasa”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/picasa.png)%”/></a></div>
<div class=”social rss”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/rss.png)%”/></a></div>
<div class=”social skype”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/skype.png)%”/></a></div>
<div class=”social tumblr”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/tumblr.png)%”/></a></div>
<div class=”social twitter”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/twitter.png)%”/></a></div>
<div class=”social youtube”><a href=”WEB-ADDRESS-HERE”><img alt=”socialmedia” src=”%pathto(images/social/youtube.png)%”/></a></div>

Step 2. Replace “WEB-ADDRESS-HERE” text with address you want the icon to link to.

Example:

1
2
3
4
5
<div>
     <a href=”http://www.facebook.com/“>
          <img alt=”socialmedia” src=”%pathto(images/social/facebook.png)%”/>
     </a>
</div>

Step 3. After you have pasted and updated the addresses to each icon highlight all of the code & select “Ignore Formatting” from the “Format” Drop down menu. (Or use keyboard shortcut Cmd .[period] )

The Icons will automatically appear in their place below the Main navigation menu.

Setting Up Masonry Gallery

Canari Masonry Screenshot

By default the Masonry Gallery is on. If you need to turn it on, click the “Page Info” button to bring up the Page Inspector. Click on the “Styles” tab & under “Masonry” select the on option that matches the width of your site (Site width option located at the top of the Styles list).

The only thing you need to do is to turn the thumbnail size to large. To do this open the Page Inspector & click on the “Page” tab. Now click on the “General” button & move the “Thumbnail Size” slider all the way to the right. Refresh your page & the photos will no longer appear blurry.

Canari Thumbnail Size

Single Image Banner

Step 1. To set up the Single Banner Option in Canari takes having the Single Banner Images Snippet.Step one the snippet into the Css within Page Inspector.

Canari Single Image Banner Snippet

Step 2. Replace “RESOURCE_NAME.jpg” with the name of the file that you want to showcase and that should be it.

Canari Single Banner Custom CSS

Banner Transitions

Step 1. Start by installing the Canari – Banner Transition snippet.

Canari Banner Transition Snippet

Step 2. Drag the snippet into the JavaScript section of the Page Inspector.

Canari Banner Transitions Header

Step 3. Pick anyone of the types of captions and place it into the quotes in fx. By default the snippet is set for random.

Canari Banner Transition Selection

Canari Banner Transition Options

Changelog

v1.5.3 (December 18, 2012)

  • Banner Transition Snippet
  • Banner Caption Text Color Options
  • Banner Caption Text Size Options
  • Banner Caption Background Options

v1.5.0 (August 18, 2012)

  • Video option for slider
  • Mobile re-design (fits theme even more nicely)
  • Font size enlarged for mobile devices
  • Nav-menu fix (display issues corrected)

v1.1.0 (August 18, 2012)

  • 100% Responsive
  • Slider supports tons more images and has a single or none option (customizable on every page)

v1.0.4 (June 6, 2012)

  • New style option to change the color of the body
  • New style option to turn the Mobile version of the site off and on
  • New style option to turn Masonry Gallery off and on
  • New style option to change the lines from black to white for darker themed sites
  • New style option to change the caption background color to black

Bug Fixes:

  • Now compatible with the “Consolidate CSS” option in the preferences menu
  • Fixed the link hover effects in the blog page
  • Other minor bug fixes