Typography

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

Typography Stack SuiteTypography is a stack suite comprised of 6 stacks

  1. Core
  2. Font Import
  3. Headers
  4. Texts
  5. Buttons
  6. Code

CORE

Typography Core The core is intended to assist many of the stacks within, though is primarily built to support Headers, Text & Font Importing. It is not necessary in all cases, but will often assist with stronger CSS that may assist in overriding conflicting theme styles.

In addition, and perhaps more importantly, the Core allows you to set global sizing and color controls to effect other Typography stacks that are placed within it. This saves you the time of re-styling in many cases and also allows for much easier responsive controls where you can set both the responsive breakpoints and the effects they have on font sizes.

Typography Core Default and HTML Wraps

By default the Core will not override anything allowing your theme defaults to be the standard and any styles that you make in Typography’s inner stacks (the other 5). You do have to choose from a list of HTML/HTML5 wrappers. The ‘Div’ is the default and is a basic wrap that typically inherits no particular styles from themes without a specific ID or Class being assigned to it.

Typography Core - Global Styling

Selecting the “Global Styling” checkbox opens styles that can be applied to the inner Typography stacks. The color controls are very straight forward and selecting the “Unique Header Colors” allows you to assign colors to the specific <h1> – <h6> tags.

Typography - Font Size Controls

Selecting Font Size controls gives you global control over all your text and header font sizes. Additionally you can alter the line-heights if you wish, which is the height of the line that the text takes up, though by default this will typically be managed well without adjusting.

Typography Core - Responsive Font Sizes

By selecting Responsive Font Sizes you are given 5 breakpoints, which by default will progress in the following order:

  1. 320px (iPhone portrait)
  2. 480px (iPhone 5 Landscape)
  3. 768px (iPad)
  4. 1024px (laptop)
  5. 1224px (desktop)

These do not effect the exact measurements, but rather everything at their size and below – once the screen width is reduced to the set with is when the font sizes will adjust. For example, at 800px the adjustments for 768px will not occur, but rather the adjustments for 1024px.

Font Importing

Typography Font ImporterThe Font Import stack is meant to assist/guide in the process of importing fonts, whether they are custom fonts or Google’s Web Fonts. We’ll cover the process of both here.

Google Fonts

Font Import - Google Web Fonts

When selecting Google Web Fonts some basic instructions are given in the customization options.

Font Import - Google Web Font Alert

Additional tips are given in the edit section in a green alert box. These give a couple recommendations of where to find your fonts.

To import a google web font I’ll give the following example, which is the basic process for importing all Google Web Fonts.

Google Web Font

1. Find the font you want

Select Web Font

2. Select the font with the Arrow button

Web Font Link Code

3. Select the <link…> code for the font – single clicking will force a select of the whole line of code. Hit CMD+C to copy, then to paste into the field in RapidWeaver hit CMD+V

Google Web Font Name

NOTE, this has only imported the font, but you still have to copy the name of the font and paste it into any Text, Header, or Button fields for the custom font to apply. This saves valuable load time by importing the font only a single time and allows you to use the font as few or many times as you like without slowing anything down.

From the example above, the only part of the font-family name you need to copy would be ‘Lobster’ and that includes the apostrophe before and after the title. Optionally, you can place a comma and type in the fallback font, which can be the recommended one or any you choose (this is the font that will display if the custom one does not load or is not supported).

Custom Fonts

Importing Custom Font

Importing a custom font is a little more complicated and requires a few additional steps – this is simply because the font is not being stored on a separate server, but is going to run off of yours.

FontSquirrel ChunkFive Font

Here I’ve gone to FontSquirrel.com and chosen a popular font called ChunkFive. Click the “Download OTF” button. After downloading you will need to unzip and the .otf file will be inside, which is a font type.

Most of the fonts on this website are intended to have licenses friendly to designers, but it is recommended that you briefly review the licensing to ensure you can use the font for your intended purposes.

FontSquirrel Webfont Generator

When you’re ready to proceed hit the “Webfont Generator button in the top menu.

FontSquirrel Webfont Upload

From here you’ll hit the “Upload Fonts” button and navigate to your .otf file, select the Agreement (assuming you agree to any licensing attached to the font) and download and a “Download Your Kit” button will appear in the bottom right.

