Affero 2

How To Set Up the Slider

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Slider by selecting ‘Slider’ under the Banner Setting option.

inspector  -> iehjfdjg -> aacgbdbc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg
Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘slide’.

ficbecib

 

Step 5: Repeat steps 3 and 4 until you have as many images you want to use in the slider. Affero’s Slider will now do the rest! The order you place your images into the slider, is the order the slider will display them.

 


How to Add Captions to Your Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor. Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

Caption

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating
Step 4: Now highlight the white space between the code and select “Ignore Formatting” again. This is so you can use RapidWeaver’s formatting tools on the caption (e.g. change color or font-size)

Caption

 

Step 5: Add your desired caption in the white space between the pink highlighted code.

Captioning

 

Step 6: Repeat Steps 2-5 until you have your desired number of contents. Just like the slide images, the captions will display in the order that you place them. If you want to leave one slide without a caption just don’t add text in between the pink highlighted code.

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


 How to Add Videos (iframes) to the Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor.

<li class=”slide”>

</li>

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating

 

Step 5: Locate the video you want to use on Youtube or Vimeo. Use the share link “Embed” option to get the iframe code. Paste the iframe code into the space between <li class=”slide”> and </li>

iaegjdfi

acaijbef

 

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


How To Enable Lightbox on an Image

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Lightbox by selecting checking the ‘Lightbox On’ checkbox under the Toggles heading.

inspector -> iehjfdjg -> aehagchc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg

Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the Alt Tag to set what will display as a caption for the image.

Light Box


How To Add A Button

Step 1: Type in your desired button text into your editor and hightlight the text.

ButtonText

 

Step 2: click the Add link button.

cechgeed

 

Step 3: Add a link to where you would like the button to navigate to and then add a ‘class’ with the value ‘button’.

ebejjeeg

 

Step 4: Click ‘Set Link’ and you are done.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Charis

Slider/Banner Images

Step 1

Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2

Copy and Paste the code below into the main content editor or into the sidebar content.

<div id="sliderContent"> 
<!--Paste Step 3's Code Here --> 
</div>

Step 3

Select from the 3 options below and copy and paste the code into the sliderContent Div you pasted from Step 2.

1: Single banner image or a default slider image with no caption

<div data-image-name="IMAGE_NAME.jpg" ></div>

2: Slider image with adjustable transition effect

<div 
data-image-name="IMAGE_NAME.jpg" 
data-split="horizontal-counterclockwise" 
></div>

3: Slider image with adjustable transition effect & caption

<div 
data-image-name="IMAGE_NAME.jpg" 
data-split="horizontal-counterclockwise" 
data-caption-header="Title" 
data-caption-text="Place paragraph text here" 
data-caption-cite="Firstname Lastname" 
></div>

You can change the “data-split” value to adjust the transition effect. Each value represents how the image will slice on transtion. The available options are:

horizontal
horizontal-right
horizontal-left
horizontal-clockwise
horizontal-counterclockwise
vertical
vertical-top
vertical-bottom
vertical-clockwise
vertical-counterclockwise

Change the “data-caption-header” value to add a title or delete this line if you do not wish to have a title.
Change the “data-caption-text” value to add text.
Change the “data-caption-cite” value to add a cited name or delete this line if you are not using a quote.

Step 4

Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5

Repeat Steps 3 & 4 until you have as many photos that you want to display in the slider. After you have added your images and changed your values, highlight all of the code and select “Ignore Formatting” from the Format drop down menu. Your finished code should be similar to the screen shot below.

Screen Shot 2013-12-20 at 10.30.01 AM

NOTE: RapidWeaver’s editor uses two types of quotation marks. Be sure your code uses straight quotation marks Screen Shot 2013-12-20 at 10.24.50 AM and not curly quotation marks Screen Shot 2013-12-20 at 10.25.02 AM. The curly quotation marks are not recognized as code and will cause the slider to load improperly.


Adding an Image to the Background

Step 1

Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2

Copy and paste the code below into your Page Inspector > HTML > CSS section.

