Facebook Likebox

Linking a Facebook

Screen Shot 2014-07-30 at 9.46.11 AM

Step 1: Get the Id of the facebook that you want to share. “It’s the highlighted portion of the picture”

Step 2: Copy and past it into the Facebook Id section of the stack. “The id that we need is the end of the link not the actual facebook id”

note: ” If it doesn’t appear in preview, then publish it and test it. “


Not Loading in Preview Mode

If you load Facebook Likebox in preview mode it will appear empty and if previewed in a browser it will appear like the following picture.

Likebox Load Failed

The solution is to publish the files. Facebook Likebox will not connect to your Facebook page without a fully published version and will not display in preview mode.


Definition of Terms

Screen Shot 2014-07-30 at 9.47.09 AM

Facebook Id : Where you put in the Id of the link.

Load everytime: This is the option for the module to popup everytime. If it’s not selected then it will appear once until the cached files are cleared again.

Show Friends: Allow friends of the page to show when the module comes up.

Module Color: This selects the background color of the module.

Shadow Color: Select the color of the shadows for the module.

Module Delay: This will set the delay of the time that the module pops up.

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

Simple Position Pro

Definition of Terms

  • Position: Relative, Absolute, Fixed, Static, Inherit. Absolutely positioned elements will display as they relate to Relatively positioned elements. Fixed elements will display outside of all elements.
  • Vertical Position: Top, Bottom. Places the object in the vertical starting point – the distance is then controlled with the values below.
  • Horizontal Position: Left, Right. Places the object in the horizontal starting point – the distance is then controlled with the values below.
  • Vertical in %. This switches the position controls below into percentage instead of pixels (only available in Pro version).
  • Horizontal in %. This switches the position controls below into percentage instead of pixels (only available in Pro version).
  • Vertical Value & Horizontal Value. The pixel distance from the vertical and horizontal positions selected. If percentages are selected then that will replace the pixel measurement and the % will show in place of px.
  • Z Index. The Z plane value, which is an arbitrary value only weighted according to other Z Indexes and controls the distance above/below other absolutely or fixed elements.
  • Control Size. Width and Height are inherited by default, though you can control these further by selecting the checkbox as shown on the right.
  • Width/Height in percentages. These options will open a new number field for you to place your desired percentage width or height – this option will also override the pixel measurements below them (only available in Pro version).
  • Width & Height. These are pixel values for the element and only work if the Control Size option is selected.
  • Force Vertical/Horizonal Center. This option will only work on page load (not when window is resized). The option will force an Fixed or Absolute position element to center perfect either vertically, horizontally, or both (only available in Pro version).
  • Hide on click. This option will remove the element the moment it is clicked. You can still place a link and it will load before the element is removed (only available in Pro version).

Changelog

v2.0.1 (July 24, 2014)

  • Improved edit mode UI
  • New project file added to demonstration the pro version better
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/2/">
RSS

Retina Ready

  1. Create 2 images with one twice the size (or larger if preferred) in the Resources section to the left. The larger one should have a name ending in the suffix along with the file type extension. Example: image1.png and image1_2x.png
  2. For organization you can create a folder in the Resources section (right click Resources) in which case the folder name would come before the image name followed by a forward slash and then the image name. Example: folder/image1.png
  3. Retina Ready will not load the larger image unless the device calls for it. This will save on load time and provide the visitor with the best intended quality.

Definition of Terms

Image Name : Name of the image as it appears in a Resources section. Place the name of any folders it is placed in if applicable followed by a forward slash – example: folder/image.png

Alt Text : The alternate text for the image.

Prefix : By default this is set to _2x and is placed at the end of the images name, but before the extension. This must be assigned to the larger image that displays for retina. Example: image_2x.png.

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

Vimeo Connect

 

Linking a video

 

Step 1: Find the video that you want to use and click share.

 

Step 2: Get the video Id for the video.”an example of what a video id looks like is shown below”

 

Step 3: Insert the code into the Video Id section in the VimeoConnect options in stacks.  After that enjoy your video.

 

 

tut

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

Instagram Connect

Set Up

1. Drag Instagram Connect onto your stacks page.

2. Get an Access Token.

In order to display your Instagram photos on your own website, you are required to provide an Instagram Access Token. You can generate one for free at: http://instagram.pixelunion.net/

3. Copy/Paste your Access Token.

Under ‘Instagram Connect – Setup’, paste your token number into the ‘Access Token’ field.

4. That’s it!

That’s the basic set up for Instagram Connect, now when you preview it (if you haven’t changed any other options) – you should see up to 12 of your most recent photos, when you hover over these photos, you should see their Instagram caption. And when you click one, it should open in a lightbox where if the image is clicked again, it takes you to the photo on Instagram.

Note: Your Instagram account cannot be set to private if you want to display your feed.

General Options

# of Images:

This sets how many images will show from your Instagram feed on page load. In the section titled “Place optional load more target stack below”, you can add any targeted stack (like the button stack for example) to allow users to load additional images by clicking on it. This button will load additional images equal to the number set in this field. For example, if # of Images is set to 4, clicking the “load more” link will load in an additional 4 images. Clicking the “load more” link will continue to load 4 images until there are no more images to display and the “load more” link will then be removed.

load more link

 

Filter Images by Hashtag:

Enabling this option will filter your Instagram images and only display ones with a certain defined hashtag value. This field only supports a single hashtag.