Font Files

Unzip the folder and drag these files into the Resource folder in your RapidWeaver site.

Font in Resources

You should see them appear like this in your Resources section.

Importing Custom Font

Now look back over to the right of the Font Importer. In this example the file names end in the -webfont as shown in the example. Also note the instructions to ignore the exentions (.otf, woff, svg, ttf) – that will be taken care of automatically for you.

In this example we would rename the Font Filename to the following: chunkfive-webfont

Return to the folder with the font files in them and locate a file named stylesheet.css

font stylesheet

Open this with any text editor and locate the file name, which will proceed immediately after the font-family:

In this example it is ‘chunkfiveroman’ and you must include the apostrophe symbols.

This is what will replace the ‘fontname’

Custom Font Final

For this example your final result would look like this.

Text, Headers, Buttons & Code

Fluid. This means that the text or header’s size will automatically adjust it’s font size according to it’s parent container’s width. Note that these do have maximum and minimum font sizes as well, so the adjustment will become more or less apparent depending on what those are set to.

Drop Cap. A Text feature that automatically makes the first letter of a section larger (common in articles). There is allowed unique customization of this letter including changing the font, sizing, coloring, and more.

Important! Note that if you use some of RW’s built-in editors that it will wrap the text in a span, making a bracket the first letter – to avoid this you can simply highlight the first letter and hit CMD + .

Marquee. A typing like effect where text animates from left to write with controllable animation speeds and a limitless amount of lines. Note that you will need to drag in Typography’s Marquee snippet to ensure RW’s built-in auto-formatting does not break this effect.

Typography Snippet

Important! For the Marquee text to work you must use the Snippet that is included. Drag it into the Typography – Headers section and then highlight all the text and hit Command + .

This turns off auto-formatting, which will otherwise turn the quotation markets in to different quotation marks that will not work with the code. You can add as many lines of text as you like, but they must all be separated by a comma as shown in the example (the last line should not have a comma).

Note that you will likely have trouble if you attempt to type this text in without the snippet due to the auto-formatting in RW.

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

Super Forms

Basic Set Up

1) Add Super Forms to your stacks page.

Screen Shot 2015-04-14 at 2.55.52 PM

2) Next you will need to add your email to the Email input box inside of Super Forms’ settings panel. This will tell Super Forms where to send the email once the submit button has been clicked.

Screen Shot 2015-04-14 at 3.01.10 PM

3) Drag and drop the Form Element Stacks into Super Forms’ “Drop stacks here” section to build your form. *More info on the form elements below

Tip: If your form is not fitting well into your page you can set the Width Fit option to 50/50 or 100%. These options work better in narrow areas.

4) After you have published your website, visit the page to test your form. Fill out the required fields and submit the form to see if it works. If you receive a red error please refer to the Troubleshooting section below. You host may have some requirements before it will allow you to send a message.

Note 1: Most hosting providers only allow you to have mail sent to a email address associated with your domain name. This is for security reasons. In most cases you will need to set up an email address with your hosting provider. For example if you own the domain “example-store.com”, your email would need to be something similar to “johndoe@example-store.com” in order for the mail to send. If you are seeing a “Mail has been sent!” message and no email ever comes through, it is likely your hosting has this restriction.

Note 2: If your hosting provider does not support PHP you will not be able to use this Stack to send mail. However, most hosts do support PHP. Please contact your hosting provider to find out.

The Form Elements

Super Forms comes with 9 Form Element Stacks that you can add to build your own custom form. They are Captcha, Checkbox, Date, Email, File, Input, Select, Text Field, and Title.

Title Setting

All of the stacks have a Title Setting. Whatever you put will display as the title and placeholder for the Form Element.

Screen Shot 2015-04-15 at 8.53.45 AM

Screen Shot 2015-04-15 at 8.54.24 AM

Screen Shot 2015-04-15 at 8.54.09 AM

Other Settings

Just about all of the stacks have these checkbox options:

Enable Help Text – Text that appears when the question mark icon has been hovered.
Enable Hint Text – Text that appears when the field has been focused (or clicked on)
Enable Note Text – Text that appears directly below the field
Make Required – If this is enabled the form will not submit unless this field has been filled out. Users will be prompted to fill the field out.