1
2
3
.charis-background {
    background-image: url(%resource(IMAGE_NAME.jpg)%);
}

Step 3

Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)


Extra-Content (non-Stacks page)

Step 1

Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

NOTE: if you are using a styled text page you may also use the Main Content editor

Step 2

Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
Extra-Content 4 content Here 
</div> 
<div id="myExtraContent5"> 
Extra-Content 5 content Here 
</div>

Step 3

Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4

Add your desired content to each section. Highlight everything between and & select Ignore Formatting from the Format Drop down menu (or press command + . ). This will allow you to add formatting to the content you have added.

Step 5

Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be similar to the screen shot below.

Extra content in sidebar


Create Button

Step 1

Type into the editor whatever you would like the button to say on it.

Step 2

Highlight your text & select the Add Link button.

Add Link Button or  Stacks add link

Step 3

Type in the URL or select where you would like the button to navigate to.

Step 4

Add a new Custom Attribute Named: class with the Value: btn

Screen Shot 2013-12-20 at 10.48.53 AM

NOTE: You can also add an additional color value after btn. The available values are:

red
blue
green
purple
cyan
yellow

Step 5

Click set link.


Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons


Chocolat Lightbox

Step 1

Turn on Chocolat Lightbox in the Styles section of the Page Inspector.

Screen Shot 2013-12-20 at 11.00.30 AM

Step 2

In order for the Lightbox to work correctly you will need the original image and a thumbnail (smaller version) of the image.

Step 3

Add the original image into the Resources section of RapidWeaver.

Adding an image to your resources

 

Then drag and drop the thumbnail image into the place you would like the image thumbnail popup to display.

Step 4

Next, right click the thumbnail image and select Add Link. (Or click the Add link button after selecting the image)

Step 5

Click on the URL drop down and select the resource from the list.

download

Step 6

Add a custom attribute titled class with the value lightbox and then click Set Link.

Chocolate lightbox add link

Step 7

Switch to preview mode to see if it worked and you are done. To add more photos repeat Steps 3-6.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Hemera

Slider Images

Step 1: Turn on the built in Camera slider in the Page Inspector Styles section.

hemera turn on the slider

Step 2: Add all the images you want to use to the Resources section.

Adding an image to your resources

Image sizes for site 960px width
Small: 960×200 Pixels
Medium: 960×288 Pixels
Large: 960×480 Pixels
Oversized: 960×720 Pixels

Image sizes for 1280px site width
Small: 1280×200 Pixels
Medium: 1280×384 Pixels
Large: 1280×640 Pixels
Oversized: 1280×960 Pixels

Step 3: Copy and Paste the code below into the main content editor or into the sidebar content. (If you are using Stacks, and have the Extra Content Stack copy the code below labeled Extra Content Stack).

Content or Sidebar Editor

<div id="myExtraContent1"> 
  <div id="camera_wrap"> 
    <!--Paste Step 4's Code Here --> 
  </div> 
</div>

Extra Content Stack

<div id="camera_wrap"> 
  <!--Paste Step 4's Code Here --> 
</div>

Step 4: Copy and Paste the code below into the Extra Content & Camera wrap Div you pasted from Step 3. (Or into the Extra Content Stack if you are using stacks).

<div data-src="%resource(IMAGE_NAME.jpg)%" data-fx="simpleFade"> 
  <div> Caption here </div>
</div>

Step 5: Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 6: Change “Caption here” to your desired caption or delete the entire section if you wish not to display a caption.

Delete

<div> Caption here </div>

Step 7: Repeat Steps 4-6 until you have as many photos you want to display in the slider. If you are using the main content or sidebar areas, make sure to highlight the code and select “Ignore Formatting” from the Format drop down menu.

Here is an example of what a finished slider code would look like.
<div id="camera_wrap"> 
  <div data-src="%resource(image1.jpg)%" data-fx="simpleFade">
    <div> Caption One </div>
  </div>
  <div data-src="%resource(image2.jpg)%" data-fx="simpleFade">
    <div> Caption Two </div>
  </div>
  <div data-src="%resource(image3.jpg)%" data-fx="simpleFade">
    <div> Caption Three </div>
  </div>
