Ragnarok

Built-in Nivo Slider

note: The background for Ragnarok is the Nivoslider / Banner image

1. Double click and install 1LD– Nivo Image & 1LD – Nivo Image with Caption.

2. Drag & Drop 1LD -Nivo Image & 1LD – Nivo Image with Caption into the sidebar or any other location that allows you to put in content.

1LD Nivo

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the 1LD- Nivo Image snippet.

Resource Paste


Font Awesome

1. Double click and install 1LD– font awesome.

2. Drag & Drop 1LD– font awesome into where ever you want to place the icon.

Screen Shot 2015-07-31 at 2.35.37 PM

3. To change the typ of icon refer to the font awesome site where they have a library of all the icons. Here is the link font awesome. All you have to do to change the icon is simple place the name of the icon in-between the “” within class=”". As shown below.

Icon

 

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

Asgard

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. Asgard’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.

 


Font Awesome

Here is the Font Awesome tutorial if you want to implement it. FONT AWESOME TUTORIAL

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

Odin

Built-in Nivo Slider

1. Double click and install ODIN– Nivo Image & ODIN – Nivo Image Caption.

2. Drag & Drop ODIN -Nivo Image & ODIN – Nivo Image Caption into the sidebar or any other location that allows you to put in content.

Odin banner

 

 

 

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the ODIN- Nivo Image snippet.

Nivo Pasted


Parallax BG

1. Double click and install ODIN– parallax main.

2. Drag & Drop ODIN -parallax main into the pageinspector css.

Odin Parallax

Odin Parallax Pasted

3. Add an image to the resources in RW.

Resource Highlight

4. Copy and paste the name of the file into the ODIN- Parallax main snippet.

Odin Para Paste


Extra Content

Odin-Extra-Content

1. Above is a diagram of the ExtraContent areas.

2. Simply figure out with ExtraContent area that you want to use and put that number in the stack or the snippet.

1LD Extra Content

Odin EC

 

note: The snippet comes with the theme and you simply have to double click it to install it.


Font Awesome

1. Double click and install ODIN– font awesome.

2. Drag & Drop ODIN– font awesome into where ever you want to place the icon.

Odin Font Awesome

3. To change the typ of icon refer to the font awesome site where they have a library of all the icons. Here is the link font awesome. All you have to do to change the icon is simple place the name of the icon in-between the “” within class=”". As shown below.

Icon

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

Poseidon

Built-in Nivo Slider

1. Double click and install Poseidon – Nivo Image & Poseidon – Nivo Image Caption.

2. Drag & Drop Poseidon -Nivo Image & Poseidon – Nivo Image Caption into the sidebar or any other location that allows you to put in content.

poseidon Nivo

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the Poseidon – Nivo Image snippet.

Nivo Pasted

Extra-Content Image Slider

The Extra Content area 1 is built to use image sliders built in stacks or have one imported via plugin. It can be used for what ever you want to fit into it.Example: If using WeaverPix and PlusKit you would first create a WeaverPix page. In this example we’ll call that page WeaverPix. Then we’ll create a PlusKit page and hide it from our navigation menu in the Page Info > General section. Finally, we’ll import the WeaverPix page into the Extra Content section using the command @import((WeaverPix)) where “WeaverPix” is the exact name of the page (case sensitive).

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

Carabine

Adding Slider Images

Step 1: Install the customslider.rwsnippet by double clicking it.

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

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

Carabine CSS

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

Custom Slider Snippet

Once dragged in the code should appear as so.

Custom 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.

Custom Image Resource

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

Resource Highlight

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

Single Banner Image–> Resource Paste

Addition

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

Installing the Calendar

Step 1: Install the Calendar Snippet by double clicking the Calendar.rwsnippet file 
provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: Open up Snippets

Step 4: The Calendar should be located in the Snippets if installed correctly.

Carabine Calendar

Step 5: Click and drag the Calendar Snippet into the Page Inspector.

Calendar Sidebar

Step 6: This should complete your install of the Calendar.

sidebar Calendar complete

jQuery Accordion

Step 1: Install the Accordion Snippet by double clicking the Accordion.rwsnippet file provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: Open up Snippets.

Step 4: The Accordion is located in the Snippets if installed correctly.