Screen Shot 2015-04-15 at 8.56.09 AM

The help text icon displays to the left of the field, the hint text pops up to the right of the field when the field is focused, and the Note text will display in full below the field.

Some of these stacks also contain these Email Formatting options:

Add to Subject Line – This will add the answer to the subject line of the email that is sent to you.
Add to From Line – This will add the answer as the From value of the email that is sent to you.

Screen Shot 2015-04-15 at 9.11.31 AM

Additional Stack specific settings and setup:

Select
To add options you need to add HTML tags. To do so just type the name of the option you want into the text area and wrap it with <option> and </option>. You can add as many options as you want to.

Example:

<option>General question</option>
<option>I need a auote</option>
<option>Feature Request</option>
<option>Other</option>

Screen Shot 2015-04-15 at 9.17.28 AM

Date
Enable Time – This will allow users to select a time as well as date.

Screen Shot 2015-04-15 at 9.18.55 AM

Troubleshooting

Some host’s may not support the method Super Forms uses to send the email. If you receive an error when trying to use/test the form online, try enabling the “Use Alternative Mailer” option found in the Troubleshooting section of the settings panel.

alternative

Some servers may also require email to be sent from the domain owners email address for security reasons. If so, check the ’Send from my Email’ checkbox in the Pure Forms – Settings.
send
If neither of these two options help, please refer to the additional troubleshooting section below.

Additonal Troubleshooting

If seeing a PHP error message when submitting the form:

– There may be a problem with your host’s PHP setup. It may not be configured correctly to use the PHP mail() function either for security reasons or because they support another PHP mailing system. You should contact your host to determine the best way to fix this issue.

If a captcha error appears, even though the captcha has been entered correctly, Or

If when attempting to send, nothing happens, there are no errors or confirmation:

– The likelihood is that your host does not have PHP sessions enabled. Sessions are simply a way of carrying information between webpages. RapidWeaver uses them for the confirmation messages as well as spam protection. Contact your host explaining that the PHP session on your contact form is not working as it should. They will understand what this means and provide a solution.

If email appears to send correctly:

– The Contact Form script is working just fine and it is an issue either with the server not sending the email or a spam filter catching it. Please check your hosting company’s spam filtering policy. Note: be sure to double check the spelling of the email address you entered into Super Forms’ email setting.

If you’re still having issues getting the Contact Form to work:

– Contact your host for advice. Ensure they are able to send an email from the server using PHP mail() and ‘sendmail’. (Check below to see a sample message to send to your host.)

Sample message to send to your host:

Hello,

I am currently having trouble sending emails via a contact form on my webhost. a) It would appear that everything is working just fine and the mail is sent yet I do not receive an email. OR b) It would appear that the server is unable to send an email from my server using the PHP mail() function. Would you be able to tell me whether I must do anything specific in order to send an email using your servers. The PHP code relies on sendmail and the standard PHP mail() function and PHP sessions to send the emails. 

Regards,

Jon Doe

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

Hide

Install the stack then drag it onto the page and put anything that you want to hide or show inside it

 

Setting up

Step1:  Set the the amount of the breakpoint (note: the amount is the the size of the screen or browser)

Screen Shot 2014-11-28 at 11.11.10 AM

Step2: Click on the “Display Off ” option if you want your content to hide.

Screen Shot 2014-11-28 at 11.11.47 AM

 

(note: if you want the content to disappear on both break points then select it for both or if you want it to show at a certain point then don’t click it. )

Additional information:

-Once the size of the screen reaches the breakpoint amount it will activate.

(for example: if the breakpoint 1 is 800 and breakpoint 2 is 600 then breakpoint 1 will work in-between 800-600. Breakpoint 2 will activate at 600.  )

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

Responsive Grids

Here is a customer review/tutorial by William Winter

Getting Started

Step 0: Download and install stack. 

Step 1: Drag the stack onto the page . After dragging the stack onto the page, select the amount of columns that you want displayed. The selector for that can be found in the stack options under (Column Selection).

columns

Step 2: Input the content that you want into the stack.

 


Grid Activation