</div>

Transition Slider Effects

Step 1: After you have added images to your slider you will notice a data-fx value after the resource names. You can change the data-fx value to one of the values below to get a different transition effect.

‘random’
‘simpleFade’
‘curtainTopLeft’
‘curtainTopRight’
‘curtainBottomLeft’
‘curtainBottomRight’
‘curtainSliceLeft’
‘curtainSliceRight’
‘blindCurtainTopLeft’
‘blindCurtainTopRight’
‘blindCurtainBottomLeft’
‘blindCurtainBottomRight’
‘blindCurtainSliceBottom’
‘blindCurtainSliceTop’
‘stampede’
‘mosaic’
‘mosaicReverse’
‘mosaicRandom’
‘mosaicSpiral’
‘mosaicSpiralReverse’
‘topLeftBottomRight’
‘bottomRightTopLeft’
‘bottomLeftTopRight’
‘bottomLeftTopRight’
‘scrollLeft’
‘scrollRight’
‘scrollHorz’
‘scrollBottom’
‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Extra-Content (non-Stacks page)

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

Note, if you are using a styled text page you may also use the Main Content editor

Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
  Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
  Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
  Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
  Extra-Content 4 content Here 
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between and & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be simular to the screen shot below.

Extra content in sidebar

Create Button

Step 1: Type into the editor whatever you would like the button to read.

ButtonText

Step 2: Highlight your text & select the Add Link button.

Add Link Button or  Stacks add link

Step 3: Type in the URL or select where you would like the button to navigate to.

Step 4: Add a new Custom Attribute named “class with” the value “button”

button class

Click Set Link and you are done!

Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons

Chocolat Lightbox

Step 1: Turn on Chocolat Lightbox in the Styles section of the Page Inspector.

Step 2: In order for the Lightbox to work correctly you will need the original image and a thumbnail (smaller version) of the image.

Step 3 Drag and drop the original image into the Resources section of RapidWeaver. Then drag and drop the thumbnail image into the place you would like the image link to display.

Step 4: Next, right click the thumbnail image and select Add Link. (Or click the Add link button after selecting the image)

Add Link Button

Step 5: Click on the URL drop down and select the resource from the list.

Step 6: Add a custom attribute titled class with the value lightbox and then click Set Link.

Chocolate lightbox add link

Step 7: Switch to preview mode to see if it worked and you are done. To add more photos repeat Steps 3-6.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Erebus

Slider Images

Step 1: Add all the images you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML Header Section of the Page Inspector. Page Inspector - HTML - Header Step 3: Copy and Paste the code below into the text area.

<div data-src="%resource(IMAGE_NAME.jpg)%" data-fx="simpleFade"> 
  <div class="camera_caption fadeFromBottom"> Caption here </div> 
</div>

Step 4: Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive) Step 5: Change “Caption here” to your desired caption or delete the entire section if you wish not to display a caption. Delete:

<div class="camera_caption fadeFromBottom"> 
  Caption here 
</div>

Step 6: Repeat steps 3-5 untill you have as many photos you want to display in the slider, preview and you are complete.

Slider Transition Effects

Step 1: After you have added images to your slider you will notice a data-fx value after the resource names. You can change the data-fx value to one of the values below to get a different transition effect. ‘random’ ‘simpleFade’ ‘curtainTopLeft’ ‘curtainTopRight’ ‘curtainBottomLeft’ ‘curtainBottomRight’ ‘curtainSliceLeft’ ‘curtainSliceRight’ ‘blindCurtainTopLeft’ ‘blindCurtainTopRight’ ‘blindCurtainBottomLeft’ ‘blindCurtainBottomRight’ ‘blindCurtainSliceBottom’ ‘blindCurtainSliceTop’ ‘stampede’ ‘mosaic’ ‘mosaicReverse’ ‘mosaicRandom’ ‘mosaicSpiral’ ‘mosaicSpiralReverse’ ‘topLeftBottomRight’ ‘bottomRightTopLeft’ ‘bottomLeftTopRight’ ‘bottomLeftTopRight’ ‘scrollLeft’ ‘scrollRight’ ‘scrollHorz’ ‘scrollBottom’ ‘scrollTop’ Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML Header Section of the Page Inspector. Page Inspector - HTML - Header Step 3: Copy and Paste the code below into the text area.