Accordion Snippet

Step 5: Click and drag the Accordion Snippet into the Page Inspector.

Accordion Snippet Paste

Step 6: This should complete your install of the Accordion.

Accordion Pasted

Customizing the Title

To customize the Title of any object in the accordion is simple. In between the <a href=”#”> and the <!–AREA FOR TITLE–></a> is where you will place your desired title.

<a href=”#”> HERE IS WHERE YOU WILL PUT YOUR TITLE<!–AREA FOR TITLE–></a>

To customize the list you will have to insert your info after the <li> tags.

<li>HERE IS WHERE YOU WILL INSERT YOUR CONTENT.

(also shown in the image below)

Accordion Content1

Adding to the List

Adding to the list is simple all it will take is adding another <li> tag after the previous <li>tag.

<li>place item you want

<li>in a list here

<li>

(as shown in the image below)

Accordion Li

Customizing the Paragraph portion of the Accordion

The title is edited in the same manner as the List.

To place a paragraph you must insert it in-between the <p>   and the   </p>

<p>HERE IS WHERE YOU WILL INSERT</p>

Accordion Paragraph

Adding another paragraph

to create another paragraph you must ad a <p></p> after the previous </p>.

<p>Place content in here

</p>

<p> 

</p>

(as shown in the image below)

New Paragraph

Single Image Option

Step 1: You must install the singleimage.rwsnippet.

Step 2: Once installed open up the page inspector, click on header and then select Custom CSS. Open up Snippets to make sure the Single Image snippet is installed correctly.

Carabine CSS

Step 3: Drag the Single Image snippet into the Custom CSS in the page inspector.

Carabine Single Img

Step 4: Add a new resource by clicking on Add Resource or use an existing resource.

Custom Image Resource

Step 5: Click on the resource you desire highlight the name then copy it.

Resource Highlight

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

Single Image Paste

Single Paste After

Social Media Icons

Step 1: Install the SocialMedia Snippet by double clicking the socialmedia.rwsnippet file provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: The SocialMedia buttons should be located in the Snippets if installed correctly.

Carabine Social Media

Step 4: Click and drag the Social Media Snippet into the Page Inspector and it absolutely must be placed in the very top of the sidebar mark up.

Social Media pasted

Step 5: This should complete your install of the Social Media Buttons.

Carabine Social

Creating Links

Step 1: After installing the Socialmedia snippet all you need to do is change the web address in the code. The web address will be located in-between

<a href=”HERE IS WHERE YOU WILL PUT THE WEB ADDRESS“>

(as shown in the image below)

Social media link

Step 2: Get the Web Address that you desire to have your page link to and copy it.