The grid is an option that will reduce the amount of times that you have to drag Responsive Grids onto a page.

Step 1: Turn on the grid option to activate it. “note:anything in the stack prior will be disappear

Grid_on

Step 2: Select the amount of rows that you want to use. “The default is 2”

columns Screen Shot 2014-11-20 at 9.30.09 AM

 


Spacing Options

Gutter: The gutter has to option to turn off and on.

Screen Shot 2014-11-20 at 9.38.19 AM

Gutter Width: Select the width of the gutter if you have the Gutter option turned on.

Screen Shot 2014-11-20 at 9.38.36 AM

Bottom Margin: Input how much spacing you want bellow Responsive Grids.

Screen Shot 2014-11-20 at 9.38.47 AM

 


 

Break Points

Break Point 1: Input the break point for the first media query. “This is usually for tablets on portrait mode.” 

break point

Break Point 2:  Insert the amount of pixels you want for the second break point. “This is typically for mobile phones.”

mobile breakpoint

 


 

Advanced options

2 column , single column spacing , single column width , image options

 

2 Column

Split:  Split is an option unique to the 2 columns option. Choose whether you want the stack to be a  50/50, 40/60,  etc.

Split

 

Single Column Spacing

The Spacing option is the option for the padding on the top and bottom of the single column stack. This become very helpful if you are doing a single page website or even a portfolio site.

Step 1: Turn on spacing.      Spacing

Step 2: Select whether you want to use pixels or percentage.

px or perc

Step 3:  Input the amount you want on the top and bottom. “There maybe be more spacing on the bottom if you have an amount higher than Zero on the margin bottom option.”

Screen Shot 2014-11-20 at 9.59.16 AM

 

 

Single Column Width

Control the max width of the single column. This is a great option if you want something to be a certain size and positioned in a certain way. “It will still be responsive! “

Step 1: Turn on the Max-Width option to activate it. 

Screen Shot 2014-11-20 at 10.11.42 AM

Step 2:  Input how large you want your stack to be.

Screen Shot 2014-11-20 at 10.11.58 AM

Step 3: Select the position of the stack. “center is very useful”

Screen Shot 2014-11-20 at 10.12.29 AM

 

 

Image Options

You have a choice to have images be responsive.

Step 1: Activate responsive images.

Screen Shot 2014-11-20 at 10.21.07 AM

Step 2: Input how wide you want your image to be.

Screen Shot 2014-11-20 at 10.21.49 AM

 

 

 

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

Font Awesome Pro

Font Awesome Pro

Font Awesome Pro

The pro version allows customization of the Font Awesome icons. You still need the free version to activate Font Awesome (if your theme doesn’t have it running already). After Font Awesome is activated/imported Font Awesome Pro’s customization options will work.

Note, occasionally fonts may not appear in Edit Mode and often saving the page will cause a reload and then display the icons correctly.

Category: Allows you to select from Font Awesome’s icon categories that they have on their website. Depending on the category you select will depend on what icons appear available in the next drop-down menu. The categories include Web Applications, Form Controls, Currencies, Text Editor, Directional, Video Player, Brand Icons, Medical, and Manual. I added the manual icon in case you want to skip locating the icon in the drop-down menu and simply type in the icon name as found on their website here.

Icon URL On: Make available the following field ‘Icon URL’ which you can type in any URL that will wrap only around the Font Awesome Icon (including any padding and borders you have added).

Icon Size: Pixel size of the icon.

Icon Color: Color of the Font Awesome Icon

Icon Shadow: Sets a text shadow to the Font Awesome Icon (this is not needed if you select the ‘Flat Icon Shadow’ further down).

Shadow Color: Color of the text shadow.

Shadow Amount: Control over the direction and blur of the shadow (x, y, blur).

Flat Icon Shadow: Enables the flat shadow effect you can see on our preview page.

Fade On: Sets the flat shadow to fade if turned on.

Flat Direction: South East, South West, North East, North West.

Icon Background: Enables a background color (following option).

Bg Color: Adds a color to the background behind the icon, though this will not display well without adding some padding and possibly a border (in options bel0w).