<img src="%resource(IMAGE_NAME.jpg)%" alt="Banner">

Step 4: Change IMAGE_NAME.jpg to match the name of your resource. Preview and you are done!

Background Image

Step 1: Add the image you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML > CSS Section of the Page Inspector.Page Inspector CSS section Step 3: Copy and Paste the code below into the text area.

1
2
3
#pageWrap {
     background-image: url(%resource(IMAGE_NAME.jpg)%);
}

Step 4: Change IMAGE_NAME.jpg to match the name of your resource. Preview and you are done! Note: If your web page does not contain much content & the image is not stretching to the bottom of the browser window, add the code below to your Header-CSS section. This will force the image to fit to the browser window.

1
2
3
4
5
#pageWrap {
     position: absolute;
     top:0;
     bottom:0;
}

Extra-Content (non-Stacks page)

Step 1: Navigate to the Sidebar Tab of the Page Inspector. Page inspector sidebar tab Note: if you are using a styled text page you may also use the Main Content editor Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
  Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
  Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
  Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
  Extra-Content 4 content Here 
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 4: Add your desired content to each section. Highlight everything between

<div id="myExtraContent1">
and
</div>

& select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 5: Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be simular to the screen shot below. Extra content in sidebar

Create Button

Step 1: Type into the editor whatever you would like the button to read. ButtonText Step 2: Highlight your text & select the Add Link button. Add Link Button  or Stacks add link Step 3: Type in the URL or select where you would like the button to navigate to. Step 4: Add a new Custom Attribute Named: class with the Value: button button class Click Set Link and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below: Just Vector Glyph Chart Step 2: Type the corresponding letter or number into your desired location. Step 3: Highlight your letter or number and select the Add Link button. Add Link Button  or Stacks add link Step 4: Type in the URL to your social media page & add a new Custom Attribute named “class” with the value “social” social media link *check the Open in New Window Box if you do not want visitors to leave your page when clicking on the link Click Set Link and you are done!

Engraved Content Separators

Step 1: Copy the CSS code below & paste it into your Page Inspector’s HTML CSS section.

1
2
3
4
5
6
hr {
     height: 1px;
     background: rgba(0,0,0, .4);
     border: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

Step 2: Type in the following code where you would like the seperator to appear:

<hr>

Preview and you are done!

Glass-like Promo Boxes

Step 1: Copy the CSS code below & paste it into your Page Inspector’s HTML CSS section.

1
2
3
4
5
6
.glass,.glass:before {
     padding: 0px 15px;
     text-align: center;
     width: 150px;
     height: 150px;
}

Step 2: Copy the code below & paste it into the editor.

<div class="glass"> Content Here </div>

Step 3: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 4: Highlight “Content Here” between the div tags and select Ignore Formatting from the Format Drop down menu again (or press command + . ). Step 5: Add content in-between the div tags & preview to see what you have done. Step 6: You may notice the glass box area does not match your content. To edit the height & width of your boxes go to the Page Inspector’s HTML CSS section. Adjust the height and width values in the CSS code you pasted at the begining of the tutorial. Repeat steps 2-5 untill you have a desirable amount of Promo Boxes.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Carpe Diem

Adding Images to the Slider

Step 1: Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<img src="%resource(paisley.png)%" alt="example" title="Caption text here" />

Step 4: Change name_of_resource.jpg to match the name of your resource & be sure to make sure the extension matches as well (png, jpeg, or jpg). The names are case sensitive so slide-1.jpg in the code and slide-1.JPG in the resource section would not work.

Step 5: Change the value of ‘title’ to your desired caption or delete title if you don’t wish to display a caption.

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be similar to the screen shot below.

Slider images in the header

Adding Content to the Promotional Boxes

Step 1: Navigate to the Sidebar Tab of the Page Inspector > Sidebar.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the Sidebar text area.

<div id="myExtraContent1"> 
Promo Box 1 Content Here 
</div> 
<div id="myExtraContent2"> 
Promo Box 2 Content Here 
</div> 
<div id="myExtraContent3"> 
Promo Box 3 Content Here 
</div> 
<div id="myExtraContent4"> 
Promo Box 4 Content Here 
</div>

Step 3: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ).

