Adding Slider Images

Step 1: Install the customslider.rwsnippet.

Step2: If the customslider.rwsnippet is installed correctly it will appear in Snippets.

Step 2: If the customslider.rwsnippet is installed correctly it will appear in Snippets.

Conversa Slider Snippet 2

Step 3: Open the page inspector and select Header and click on CSS.

Conversa Custom CSS

Step 4: Drag the Custom Slider snippet in to the Custom CSS box.

Conversa Drag & Drop Snippet
Once dragged in the code should appear as so.

Conversa Snippet Code

Step 5: Go to resources located at the top left of the Rapidweaver window and add the resource of your choice from your computer.

Cabernet Add Resource

Cabernet Gallery Image

Step 5: After loading your resource click on it and highlight the name and copy it.

Step 6: Paste the name in-between %resource( and )%.

Carabine Slider Name Before –> Carabine Slider Name After

Addition

The Daipo Slider comes with 3 images and you can toggle from editing images 1 through 3 by simply changing

Diapo Slider 1

the 1 to 3.

Diapo Slider 3

custom Slider/Banner Images (4.x and earlier)

Step #1: Download RWmultitool lite here.

Step #2: After installing, open RWmultitool.

Step #3: Locate the image you wish to change:

View All Themes

Click on “View All Themes” button

Themes Blank

Click the Theme drop-down & select Themes/Conversa

Conversa Slider Banner JPG

Select the banner or slider image you wish to change from the Image drop-down

Step #4: Drag & drop the photo you wish to use into the window.

Conversa Example

Step #5: Click Save in Theme & you are done. ( Make sure to click on File from the menu and then click Re-publish All Files once you have replaced all the images and are ready to go live)

Standard Quality Image

How to add different banner images to other pages

Step #1: Navigate to the Header-CSS section of the Page Inspector:

Page Info - Page Inspector

Click on the Page Inspector icon

Page Info - Header

Click on the Header Tab

CSS

Click on the CSS Tab

Step #2: Copy and paste the text from below into the text area.

1
2
3
#bannerImage {
     background-image: url(images/slides/banner-2.jpg);
)%);}

Step #3: Change the name of the file inside of the text field to match the image you edited in RWmultitool.

Example: url(images/slides/banner-2.jpg); -> url(images/slides/banner-4.jpg);

Extra-Content

Conversa Extra Content Sections

Step #1: Drag & drop the Extra Content snippet (included with the Conversa Theme) into the Sidebar inside the Page Inspector.

Conversa Extra Content Sidebar

Step #2: Highlight “CONTENT HERE” in the section you wish to edit. Click on Format in the Rapidweaver menu & uncheck Ignore Formatting from the drop down menu.

Ignore Formatting

Step #3: Edit Each “CONTENT HERE” Section according to how you wish it to display on the page.

Linkable Buttons

Conversa Linkable Buttons

Step #1: Go to the edit content section & enter the text you want to display on the button. Example: Button Text

Conversa Button Text

Step #2: Highlight the text & click on the Create Link button in the lower left corner of the window.

Add Link

Step #3: Create a link to the desired page & create a Custom Attribute with the name class & a value of button. Click Set Link and you are done!

Conversa Class Button

Slider Transitions

WARNING: The following Tutorial requires you to modify Javascript theme files. This may result in some undesired effects. It is recommended that you have experience modifying Javascript files before attempting. All changes made to the javascript file will reset when re-installing or updating the theme. To change the effects you will be needing a text editor like TextEdit.

Step 1: Open up your theme options and find the theme you wish to edit.

Select Theme

Step 2: Right click on the theme to reveal the additional options and select “Reveal Contents in Finder”.

Reveal Contents in Finder

Step 3: Navigate in contents and open the “js” folder.

JavaScript JS Folder

Step 4: In the js folder open up the file “diapo.js” in a text editor.

Diapo JS

Step 5: Once the file is opened in a text editor. Locate line of code below(at the top of the file)

1
"fx      : 'simpleFade',

Diapo Slider Transition Options

This is the code that affects the Diapo slider’s effects.

Step 6: simpleFade is the effect that should be enabled and you can change it by pasting any of the options below in-between the ‘ ‘.