Note: This field ignores spaces and capital letters. You do not need to add the hash symbol (#).

Sort By:

Each option is self explanatory – Most Recent, Least Recent, Most Liked, Least Like, Most Commented, Least Commented, Random. So Most Recent sorts them chronologically, from most recent to least recent. Least Recent would be the opposite; reverse chronologically.

Note: No matter which Sorting method you choose, the images this stack gets are the most recently posted images. The sorting method sorts the images after they’ve been loaded. So if you have 100 photos on your account, and you set the # of Images value to to 10 – you’ll have the 10 most recently posted images on your site and this option will then sort those 10. 

Sort Again After Loading More:

This will re-sort all of the images once the “load more” link has been clicked and more images are loaded in.

Note: This option is only visible if you are not using the “Filter by Hashtag” option. When using “Filter by Hashtag” the “load more” link will automatically re-sort the images as they are loaded in.

Gutters:

This controls the spacing between the images in pixels. By default gutters are turned off, and the images edges touch their neighboring images.

Resolution:

Low Quality loads all the images as 150X150px, Medium Quality loads them in as 306X306px, and Full Resolution loads them up at 640X640px. By default it’s set to medium resolution, which gives you a decent quality of images with a faster loading time. Obviously, smaller images will load faster, and larger ones will be higher quality. Chose the option that fits your needs. For instance, if you’re going to turn off the lightbox and keep all the images small, the Low Quality images should suit your purpose.

Link to Instagram:

This wraps all images in a link, so when the image is clicked, you are redirected to that photo on Instagram. If the lightbox option is turned on, clicking the thumbnail image opens the lightbox and then clicking the image in full screen mode takes you to Instagram. Otherwise, if the lightbox is off, clicking the thumbnail will take you to the image on Instagram.

Open in New Tab:

This is equivalent to ‘Redirecting’. Essentially if this option is turned on, when someone clicks a link – it will open a new tab or window for them to view the image on Instagram while keeping your site open in the first tab or window. When this option is turned off, clicking an image will close your site and take them to Instagram instead.

Use Lightbox:

This option turns on/off the built-in lightbox effect for this stack. The lightbox opens up the images in an Instagram-style full screen viewer. It has left and right navigation arrows (or use the arrow keys on your keyboard), and a close button. If Links are turned on, click the thumbnail opens the lightbox and clicking the fullscreen image from within the lightbox takes you to instagram.

Overlay Opacity:

This option controls the transparency of the overlay in fullscreen mode for the lightbox. The overlay is what separates the image from the rest of the site in fullscreen mode. Setting this option to 0 gets rid of the overlay, and setting it to 1 makes it completely solid black.

Captions

Captions:

This turns captions on/off. The captions are the text posted with the image on Instagram. If there was no caption posted with the image originally, then there will be no caption here.

Background Color:

This color will be laid over the image and the text will be laid over this color so that the text is actually legible.

Opacity:

This opacity will be applied to the Background Color to make it more/less transparent. Setting this option to 0 makes the background color invisible, setting it to 1 makes it completely solid.

Font Color:

Choose the color to be applied to the caption’s text. Ideally you want to pick something that contrasts with the background color so that the text is readable.

Font Size:

Controls the size of the caption text in pixels. Somewhere around 12px-16px should be good for most cases, but it depends on the font used by the theme.

Responsive Settings

Here is where we can control the layout of the thumbnails. Each option refers to the width of the stack so assuming you haven’t changed anything from the default values, it would be like saying:
When the stack is 350px Wide (or smaller), use One Column.
When the stack is between 450px and 649px Wide, use Two Columns.
When the stack is between 650px and 849px Wide, use Three Columns.
When the stack is between 850px and 999px Wide, use Four Columns.
When the stack is 1000px Wide (or bigger), use Five Columns.

So for each size range, you can choose to have between 1 and 10 columns. 350px wide would be what things look like on an iphone, while 1000px (or larger) would be a desktop or laptop with a typically-sized monitor and the browser at full width.

Resize the window in preview mode to see the changes take place.

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

Youtube Connect

Linking a video

Step 1: Find the video that you want to use and click share.

Step 2: Copy the link like shown in the image below. The link must not contain the “” or it will not work only what is within the “”.

Step 3: Paste the code into the Video Id section in the YoutubeConnect options in stacks.  After that enjoy your video.

videoID

 

 

Define Terms

Width: The width determines the size that you want it to display on the page. It ranges from 200px all the way up to 6000px.

Full Width: This will allow you force the size to fit whatever it’s containing the stack is or site.

Video Id: The link that is in the embed code for any Youtube video goes into here. This will link the video and allow it to be playable.

Control Display: This will toggle the controls for the Youtube player

Auto Hide: The will hide the controls or video info a second after the start of the video

Youtube Icon: This will hide the Youtube icon if you have have the controls, but if you have the controls off then the icon will appear no matter what

Annotations: This will toggle the annotation that are made by the user of the video

Video Info: The will toggle the info that is displayed on the top of the video

Relative Videos: The will toggle whether relative videos will be show after the video.

Start Time: The time that you want to video start can be determined with the Start time, but it only works on the first initial play. If repeat is clicked it will go to the very start of the video

Auto Play:  The will toggle whether the video will play automatically when the page loads.

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

Scotty

Note: Scotty was renamed “Scroll Up” at v1.1.0 – tutorial here

Definition of Terms

General Options

Theme : Three themes comes with the stack (Default, Image, Tab). Default is a simple container that has the sorta look that it’s floating, Image allows you to replace the button with an image that you can upload (one is provided in the download files), and Tab is a tab that pops out from the bottom.

Font Awesome On : Allows you to easily add font awesome icons in, though you must still activate font awesome with our Free Font Awesome stack (unless your theme has it already) – note that there is a paid version too, but this is not needed for this option to work.

fa- : This option is available only when Font Awesome is turned on and allows for typed in Font Awesome Icons.

Icon After Text : By default the icon will appear before the text, but you can place it after if you like with this checkbox.

Text : This is the text that displays. Note that you can leave this section empty, which can look nice with Font Awesome icons. This section accept HTML, so if you like the icon at the top (as it is in the demo page) you can place a <br> tag before your text.

Image : This option is only available for the Image theme and is a drag and drop section where you can place your image.

Image Width : Width of the image added in pixels.

Image Height : Height of the image added in pixels.

Horizontal Position : You can position Scotty to appear on either the left or right.

Appear Distance : This is the distance down the screen the user must scroll before Scotty appears.

Font Size : Size of the text assuming something is in that field.

Horiz Padding : Horizontal padding from the text (Default theme only).

Vert Padding : Vertical padding from the text (Default theme only).

Tab Width : The tabs width in pixels (an option for the Tab theme).

Tab Height : The tabs height in pixels (an option for the Tab theme).

Horiz Distance : This option has no effect in the Tab theme and controls the distance of Scotty from the bottom.

Border Radius : This option has no effect in the Image theme and controls the roundness of the borders.

Z-index : This will typically not need to be changed, but if there is another addon appearing over Scotty this number may have to be increased. The z-index is an arbitrary number that controls what items appear over each other when positioned in certain ways.


Animation

Animation Type : Fade (default), Slide and None are the 3 options. None turns off the animation, and Fade and Slide are named based on their animation effect.

Scroll Speed : This is the speed at which the user will be returned back to the top of the page in milliseconds.

Anim in Speed : This is the speed of the Fade or Slide animation effect as it transitions in.

Anim Out Speed : This is the speed of the Fade or Slide animation effect as it transitions out.


Color Options

Turn Colors Off : If this box is checked the colors will not have an effect (not checked by default).

Background : The main background color (the Gradient colors will override this unless turned off).

Text/Link : Color of the text inside Scotty, which is automatically a link.

Text/Link (hover) : Color of the text on mouse hover.

Border : Color of the border, which will not appear unless the width value is greater than 0.

Border Width : 0 by default – if increased the border will become larger.

Gradient On : Turned on by default this color will override the background color.

Gradient Start : Color of the gradients start.

Gradient End : Color of the gradients end.

Box Shadow On : Turned on by default this option can be turned off for no box shadow.

Box Shadow : Color of the box shadow.

Box Shadow : The field is set to 0 0 2px 1px, but can be changed (the numbers in order mean: horizontal, vertical, blur, spread).

Text Shadow On : Turned on by default this controls the text shadow.

Text Shadow : Color of the text shadow.

Text Shadow : Set to 0 1px 0 by default, but can be changed (the numbers in order mean: horizontal, vertical, blur).

Changelog

v1.0.2 (September 9, 2014)

  • Negative horizontal distance allowed
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/2/">
RSS

Booklit

Booklit Stack

booklit stack

The Booklit Stack is placed first onto your Stacks page. Afterwards, you can place the Booklit Page Stack inside and sequentially place the Page Stacks one below each other again and again untill you have as many pages as you want to use.

Basic Setup

booklit example

Drag Booklit onto any Stacks page, then drag a Booklit Page stack inside. Each Page stack has a front and back section. The front section is for the content that will display when the page is on the right side of the book. Once the page is turned it moves to the left side and  reveals the back section. Inside of each page you can drag any Stack content you wish, including images, video, text, and even other stacks.

booklit settings

Definition of Terms

Type - By default this is set to “Stacks”. This type allows you to add any type of stacks content. The “Images only” mode is for what is says, this will disable the ability to add other stacks to the pages. Images only mode is good for when you have a pdf, book, or magazine photos to show.

Max-width - You can set a max-width value (The width the book will display when viewed in desktop browsers) in pixels.

Round Corners - Allows you to add rounded borders to the page and book edges. (Supported in IE9+, Firefox, Chrome, Safari, and Opera.)

Aspect Ratio - This is a setting that effects the responsive behavior of the stack. If you set an aspect ratio Booklit will always maintain this shape no mater what size the browser window is. This setting is mandatory for images only type pages, and optional on Stacks type pages.

Note: Stacks type pages will not maintain the aspect ratio if content overflows the height of the book. You will need to adjust the aspect ratio to match your content.

Fullscreen Toggle - Enable this option if you would like to add a button that appears in the top right when Booklit is hovered with the mouse. This button opens up a lightbox that displays the book at the max-width you set. The fullscreen max-width controls the size of Booklit only in fullscreen mode. Increase the size of the max-width value to increase the size of the book in the lightbox.

Speed - Use this slider to adjust how fast the page turn animation is.

Use Arrows - When not enabled, users will need to click on the page itself to turn through the pages. When enabled, users will use the left and right navigation buttons to turn the pages. Note: If you do not enable the Page Navigation buttons you will not be able to click and interact with the stacks inside of your pages (The whole page is used as a clickable area to turn the page).

Navigation Arrows Enabled Options:

  • Only On Hover - The left and right navigation buttons will only appear once a user places their mouse over the stack.
  • Theme: Detailed, Simple, Flat – Select between these three styles to change how the arrows look.
  • Color - Change the color of the Detailed or Flat styles. Note: The simple style does not have a changable color.

Use Pagination - When enabled, selectable bullets will appear below Booklit to allow users to quickly navigate between multiple pages.

Pagination Enabled Options:

  • Color - Change the color of the pagination bullets.

Auto Navigate - When enabled, The pages will turn automatically. Note: Once a user clicks on the Booklit Stack, auto navigate will turn off and allow them to navigate manually.

Auto Navigate Enabled Options:

  • Loop: One Time, One Full Loop, Infinite – “One time” will turn through the pages until the last page is reached and stop. “One Full Loop” will turn through the pages until the last page and then turns backwards till the first page is reached and stops. “Infinite” will loop back and forth between all of the pages and will not stop unless a user clicks on the stack.
  • Speed - Set in milliseconds, this option determines how long the delay is before each turn of the page. IE 2000 = 2 seconds.

Start Booklit Open - When enabled, Booklit will start open to a page that you specify.

Start Booklit Open Options:

  • To Page # - Number of the page you want Booklit to start open on.

Loader color - When Booklit is loading it displays a loader. Use this to control what color it is.

Booklit Page Stack

booklit page stack

This stack is placed inside of the Booklit stack and creates the individual pages. The size of the Book will depend on the content you place inside of the Booklit Pages. Booklit will find the page with the most content and match the height of that page to all the other pages inside of your book. As for the width, that is determined by where you place the stack. It will match the width of the container you place it in (IE a column stack) otherwise the stack will fit to the width of your site. You can also adjust the left and right margin to make the book more narrow. After placing your desired amount of Booklit Pages into the Booklit stack, you can then add stacks content to each page. Note: Each page has a front and back.

booklit page settings

Definition of Terms

Front & Back images - These sections are best if you would like to create a book made completely from images. This will allow the images to scale correctly when the browser is resized. Just set the aspect ratio option in Booklit to match the ratio of the images you are using. If the images do not match the aspect ratio the image will be cropped to fit.

Detail Shadows - Enabling detail shadows will add a curved shadow for a book page look to the front and back of the page.

Background Colors - Controls the background colors of the front and back of the page.

Base Font Colors - Controls the text color of the front and back of the page. Note: This will only set the base color and it can be overidden by the stacks you place inside if they have their own font color options.

Resonsive Options – Seperate Mobile Content - Enabling this option will display another row of Front and Back content sections. Anything that you place into these content areas will be displayed to mobile devices inplace of the normal content. This is useful if you find that your content does not display how you would like on smaller screens.

Using the Social Media Stack Template

*Requires the free Font Awesome Stack (included with the Booklit Stack).

Step 1: Drag and drop the Font Awesome Stack onto your Stacks page.

Step 2: Drag and drop the “Booklit – Social Media” Stack Template into your desired location on your Stacks page. This stack works best in narrow areas like a three column stack.

Step 3: You can now start editing the template to create links to your own social media websites. Click on any of the icons to edit them. All you need to do is change the URL (http://www.twitter.com) to your page’s address and if you need to change the icon, change the icon name (IE fa-twitter) to match the social media icon you want to use. You can find a list of usable icons and their names here: Font Awesome. You may also want to change the background colors to match the social media sites you are linking to.

Step 4: Repeat step 3 until you have changed all of the links. Delete or duplicate pages to create new or remove unused links.

Using the Lightbox Stack Template

*Requires the Ice Box Stack.

Drag and drop the “Booklit – Lightbox” Stack Template into your desired location on your Stacks page.

Please refer to the Ice Box tutorial page to set up the Ice Box Stack

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

Sticky Navs

Font Awesome Icons

Font Awesome (Free)

Activating Font Awesome is necessary for the icons of this stack to function. To avoid heavy load times Font Awesome was not included in Sticky Navs, but rather made as a separate and completely free stack (included in your zip file). This stack must be dragged onto the page for the icons to work.

After this is added, the icons can be changed by selecting each individual navigation section. The icon text commands can be found here:

http://fortawesome.github.io/Font-Awesome/icons/


Creating “Inner” list item sections

Simple use RapidWeaver’s built-in list item tool.

HTML Lists Tool

Create a basic unordered list.

Basic Unordered List

When using the “Slide Open” theme you should create a single line of text prior to creating your unordered list. This gives the user something to click on to open the unordered list. If you create the unordered list first and then the single line of text RapidWeaver’s auto-formatting will wrap the text in an additional and unnecessary unordered list tag that will create visual problems… in other words you must create the line of text first before the unordered list or you’ll simply have to start over.


Creating Links

Link Maker Breaker

Couldn’t be easier – just use RapidWeaver’s built-in link maker/breaker (middle icon makes, right button breaks).


Definition of Terms

General Controls

Theme : Choose between 2 built-in themes (Tooltips or Slide Open).

Animation On : Only available for the “Slide Open” theme, this option can disable the sliding open animation effect. If disabled the text next to the Font Awesome icon will be displayed an open regardless of hovering or clicking.

Right Side : Selecting this option will display the navigation section on the right hand side (left by default).

Move to Bottom: Selecting this option will display the navigation section to the bottom (top by default).

Open on Click : By default the navigation menu will open on hover, but selecting this will require a click instead.

Inner on Click : This option is only available for the “Slide Open” theme and is selected by default. Disabling will not require the user to click to see the 2nd tier navigation section, but will activate on hover instead.

Text align : Set to “Center” by default, this can be changed to Left, Right, or Justify. Changing the alignment is ideal at times depending on if your menu is on the left or right hand side. Additional padding may be useful in a span tag as well depending on whether or not certain icons have less or more width to them. You can wrap your text like this as an example:

1
<span style="padding-left: 2px;">Your Text</span>

Pop Out Width : Width of the text section that pops out after the icons are hovered/clicked.

Distance : Distance of the stack from the top/bottom of the page.

Animation Speed : Millisecond speed of animation on click/hover.

Inner Anim Speed : Millisecond speed of animation for the inner lists on click/hover.

Border Radius : The roundness of the edges.

B Radius Inner :  The roundness of the edges for the inner sections (if they are added).

Font Size : Pixel size of the font (includes Font Awesome icons).

Vertical Padding : List item padding from top & bottom.

Horiz. Padding : Left & Right padding of the icon.

Text Icon Padding : Distance of text from the Font Awesome icon.

Color Controls

Background : Background color of the main section where icons are located.

Bg (hover) : Background color that appears on hovering over each icon section.

Border : Color of the border of the main section.

Icon : Color of the Font Awesome icons.

Icon (hover) : Color of the Font Awesome icons upon hover.

Text : Color of the text.

Text (hover) : Color of the text upon mouse hover.

Pop Out Bg : Background color of pop out sections for Theme 1 (not available/visible for Theme 2).

Pop Out Inner : Background color for each line item in inner sections.

PO Inner Hover : Background color for each line item in the inner sections upon hover events.

Middle Borders : Off by default, checking it will create borders between the Font Awesome icons. You can control the color for the top and the bottom colors.

Border Inner On : This will wrap inner list item sections with a border, which you can control the color of.

Mid Borders Inner : Like the ‘Middle Borders’ option, this does the same, only for the Inner List Item Sections.

Advanced

Z-index : You can manually adjust the z-index plane in the chance that the amount is not enough or if you have something else that you wish to have pop up over the fixed navs (i.e. Lightboxes), in which case you can reduce the z-index. Z-index is an arbitrary number that simply is place above or below by numerical weight, so higher numbers are above lower numbers.

Cursor Hand (text only) : Selecting this option is only useful if you uncheck the next option and will only turn the mouse into a cursor if they hover over the text, which includes the Font Awesome icons. Links are only attached to text sections, so this basically would make the text and icons have the cursor over them.

Cursor Hand (all) : This is selected by default and places the hand over everything in the stack, which does make some since as everything has an effect if hovered over or clicked on, assuming you have placed links in the text… I’m guessing that’s safe to assume since that’s the entire purpose of the stack :P .

Sticky Nav Menu Items (Inner Section)

Font Awesome : set to fa-gear by default, this input field can be changed to any Font Awesome icon – full list here:

http://fortawesome.github.io/Font-Awesome/icons/

Arrow Top % : Percentage Distance from top for the arrow icon (Theme “Tooltips” only). Centered (50%) by default, which may not be as appropriate if inner sections are created.

Padding Top, Bottom, Left, Right : The padding distance of the text from the relevant sections.

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

XL

Here is a customer review/tutorial on Ice Box by William Winter

Basic Setup:

Step 1:

Double Click the XL stack to install it.

Step 2:

Restart RapidWeaver so that all changes take place.

Step 3:

Drag an XL stack onto your page.


Definition of terms:

Full Screen – General Options:

Button Style:
Select either square or arrow buttons, or choose custom to use your own images.
Color:
Change the color of the square and arrow buttons.
Go Fullscreen/Go Normal:
Go Fullscreen – Select an image to display while in normal (small screen) mode which, when clicked, enters fullscreen mode.
Go Normal – Select an image to display while in fullscreen mode which, when clicked, exits fullscreen mode.
Size:
Sets the width and height of the buttons in pixels.
Padding:
Controls the distance of the buttons from the bottom right corner in pixels.
Error Message:
If the users browser does not support fullscreen mode, and they try to go fullscreen, they will receive an alert message with whatever text you place here. Default text is “Sorry, your browser doesn’t support fullscreen mode”.

Full Screen – Advanced Options:

Hide/Show Button:
When checked, the button will only appear when the mouse is within the distance specified in ‘Mouse Distance’. When unchecked, the buttons will always be visible.
Mouse Distance:
When the mouse is this distance away from the full screen button, the button will fade out. But when the mouse is within this distance of the button, the button fades in.

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

Awesome Maps

Basic Setup

Awesome Maps comes with 2 separate stacks that are use together, a container stack and an inner stack.

Awesome Maps Container

The container stack is titled “Google Maps Container” and is the first stack that needs to be placed.

Awesome Maps Inner

The inner stack is titled “Google Maps Location” and is placed inside of the container stack. You can place as many of these as you like inside the container.

Finding Coordinates

I recommend the use of the web app MyGeoPosition.com though there are dozens of similar tools available on the web. I chose to use this as the way to create locations as it is much more accurate and allows users to change the location if an address/geo position tools is not accurate. At this website you can simply add your address/location and the Google API will provide you with the Latitude & Longitude of the location.

Be sure to set a Latitude & Longitude for every inner stack include a default one for the container stack.

Container Settings

General Options

Roadmap Customization : This option is only available for the Roadmap ‘Map Type’ and turning this on will remove the ‘Map Types’ drop down menu from the options. Turning this on will open the ‘Custom Title’ option (next option), but more significantly will create an option in the colors section at the bottom titled ‘Custom Map Colors,’ which allows you control over the maps various colors.

Custom Title : This is the text that will display in the top right of the map for your custom map unless the ‘Map Type Control On’ option is turned off (in the options below).

Map Types : There are 4 maps types in Google Maps. All of these are available and include Roadmap (default), Hybrid, Satellite, and Terrain.

Title Header Tag : You can set the location title to any header tag (1-6). h4 is the default.

Expanded Title : The header tag setting for the expanded title – by default the title that appears on the right hand side of the map.

Default Latitude : The latitude coordinates that are displayed when the map first loads. This should be the same as one of the latitude coordinates of one of the inner stacks.

Default Longitude : The longitude coordinates that are displayed when the map first loads. This should be the same as one of the longitude coordinates of one of the inner stacks.

Center on Click : This is turned off by default and locations will load on Hover. If this selected the locations will no longer load on hover, but rather when the user clicks the location title.

Pointer on Hover : If this box is checked the mouse marker will change to “pointer”/hand when hovering over the location.

Scrollwheel Zoom On : By default users can scroll in and out of the map using their mouses’ scroll wheel. Unchecking this box will remove that feature, though users can still zoom in/out using the manual controls.

Hide Description : Checking this box will remove the long description section.

Zoom : This controls the zoom level of the map (higher numbers zoom in more, lower numbers zoom out more).

Zoom on Click : This controls the zoom level if the user clicks on the location on the map.

Active Marker : By default the Google maps marker icon is used, though adding a new image in here will replace the marker to any other marker/image you wish to use.

Animate Icon (bounce) : Turning on this option will cause markers to quickly and subtly bounce (animate) into their location when the Title is hovered/selected.


Sizing & Spacing

Static Widths : By default widths are set to percentages for a responsive layout (adjusts to screen size). Changing this to static widths changes the measures to set pixel widths that will not adjust to screen size. List width refers to the location titles and small descriptions, Map width refers to the Google Maps section, Desc width refers to the Large description section.

Map Height : The height of your Google maps section – does not effect the height of other sections.

List … Pad : Places padding (space inside) depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

List … Marg : Places margin (space outside) spacing depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

Desc … Pad/Marg : Padding & Margin controls for the Large description area. There are controls for vertical (Vert) and horizontal (Horiz).


Colors & Styling

Active Title : Controls the color of the active title (hovered or clicked).

Transparency On : By default this is checked and by unchecking you can then add background color, border color, and border width to the List (title & small description) and Large description sections. Having this checked will not effect the ability to change the Map’s border width and color.

Title Tab Shadows On : Selecting this allows you to control the container shadow for the List (title & small description) section.

Desc Shadows On : Selecting this allows you to control the container shadow for the Large description section.

Map Shadows On : Selecting this allows you to control the container shadow for the Map section.

Custom Map Colors : This option is only available if ‘Roadmap Customization’ is selected (the very first checkbox). Activating this will allow you to change the colors for the map’s features including Highways, Arterial Roads, Local Roads, Water, Transit Lines, Transit Stations, Land (man made), Land (natural).


Controls Displayed

Pan Control On : Unselecting will remove circle with arrows (left, right, up, down) in the top left of the map.

Zoom Control On : Unselecting will remove the zoom control on the left side (has a plus and minus button and draggable slider).

Map Type Control On : Unselecting will remove the Map Type options located in the top right. If using a custom map design users can use this section to switch to default Google Maps, so you may wish to disable this in that circumstance or simply to make the map less busy.

Scale Control On : Unselecting will remove the scale icon in the bottom left just to the right of “Google.”

Street View Control : Unselecting will remove the icon in the top left with a person (allows for street view).

Overview Map Control On : Unselecting will remove the arrow icon in the bottom right.


Advanced

API Address : This is an advanced option and unlikely to be of use for most users. Their are text instruction above it that show the API Address that must be used if running Google Maps on a Secure Socket Layer (SSL).

  • http – maps.google.com
  • https – maps-api-ssl.google.com

API Key On : In most cases you do not need this option turned on and doing so simply allows Google to detect usage. If your map gets a ton of traffic Google may require you to pay fees depending on usage, but in most cases this is not necessary. For more details read Google’s Documentation here.

Key : This field appears only when the API Key On option is checked. You enter your key in the field and end it with the ‘&’ symbol – this is needed for other URL commands that follow the key.


Usage in Lightboxes

Many lightboxes (containers that pop up and typically everything behind them is dimmed) will append content outside of stacks causing duplicate API calls in Awesome Maps. To fix this all you need to do is break the call in Awesome Maps and then manually call in the API.

API Address

Locate the API Address field and delete everything inside.

Then manually call in the API by placing the following code into your Page Info > Header section:

1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>

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

Font Awesome

The Font Awesome stack is free and you can download it here.

Font Awesome is a stack that allows you to use Font Awesome icons on any Stacks page. This is simply a importing tool to activate the use of Font Awesome. Some themes already have Font Awesome built-in, in which case you won’t need to add this to the page.

Setup

Font Awesome Importer Stack

1. Drag Font Awesome onto the Stacks page anywhere (it won’t display in preview or when the site is published). This allows you to start using Font Awesome.

Snippet File

2. Drag the Font Awesome snippet (or copy and paste it from below) into any text or html stack. Then change the class fa-medkit to any Font Awesome icon class name you wish to use – see full list here.

<i class="fa fa-medkit"></i>

 

Important Note: Pay close attention to the quotation symbols. RapidWeaver’s auto formatting will sometimes change straight quotation symbols into curly ones . Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting to HTML code it will automatically change the curly quotes to straight quotes.

ignore formatting

Adjust Icon Size

To change the size of the icon you can use the code below, just adjust the font-size px value.

<i style="font-size:16px" class="fa fa-medkit"></i>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Add an HTML link

If you would like to add a link to the icon, you can use the code from below. In addition to changing the icon class name, you will just need to place the URL you want to link to in the href value.

<a href="http://yourlinkhere.com"><i style="font-size:16px" class="fa fa-medkit"></i></a>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Quotation Mark Issue Example

There is a common issue caused by RapidWeaver’s auto-formatting where quotation marks are changed.

RW Auto Formatting Quotations

In the gif above you’ll notice how the quotation mark on the right hand side is straight at first, but then when the letters next to it are changed, it turns into a curly quotation mark (even though Ignore Formatting has been enabled).

As mentioned before, in order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting (Keyboard Shortcut: cmd  . )to HTML code it will automatically change the curly quotes to straight quotes.

 

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

Parallax Flight 2

How To Setup Parallax Flight and Parallax Flight 2

Step 1: Create a new Stacks page.

Screen Shot 2013-11-14 at 2.34.52 PM

Step 2: If you want to create a one page site with the included Theme Wrap Stack, drag and drop the stack into your editor. This will overwrite the theme you have selected. (If you just want to use the standalone stack inside of another theme skip to step 4)

Parallax Flight wrap

Step 3: You can now adjust some of the settings for the theme. Leave your mouse pointer over a setting to get a description of what it does.

Step 4: Drag and drop Parallax Flight or Parallax Flight 2 into the Theme Wrap Stack or into the editor if you are not using the Theme Wrap Stack.

Screen Shot 2013-11-14 at 2.35.41 PM
Parallax Flight Container

Step 5: Add any content or other stacks into the Parallax Flight section. If you do not wish to add content, you can use the “Y Padding” Setting to adjust the vertical size of the stack. In the example below I have added a 3 column stack with text in the right column.

Step 6: Select Parallax Flight to begin adding your background images. Locate the image or images you would like to use as a background.

Step 7: (Parallax Flight 2) Drag and drop your images into the Background and Foreground sections (Foreground images need to be PNG files with transparent parts, the Foreground image is optional). You can now adjust the start and stop positions of your background, foreground, and content sections. Each of the three sections have x and y values for start and stop. You can enter any value followed by “px” (pixel) do not leave any spaces between the number and “px” (Example: 340px). These input fields also accept the value “center”. This allows the images to be horizontally or vertically centered, however the start and stop position must both have the value “center” for it to work (Example: Start x = center start y = 0px, Stop x = center stop y = 600px). If you need help visualizing where the images will be at start and stop use the Preview Option.

Screen Shot 2014-10-16 at 2.47.42 PM

The “Fixed” checkbox will ignore your start and stop values and force the image to be fixed position while the page is scrolled (Note: This option is not compatible with mobile devices).

The “Repeat” Checkbox will make your image repeat in all directions, this is useful if you are using an pattern image.

Step 7: (Parallax Flight) Drag and drop your images into the Background and Foreground sections (Foreground images need to be PNG files with transparent parts, the Foreground image is optional). You can now adjust the scroll speed of each image. Set a pixel value equal to how far you would like the image to move as a visitor scrolls down your page. If you set the value to 300px, the image will move once it is visible in the browser window until it has moved 300px by the time the stack is no longer visible in the window. If you are creating a landscape, you want the objects that are supposed to appear farther away to scroll slower that things that are closer, the lower your pixel value the slower your image will move. I recommend adding padding to the top and bottom of the Parallax Stack using the “Y Padding” slider. This will increase the view-port of the background images you have added. If you are using a pattern click on the pattern checkbox to have the image repeat. You can also reverse the direction of the scroll by selecting the Reverse option.

Screen Shot 2013-11-14 at 2.49.09 PM

 

Those who are not using the Theme Wrap stack can enable the “Force Full Width” option to make the stack fit the width of the browser window. *This may not be compatible with all themes

Optional: (Parallax Flight) You can adjust the start and ending positions of the Stacks you add to Parallax Flight in x and y values. In the example below I have set the start y position of the content to negative 1000px. This will cause the content to be 1000px to the left of the browser window and will not be visible at first. Since I have not adjusted the ending position the content will slide in to view as the visitor scrolls down the website.

Screen Shot 2013-11-14 at 2.54.15 PM

Step 9: If you preview your page at this point you will notice that the parallax is set up but the site does not have enough content for you to scroll. If you can’t scroll then the parallax effect is lost.

So we need to create more Parallax Flight sections to make our page longer. I recommend adding padding to the tops and bottoms of each section you add to help give your page length.

If you are using the Page Wrap Stack it is important for you to make sure each new section is inside of a new Parallax Flight Stack. This will allow the theme to locate where to scroll when users click on the navigation buttons.

Parallax Flight Wrap
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks
> Parallax Flight
>    Content and other Stacks

For sections that you do not want to have a parallax background, use the background option to give it a solid color.

Screen Shot 2013-11-14 at 2.52.41 PM

Step 10: After you have added enough sections, you can preview the site and adjust settings until you get your desired look. If you are using the Theme Wrap Stack your navigation items will automatically link to your Parallax Stack sections in order. You can change the titles of each section by selecting them in the editor.

Additional Options (Parallax Flight 2)

Start Point Most of the time you will want to leave this option on default. This option is only for when Parallax Flight is visible when the site is loaded (Its located at the top of your page). By default Parallax Flight starts to animate as soon as the top of the image enters into the browser window, but since the image is already in the window on load, the animation will start half way through. So if Parallax Flight is at the top of your site set the Start Point to “Top”. If it is not at the top of the site but still visible on load you can select “Center”.

Loading Color This color options lets you set the color of the background. This color will only display while the images load and fades out after Parallax Flight has finished loading.

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

ourGlass

Setup:

    1. Drag the ourGlass stack onto your page.

      ourGlass Stack Rapidweaver

    1. Drag any of the preload stacks (or whatever you’d like to display while the content is loading) into the “Loading Animation” area.

      ourGlass Stack Rapidweaver

    1. Drag and drop the content to be loaded into the “Content” area, it can be text, images, stacks, etc…

      ourGlass Stack Rapidweaver

    1. Choose between Hide/Show to instantly display content when it’s ready, or Fade In/Fade Out to transition the preloaded out and the content in smoothly, rather than suddenly.

      ourGlass Stack Rapidweaver

    1. Hide Loading Animation will only make changes inside of Stack’s edit mode, it won’t change anything in preview mode, or once your site is live on a server. If you’re using a lot of animations, edit mode may get bogged down by it so “Hide Loading Animation” will help to make Stacks run a little faster.

 

  1. Most of the customization options will be found in the preload stack.

Definition of terms:

Most of the preload stacks have size, colors, and reverse:

ourGlass Stack Rapidweaver

Size:

Controls the width and height in pixels, different preload stacks have different minimum and maximum sizes available.

Colors:

Each preload stack has a different # of colors to control. They all use Rapidweaver’s built in color picker.

Reverse Animation:

Some preload stacks spin, others move top to bottom, whatever the case, checking this box reverses the animation direction. So spinning clockwise would become spinning counter-clockwise if this box is checked.

Some of the preload stacks have special controls not found in the others:

ourGlass Stack Rapidweaver
ourGlass Stack Rapidweaver

Thickness:

Found in preloadGyro and preloadPlus. Controls the width of the circle’s borders in Gyro, and the width of the lines in Plus.

# of Circles:

Found in preloadGyro. Choose between 0-50 circles spinning around in random directions.

Select Animation:

Found in preloadRetro. Choose between three different spinner animations within one stack.

One:

ourGlass Stack Rapidweaver

Two:

ourGlass Stack Rapidweaver

Three:

ourGlass Stack Rapidweaver

Tips and Tricks:

  1. You can use one ourGlass stack for each image or content section to load individual sections independently of each other.
  2. Or try putting all of your page’s content into one ourGlass stack to have all of your content load at once.
  3. Put text describing an image into the “Loading Animation” section, and an image into the “Content” section. This way if an image is large or taking a while to load, the user can see a description while the image finishes loading.
  4. Use a custom gif or other animation in the “Loading Animation” section.

Changelog

v1.2.0 (April 29, 2014)

  • Customization option for minimum fade out duration added
  • Customization option to delay duration before fade animation added
  • Individual animations are now re-grouped under “1LD Stacks – ourGlass Animations” (these are updated under the individual animations)

v1.1.1

  • Solved Several Theme Conflicts
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/2/">
RSS

Ice Box

Here is a customer review/tutorial on Ice Box by William Winter

Basic Use

Place the Ice Box Container to open a new Ice Box section.

Note that if you want more than one instance of Ice Box to run on a page a single container must wrap around all of the inner Ice Box stacks (you cannot have two separate containers).

Ice Box Container

Place the Ice Box Inner inside the container. Place additional inner pieces for every individual picture.

Ice Box Inner

For all general customization options and fade control options select the container. For inner controls (i.e. Thumbnail image, Large image, Alt tags, description) select the individual inner container. If you’re not sure what a customization options does please use the following definition of terms.

Definition of Terms

General Options

  • Link Images: Active by default this option causes images to connect with each other in order so that the navigation images will work. If disabled the navigation icons are removed.
  • Vache: Active by default this option allows users to click anywhere outside of the image to exit. If you place no Exit/Close icon then users can still exit easily, but if this option is disabled it’s best to include an Exit/Close icon.
  • Overlay Opacity: This sets the opacity of the overlay (background color that appears behind the image). 1.0 will remove any transparency, where 0 will make it completely transparent.
  • Overlay Color: This sets the color of the background color that appears behind the image and in front of the rest of the web page.
  • Text: This sets the color of the text that appears for each individual image (description and number order).
  • Left Image: The left arrow navigation icon (note that this will not appear if it is the first image).
  • Right Image: The right arrow navigation icon (note that this will not appear if