ignore formatting

Step 4: Add your desired content to each section replacing the text “Promo Box # Content Here”. Then Highlight everything between

<div id="myExtraContent#">
and
</div>

& select Ignore Formatting from the Format Drop down menu again (or press ? . ). The content will now not be highlighted in pink anymore and only the HTML code will be highlighted as code.

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Promo Boxes

Social Media Icons

Step 1: Social Media Icons can be placed in the Main Content area, Sidebar, and Site Slogan. Copy and paste the code below into your desired location.

<div id="socialMedia"> 

</div>

Step 2: Copy the code below and paste it between <div id=”socialMedia”> & </div>.

<a href="http://www.webaddresshere.com"><span>#</span></a>

Step 3: Find the Social Media Icon you wish you use from the Glyph Chart below.

Just Vector Glyph Chart

Step 4: Type the corresponding letter in-between <span> & </span>.

Step 5: Replace http://www.webaddresshere.com with the address to your social media site.

Step 6: Repeat steps 3 – 5 untill you have all the icons you wish to use.

Step 7: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ). Your finished results should resemble the screen shot below.

Social Media links HTML

Navigation Subtitles

Step 1: After creating a page, double click the title to begin renaming the page.

Step 2: Type in <p> & then your desired subtitle followed by </p>. Your finished title should resemble the screenshot below.

subtitle

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Conversa

Adding Slider Images

Step 1: Install the conversa-sliderimages.rwsnippet.

conversa snippets

Step 2: Navigate to the Page Inspector HTML CSS section.

Page Inspector - HTML - CSS

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

conversa slider snippet

Step 4: Add the images you want to use to your Resources section.

Adding an image to your resources

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 )%.

conversa slider

Adding Banner Images

Step 1: Add the image you want to use to your Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML CSS section of the Page Inspector:

Page Inspector - HTML - CSS

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

1
2
3
#bannerImage {
     background-image: url(%resource(paisley.png)%);
)%);}

Step 4: Change the name of the file inside of this code (paisley.png) to match the image you added to the resources section.

Extra-Content

Step 1: Drag & drop the Extra Content snippet into the Sidebar inside the Page Inspector.

Page inspector sidebar tab

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.

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

Extra content in sidebar

Linkable Buttons

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

ButtonText

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

Add Link Button

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!

Social Media Icons

Step 1: Paste the Social Media snippet included with the Conversa theme.

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

Example:

<a href="#">
1
 

to

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

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.

Social Media Icons Above the Navigation Bar

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

Example:

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

should be changed to

<a href="#"/> <img alt="socialmedia" src="%pathto(images/social/aim.png)%"/> </a>
1
<strong style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">Step 2: </strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">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.</span>

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 HTML – CSS section of the Page Inspector.

1
.pp_social {display: none;}
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Cinema

Extra-Content

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1">
     Extra-Content above main content Here
</div>
<div id="myExtraContent2">
     Extra-Content below main content Here
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between

<div id="myExtraContent1">

and

</div>
1
 

& select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Extra content in sidebar

Slider Images

Step 1: Add all the images you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<div data-src="%resource(IMAGE1.jpg)%" data-fx="simpleFade">
  <div class="camera_caption fadeFromBottom"> 
    Caption here 
  </div> 
</div>

Step 4: Change “IMAGE1.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5: Change “Caption here” to your desired caption or delete the text below if you wish not to display a caption.

<div class="camera_caption fadeFromBottom"> 
  Caption here 
</div>

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be simular to the screen shot below.

Cinema Slider Code