Diapo Slider Simple Fade

You can also enable more then one effect by simply separating the options with a comma (more effects shown in the file).

Diapo Slider Simple Fade 2

Social Media Icons

Step 1: Paste the Social Media snippet included with the Conversa theme, or copy and paste the icons you wish to insert from the list below into the editor. ( These Social Media Icons may be pasted into any of the Extra Content sections as well as inside the Site Title.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/aim.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/ask.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/bebo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/betvibes.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/blinklist.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/blogger.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/buzz.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/delicious.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/deviantart.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/digg.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/diigo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/everynote.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/facebook.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/flickr.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/friendfeed.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/friendster.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/furl.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/google.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/lastfm.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/linkedin.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/livejournal.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/mixx.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/myspace.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/newsvine.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/orkut.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/plaxo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/plurk.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/posterous.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/reddit.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/rss.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/shoutwire.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/spurl.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/squidoo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/stumbleupon.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/technorati.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/tumblr.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/twitter.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/vimeo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/wordpress.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/xanga.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/yahoo.png)%"/></a>
<a  href="#"/><img alt="socialmedia" class="social" src="%pathto(images/social/youtube.png)%"/></a>

Step 2: After Inserting the code, copy the web adress you wish to link the icon to and and replace the ‘#’.

Example: Change

1
<a href="#">

to

1
<a href="www.twitter.com">

Step 3: After you have added addresses to all the icons you wish to display, highlight all of the code you have inserted and Click on Format in top menu bar, then click on Ignore Formatting from the drop down menu.

Conversa Ignore Formatting

Social Media Icons Above the Navigation Bar

Conversa Social Media Icons Above Navigation Bar

Step #1: Add the head2 class to each of your Social media snippets.

Example:

1
2
3
<a  href="#"/>
      <img alt="socialmedia" class="social" src="%pathto(images/social/aim.png)%"/>
</a>

should be changed to

1
2
3
<a  href="#"/>
     <img alt="socialmedia" class="social head2" src="%pathto(images/social/aim.png)%"/>
</a>

Step #2: In order to get the icons right above the navigation bar you must paste the edited code (like the example above) or snippet into the site title ( click on the settings icon in the top right corner of the Rapidweaver window).

Step #3: Place the code directly after the title of your site.

Make sure to edit the links before pasting them into the site title. You will be unable to navigate very well once they have been pasted.

Remove Social Media Buttons from the Gallery Viewer

To remove the Social Media buttons in the gallery viewer just add the code below to your Header – CSS section of the Page Inspector.

1
.pp_social {display: none;}

Changelog

v1.5.0 (June 14, 2012)

New Features

  • 8 New Textures
  • New Colour Options
  • New Option to change the Height of the Banner (100px-650px)
  • New Option to add texture to the Main Content
  • New layout Options for the Banner & Main Content Areas
  • New design & layout for mobile devices
  • New Option for the Slider captions to change from a solid color to transparent white or black

Bug Fixes

  • Now compatible with the “Consolidate CSS” option in the preferences menu
  • IE8 and earlier compatibility enhancements
  • Shadows & Coloring fixes
  • Other minor bug fixes

v1.1.0 (March 27, 2012)

New Features

  • Added CSS3 animation to all Social Media Icons
  • Complete redesign for the Photo Gallery, including smooth CSS3 transition hover effects for photo descriptions
  • Complete redesign for the Movie Gallery
  • Added Styled Headings, Dates, Tags, & Categories to the Blog page to make it more stylish & readable
  • Added Javascript encoded Headings to the Blog Sidebar
  • Added the option to change the base size Font from 9pt-16pt (originally set to 11pt)
  • Changed the Font Size coding to “percent” & “em” so the content text remains fully scalable for mobile devices & for accessibility
  • Added styling for the Blockqoute markup

Bug Fixes

  • Restyled the breadcrumbs to make them more readable
  • Fixed an issue with the drop down menu while using the “Gloss” Site Background Texture
  • Fixed a problem with some content text not resizing properly
  • Fixed a problem with the Movie page title not taking the style of the “Title Font” option
  • Other minor bug fixes