Add Section for Text: Creates a Stack’s text section. Note that these may not appear to well unless you float the icon left or right (in options below) or if you center the icon (also in the options below).

Add Section for Stack: Creates an empty Stack’s section (slice) where you can add other stacks in.

Float Direction. Sends the icon left or right, which is most useful when a Stack or Text section is added.

Center Icon. Centers the icon.

Icon Padding amounts (top, right, bottom, left): Adds space between the icon and its outer edges. If a border is used it will display on the outer most edge of the padding and background color will also fill this space.

Icon Margin amount (top, right, bottom, left): Adds space between the icon and surrounding elements. This is most useful when a Stack or Text section is added – you will want to add space so that they are not so close together.

Turn Border On: Adds a border allowing you to control the width, radius (round corners) and color.

Second Border: Adds another border on the outside allowing you to control the width, radius (round corners) and color.

Changelog

v2.0.0 (June 23, 2014)

  • Includes all new Font Awesome 4.1 icons including new categories
  • Removed a few duplicate Font Awesome items

v1.1.10 (Apr 9, 2014)

  • Fixed 4 directional icons calls

v1.1.9 (Apr 3, 2014)

  • Added option to control fade distance

v1.1.8 (Feb 5, 2014)

  • Vimeo fixed

v1.1.7 (Feb 3, 2014)

  • URL Option added for URL to open in a new tab
  • Rotate Hover added
  • Transition Speed Controls (in/out)
  • Size Hover Added
  • Flat Shadow Hover Removed (currently not supported)
  • URL Default changed from empty to “http://”
  • Corrected Mispellings

v1.0.3 (Jan 29, 2014)

  • New Icon added
  • Added option to add a URL to the icon
  • Fixed built-in breifcase icon
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/page/2/">
RSS

Parallax Switch

Setup

Step 1: In Parallax Switch’s “General Controls” section select a the number of items you would like to switch between using the “# of Items” option. Typically you will want to select 2 or 3 items, anything higher is for the “Play Items as Frames” Option (this is described under the “Auto Play” heading below).

Step 2: Select a “Position” option.

Step 2a Relative: “Relative” will place the Stack’s content where ever you have placed it, just as you would expect with any other stack you place into your editor.

Step 2b Fixed: “Fixed” means that the stack will not scroll with the page and will instead always be visible in the window. Selecting “Fixed” as an option will add width, height, horizontal position, and vertical position options. The Auto Height and Auto Width are enabled by default. These options match the height and width of the content placed inside of Parallax Switch. If you disable these options you can use the width and height sliders to declare percentage based values. Then all you need to do is adjust the horizontal and vertical positions. The horizontal position is adjusted in a percentage value while the vertical position is set by a pixel value. Change to preview mode to see where your stack sits in the window as these options do not display in edit mode.

Step 3: You now need to assign distance values to each item (Found in the Stack’s area not the Options menu). The first item will automatically display on page load or start. The following items will need to be set in descending pixel values. The “Display at Distance” values will determine when that particular item will display. Setting an item to 400 will make it so that item displays when the top of the browser window is 400px from Parallax Switch (when scrolling).

Example Setup Values:
Item #1: Start (cannot be changed)
Item #2: 500px (will display this item when Parallax Switch is 500px from the top of the browser window)
Item #3: 100px (will display this item when Parallax Switch is 100px from the top of the browser window)
Item #4: -300px (will display this item when the top of the window has scrolled past Parallax Switch by 300px )

Step 4: In Parallax Switch’s “General Controls” section select an “Animation” option. By default Parallax Switch will fade between each item. You can then adjust the speed of each animation’s transition using the “Speed” Slider. Preview your changes and adjust till you get a good fit for your site.

Auto Play

Play Items as Frames: Auto Play, simply put, simulates a GIF. It will automatically cycle through each item in Parallax Shift like frames in a movie. This mode does not support the “Animation” option.

Speed: This is the amount of time that each individual frame will be displayed in milliseconds. So if it’s set to 0, it will cycle through each item very fast, but the higher the number, the slower it will cycle through the items in Parallax Switch.

Help

Display Scroll Position This option displays the position in pixels of how far the top of the window is to the top of the Parallax Switch stack. This will help you set up your “Display at Distance” values.

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

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.