Slider Transitions

Step 1: After you have added images to your slider, change the data-fxvalue to one of the values below.

‘random’

‘simpleFade’

‘curtainTopLeft’

‘curtainTopRight’

‘curtainBottomLeft’

‘curtainBottomRight’

‘curtainSliceLeft’

‘curtainSliceRight’

‘blindCurtainTopLeft’

‘blindCurtainTopRight’

‘blindCurtainBottomLeft’

‘blindCurtainBottomRight’

‘blindCurtainSliceBottom’

‘blindCurtainSliceTop’

‘stampede’

‘mosaic’

‘mosaicReverse’

‘mosaicRandom’

‘mosaicSpiral’

‘mosaicSpiralReverse’

‘topLeftBottomRight’

‘bottomRightTopLeft’

‘bottomLeftTopRight’

‘bottomLeftTopRight’

‘scrollLeft’

‘scrollRight’

‘scrollHorz’

‘scrollBottom’

‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

1
<img alt="Banner" src="%resource(IMAGE.jpeg)%" />

Step 4: Change IMAGE.jpeg to match the name of your resource.

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Just Vector Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Step 3: Highlight your letter or number and select the Add Link button.

Add Link Button or  Stacks add link

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

social media link

Click Set Link and you are done!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Cabernet 2

Important: Turn off Consolidate CSS

This theme is not compatible with the “Consolidate CSS” feature. You must disable for the theme to display correctly.

To do so in RapidWeaver 6, open your Configure menu and under the “Advanced Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS Off

To do so in RapidWeaver 5, open your Preferences menu and under the “Publishing Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS

Change the Font Size of Site Description or Navigation Menu

Step 1: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 2: Enter the following:

1
2
3
4
5
6
#menu li a {
     font-size: 18px;
}
.ltswrap h2 {
     font-size: 18px !important;
}

Step 3: #menu li a will change the font size of your navigation menu links. The other will change the font size of your Site description. You can replace 18px to meet any size of your choosing.

Static Background Image

Step 1: Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Add the following text to the Header Section:

1
{image : '%resource(paisley.png)%'}

*Make sure the resource name matches the name in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif)  if it does not match as well the page will not load

Preview and you are done!

Background Image Slideshow

Step 1:  Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Add the following text to the Header Section:

1
2
3
{image : '%resource(slider1.jpg)%'},
{image : '%resource(slider2.jpg)%'},
{image : '%resource(slider3.jpg)%'}

*Be sure to separate each image with a comma while leaving the last image with no comma after it & make sure the resource names match the names in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif) if it does not match as well the page will not load

You may add as many photos as you wish to the slide show. Preview and you are done!

Scrollable Background Image

Step 1: Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 4: Add the following text to the CSS Section:

1
2
3
html {
     background-image: url(%resource(background.jpg)%);
}

*Make sure the resource name matches the name in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif) if it does not match as well the page will not load

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Just Vector Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Step 3: Highlight your letter or number and select the Add Link button.

Add Link Button or Stacks add link

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

social media link

*check the Open in New Window Box if you do not want visitors to leave your page when clicking on the link

Click Set Link and you are done!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS

Cabernet

Important: Turn off Consolidate CSS

This theme is not compatible with the “Consolidate CSS” feature. You must disable it for the theme to display correctly.

To do so in RapidWeaver 6, open your Configure menu and under the “Advanced Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS Off

To do so in RapidWeaver 5, open your Preferences menu and under the “Publishing Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS

Custom Background Image

Step 1: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 2: Copy and paste the code from below into the text box.

1
body {background-image:url(%resource(NAME OF RESOURCE HERE)%);}

Step 3: Drag and drop an image you would like to use into your “Resources” section.

Adding an image to your resources

Step 4: After loading your resource, highlight the name of the resource and copy it.

Step 5: Paste the name in-between %resource( & )%);.

When you are finished the code should look this:

1
body {background-image:url(%resource(paisley.jpg)%);}

Note: Your image should be large enough to fill large screen resolutions, otherwise the image will repeat.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/jons/">
RSS