(i.e. http://twitter.com/rapidweaver)

Step 3: Paste the Web Address in the code.

<a href=”HERE IS WHERE YOU WILL PUT THE WEB ADDRESS“>

(as shown in the image below)

Social Pasted link

Titles with Wrap Graphic

Carabine title

To use the wrap around Title exclusively on the Carabine theme is simple.

Step 1: Highlight the desired text.

Step 2:  After desired Title is highlighted click on the add Html mark button at the bottom.

HTML Select

Step 3: Select Heading 1 or Heading 2 for the wrap around effect.

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

Canari

Adding Images & Video to the Camera Slider

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

Resource image

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

California Banner Snippet

 

 

Step3: Once dragged it should look like this

California Banner Snippet Header

Make sure that it says “image1″.

 

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

California Banner Snippet Header

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

California Caption

Inserting a Video

Video Embed Codes are to placed in this area
Video Embed Codes are to placed in this area

California Video Banner

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.

SLIDER CAPTION 1 CONTENT HERE
SLIDER CAPTION 2 CONTENT HERE
SLIDER CAPTION 3 CONTENT HERE
BANNER CONTENT HERE
ABOVE MAIN AREA CONTENT HERE
BOTTOM LEFT CORNER CONTENT HERE
BOTTOM RIGHT CORNER CONTENT HERE

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.

Extra Content Snippet

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

Social Media

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.

social media snippet

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

Example:

Canari URL

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

Masonry On

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.

Canary Thumbnail

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.

Single Banner

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

Single Banner Image

Banner Transitions

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

Canari Banner Transition

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

California banner transition

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.

Transition California

Transition Options

Changelog

v2.0.0

Foundation 5 is used to add new functionality to the site 5 more extra content sections are added New full width slider as an option New menu that supports endless tiers (no limit on the amount of subcategories) New mobile menu Content displays on mobile devices in an improved look New page loading animation (can be turned off) JavaScript cleaned up for faster load times (jQuery & jQuery UI APIs are being called) New Fonts Added (Aileron, Aleo, Medio, & Penna) All lines converted into purely CSS – colors can be changed More footer color control options added

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
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/dons/">
RSS

California

Adding Images & Video to the Camera Slider

Step 1. Open your snippets panel and find California – Banner and drag that into the Header section of the Page Inspector. “Be sure to have the snippets installed”

California Banner Snippet

California Banner Snippet Header

Step 2. Drag the image that you want to use into the resources panel.

California Resource

Step 3. Get The name of the image and put it into the snippet.

California Resource Paste

Step 4 (Optional). Captions and be inserted  within the <div class=”camera_caption fadeFromTop”> INSIDE HERE </div>.

California Caption

Step 5. Inserting video. To insert video you must get the embed code from the site and place it within the <div id=”image1? data-src=”%resource(IMAGE)%”> INSIDE HERE </div>.

California Video Banner

Step 6. Have a screen shot of the movie and place it in the part where you images usually go.

California Banner Video Image

Changing the Background Images

Step 1. Open your snippets panel and find California – Body BG, California – Gal/File/Mov BG or California – sidebar BG and drag that into the Header section of the Page Inspector.

  • California – Body BG = Background of the body of California.
  • California – Gal/File/Mov BG = Background of the photo, movie and file page.
  • California – sidebar BG = Background for the border of the sidebar.

“Be sure to have the snippets installed”

California background Snippet

California BG Snippets

Step 2. Drag the background file into the resources panel.

1LD Sushi BG

Step 3. Take the name of the file and put it into the snippet.

BG Image Paste

ExtraContent

Step 1. Drag the California – ExtraContent Stack into either the sidebar or in the Main Content. ”Be sure to have the snippets installed”

Extra Content Snippet

Extra Content Header

 

Banner Transitions

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

California Banner Transition

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

California banner transition

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.

Transition California

All options

Transition Options

Changelog

v1.2.0 (January 7, 2013)

  • Banner Transition Snippet
  • Banner Caption Text Color Options
  • Banner Caption Text Size Options
  • Banner Caption Background Options
  • Social Media Hover
  • Contact form border

v1.1.0 (November 30, 2012)

  • mobile nav appearance
  • Nav active / inactive color fix
  • banner transition set to ‘simpleFade’
  • banner pie loader removed

Bug Fixes:

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

Aether

Extra-Content without using Stacks

1. Double click and install Aether – Extra Content Stack.

2. Drag & Drop Aether – Extra Content into the sidebar or any other location that allows you to put in content.

Extra Content Aether

3. Put in your desired content.

This is a diagram of the Extra Content areas:

Aether-Extra-Content

Built in Nivo Slider

1. Double click and install Aether – Nivo Image & Aether – Nivo Image Caption.

2. Drag & Drop Aether -Nivo Image & Aether – Nivo Image Caption into the sidebar or any other location that allows you to put in content.

Aether Nivo Image

3. Add an image to the resources in RW.

Aether Extra Content Resources

4. Copy and paste the name of the file into the Aether – Nivo Image snippet

Resource Snippet

Extra-Content Image Slider

The Extra Content area 1 is built to use image sliders built in stacks or have one imported via plugin. It can be used for what ever you want to fit into it.

Example: If using WeaverPix and PlusKit you would first create a WeaverPix page. In this example we’ll call that page WeaverPix. Then we’ll create a PlusKit page and hide it from our navigation menu in the Page Info > General section. Finally, we’ll import the WeaverPix page into the Extra Content section using the command @import((WeaverPix)) where “WeaverPix” is the exact name of the page (case sensitive).

Changelog

v1.1.0 (February, 28, 2013)

  • Patch for minor bugs

v2.0.0 (July, 05, 2013)

  • New 1LD ExtraContent
  • Font Awesome integrated
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/dons/">
RSS