Scroll Up

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, right, or center (v1.1.0+ required for center).

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

Please follow & like us :)
Follow by Email

Live Search


You only need to drag and drop the Live Search Stack into the Stacks page where you want it to display. No additional setup is necessary for the Stack to function. The page must be uploaded online for the search feature to work.

Below are  some tutorials on optional customization.

Search Bar Options

Show Suggested Search Terms

Suggested Search Terms

Enabling this will allow you to define any number of suggested search terms. These terms will appear as a drop down selection menu that users can click to automatically populate the search bar. The suggested search terms will also display as they are spelled out in the search bar as a form of auto-complete.

Note: This HTML5 feature is not yet supported in Safari browsers.

Allow Auto-complete

Enabling this will allow browsers to auto-complete search terms that have been previously searched for by the same user.

Customize Appearance

Enabling this option will reveal search bar customization settings.

Search Result Options

Results per Page


Define how many search results will display before sorting the remaining results into navigable pages (pagination).

Word Count

Define how many words each search result displays under the page title.

Open Link in a New Window

Enable this to have the search result links open in a new window or tab.

Show File Path

Enable this to show the file path beneath the page title in the search results.

Customize Appearance

Enabling this option will reveal search results customization settings.

  • Theme – Choose between two themes (chat bubble or plain results). You can also choose options that display the results as a popover, hovering over the content, or embedding the results into the page.
  • Focus Overlay – Choose a light or dark option to enable an overlay that will darken or lighten the background content when a search has been performed.

Custom Page Summary

By default, Live Search will display the first 60 words as the description for a page in the search results. If the searched term is not found within the description, a section from the text containing the searched term will be added with ellipsis (…) to the description.

page description text

This Stack includes a snippet that you can place inside any text area to mark where you want the search results to grab the description from (Stacks and non-Stacks pages).

description marker snippet

To change the description on any page, drag and drop the snippet into a text area above the text you want to display as the description for that page. Then highlight the snippet and choose “Ignore Formatting” from the Format drop down menu.

ignore formatting

In the example below, I have placed the Description Marker below the first paragraph and above the second. Now when this page shows up in the search results it will ignore the first paragraph and display the text from the second paragraph, highlighting any terms found in the description.

example description marker

Show Search Results in a Custom Container

By default, Live Search will display the search results directly below the search bar at the same width of the search bar’s container. In some instances you may want to place the Live Search stack into a narrow container (like a sidebar). However if the search bar’s container is narrow, the search results will also be narrow. The image below is an example of what the results would look like.

narrow search results example

This Stack includes a snippet that you can use to declare where you want the search results to display. In this case I want the search results to display in the Main Content container because there it has a bigger width. To mark where you want the search results to display just drag and drop the “Results Element Marker” snippet into any text area. Then highlight the snippet and choose “Ignore Formatting” from the Format drop down menu.

results container snippet

ignore formatting

In the example below the snippet was placed inside the Main Content container.

main content container example


Advanced Options

Customize Text/Language

Enable this option to reveal text input fields that will allow you to change the language of the search’s messages and placeholders.

Search Additional Pages

Enable this option to define pages that you would like to search through that are not in the navigation menu. Each extra page to search is added by clicking on the ‘plus’ icon in the editor. Click on the empty field to choose which page to include in the Settings panel to the right of the editor. There is no limit to how many pages you add to the “Extra Pages” section.

Note: Each added page needs to be apart of the same domain and website.

Note: If your website has allot of pages (100+) it may take quite a while to add each individual page. If you have this issue, check out the link here and we can help you add the pages in a more efficient manner.

Hide Description Terms

Enable this option to define certain words or phrases you do not want to show up in the search result page descriptions. For instance, if a certain slogan is on every page and you do not want every search result description to have the same text, you can define it here to remove it from the descriptions. You will also need to add a plus symbol and backslash (+\) between each of the listed terms/phrases. Do not add these symbols before the first or after the last term/phrase listed.

Declare Search Container

If you are using a specific theme and you know the class or id name of a specific element, you can define it here and the search will only search that specified container instead of the the entire page. Prefix a class name with a period(.) or and ID with a hash/pound symbol (#).

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available by right clicking the element on the page you want to be searched. It will show up highlighted.

declare search container

Here are acceptable values for the field (using the info from the screenshot above).

#charis-myExtraContent1 (This is the recommended value if the container has an ID [orange # value] )

.charis-ec (This is also acceptable, but unlike an ID [orange # value], classes [blue . value] can be used more than once on other containers, so other containers with the same class will also be searched)

Note: You can only declare a single container in this field.

Exclude a Page from the Search Results

To keep a page from showing up in the search results, add the snippet below to the Header > Prefix section of the page you wish to exclude.


exclude page

Exclude a Section of Text from the Search Results

If you want to exclude a section of text from showing up within a page in the search results, place the snippet below before and after the text you want to exclude.


exclude text

Include the Current Page in the Search Results

If you would like to include the page the Live Search Stack is on in it’s search results,  just enable “Search Additional Pages” in the Advanced Options. Then add the page’s filename (found in the Page Inspector > General Settings) to the Extra Pages field.

Extra Pages Field


Please follow & like us :)
Follow by Email

Optic Stats 2

The original Optic Stats Stack has been replaced by the Optic Stats 2 Stack. If you currently own Optic Stats you can upgrade by using the Purchase Order Lookup Form. The download link for Optic Stats will download Optic Stats 2.


Settings Panel

Starting #: The number that the Stack will start counting from (when the ‘Count Numbers’ animation has been enabled).

Goal #: The number used to determine 100% Fill. Note: Setting this value to ‘0’ will cause the ‘Count Numbers’ animation to count down instead of up. 

Current #: The number used in conjunction with the Goal # to determine the current Fill percentage. This value will be displayed after the ‘Count Numbers’ animation has been completed.

Link to Live Data Stack:  Requires the Live Data Stack, will allow you to import a Current # value from a Google Spreadsheet.

Display Decimal Value: Optionally add a decimal value to the Current #. Decimal numbers will animate if the ‘Count Numbers’ animation has been enabled.

Group Numbers: Adds a separator in-between groups of 3 numbers. (IE 1,000,000 or 100.000.000)

Separators: Change the format of the decimal and number grouping separators.

Units: This is what will display directly to the right of the Current #.

Prefix Units: This will move the Units to the left of the Current #.

Font Size: Adjust the size of the Number and Units.

Font Family: Font the Number and units will use. The default value ‘inherit’ will use whatever font your Theme is currently using. See this page for a list of usable fonts. You can also add a custom name of a font that you have imported.

Color: Adjust the color of the Number and Units.

Title: This is a title that will display below the number and units.

Offset: Increasing this value will add space in-between the Number and Title.

Font Size: Adjust the size of the Title.

Font Family: Font the Title will use. The default value ‘inherit’ will use whatever font your Theme is currently using. See this page for a list of usable fonts. You can also add a custom name of a font that you have imported.

Color: Adjust the color of the Title.

Icon: Optionally add an icon to display next to the Current #. You can either use Font Awesome (must add the Font Awesome Stack to the editor) or use a custom square image.

fa-: Add the name of the Font-Awesome icon you want to use here. For a complete list of usable icons and their titles check out this link here:

Color: Adjust the color of the Icon.

Font Size: Adjust the size of the Icon.

Position: Change the position of where the Icon is displayed.

Type: Choose from 7 display type options. Each has a unique design and animation.

Align: Change the alignment of the entire Optic Stats Stack.

Width: Define the width (will also define the height if the height option is not present) of the Optic Stats Stack. Note: This stack is responsive, so in the event you define a dimension that is larger than the stack’s container it will shrink to fit the container.

Height: Define the height of the Optic Stats Stack. This option is only available when the Type has been set to ‘Horizontal Line’ or ‘Vertical Line’.

Bar Fill Thickness: This sets how wide the Bar or border displays.

Colors (Bar): This controls color of the progress bar container.

Colors (Fill): This controls the color of the progress bar.

Colors (BG): This controls the color of the circle’s background.

Background Image: Optionally add a background image. Note: The image will not be visible if the BG Color is not transparent.

Remove Background Color: If you do not want to use a transparent color, you can enable this option to remove the background color all together and display the image only.

Count Numbers: Enables the number counting animation.

Transition Speed: This sets how long (in milliseconds) the progress bar filling and number counting animations will take to complete once the Stack is visible on screen.

Color Animation: Optionally add a color animation to the Fill.

Please follow & like us :)
Follow by Email

Side Accordion

cleanAccordion’s customization options are very intuitive and do not demand much explanation in most cases, with the slight exception of some terminology that can be defined.

General Setup

Side Accordion Container

To create an accordion you must first place the container stack.

Side Accordion Inner

Then place at least one Inner stack inside. To create additional sections place more inner stacks above or below the other inner stacks.

General width and height controls are provided for the overall sizing of the horizontal accordion. For all sizing the accordion will adjust all of it’s content alignment so that things are centered and spaced well.

Side Accordion Title

When controls use the term “Title” they are referring to the tab part of the accordion.

Side Accordion Description

In instances where the term “Desc.” is used, this is an abbreviation for Description and references the larger content section that opens when titles are active.


By default you can set up all your colors in the containing stack.

Side Accordion Override Colors

You can also override the global colors inside of each inner stack. This is not turned on by default and must be done to each individual stack as desired.

Please follow & like us :)
Follow by Email

Linkedin Connect

Basic Setup:

Step 1:

Place Linkedin Connect to the top of the page.Core at the top

Step 2:

Then in options for “Linkedin Type” select Core. This will activate the stack and allow it to work.

/Note :: For all the posts to be viewable the page must be uploaded.

Linkedin Core



Share Button:

Step 1:

In the options select “Share Button”.

Share button


Step 2:

Now get the URL of the Linkedin page that you want to link. Highlight it and copy it.



Step 3:

Take the link that you just copied and paste it into the Website URL option in the Linkedin stack.

Website URL realmac



Follow Button:

Step 1:

In the options select “Follow Button”.

Company Follow Button

Step 2:

Find the showcase page that you want to link. Showcase pages are an extension of your company pages. For this instance we are using RealMac’s showcase page. Highlight and copy the portion of the URL starting with “/company”. In this case we have “/company/realmac-software”, but for you it will contain either your company or another.

Company Showcase

Take what you highlighted  and go to this link On the page, paste in what you copied in the “Company/Showcase Page Name” section.

Showcase name



Step 3:

Now that you have pasted that info click on the “Get code” button. After doing so find the data-id and copy it. showcase data id


Step 4:

Take the data id that you copied and paste it into the showcase id option in the Linkedin Stack.

Realmac showcase id


/note:: the button wont appear till the page is published/

Member Profile:

Step 1:

In the options select “Member Profile”.

Member Profile


Step 2:

Get the link to the member profile that you want to share then copy the link.

Member Profile



Step 3:

Take the copied link and place it in the Member Url section in the Linkedin stack.

Member Paste



Company Profile:

Step 1:

In the options select “Company Profile”.

company profile


Step 2:

Now get the URL of the Company Linkedin page that you want to link. Highlight it and copy it.



Step 3:

Take the link that you just copied and paste it into the Company Id option in the Linkedin stack.

Company Id Paste

Company Insider:

Step 1:

In the options select “Company Insider”.

Company Insider

Step 2:

Now get the URL of the Company Linkedin page that you want to link. Highlight it and copy it.


Step 3:

Take the link that you just copied and paste it into the Company Id option in the Linkedin stack.

Company Id Paste



Please follow & like us :)
Follow by Email

Carousel Complete

Basic Setup

Step 1: Drag & drop the Carousel Complete stack into the stacks editor.

Carousel Complete icon

Screen Shot 2015-06-30 at 3.18.07 PM

Step 2: If you wish to use an image or a video you can Drag & drop the Clean Carousel Slide stack into the “Drop stacks here” section of Carousel Complete. Otherwise you can instead add a text stack or another 3rd-party stack (Some 3rd-party stacks may not be compatible).

Inner Stack Icon or Text Stack or 3rd party stack (Some other 3rd party stack)

Step 3:  Add stacks to the carousel until you have the amount of slides you would like to use by dragging in each one underneath the previous one before it. Make sure all the stacks are contained inside of the Carousel Complete stack.

Note: Carousel Complete requires at least two slides to function.

Video Setup

Step 1: Select the video option in the Carousel Complete Slide stack.

video select

Step 2:  Add the video’s URL to the “Video Url” field. The Carousel Complete Slide stack supports YouTube or Vimeo URLs.

Screen Shot 2015-06-30 at 3.35.52 PM

Carousel Complete General Controls

Slider Type

Slide In Effect – Determines what animation the incoming slide transitions with.

Slide Out Effect – Determines what animation the out going  slide transitions with.

Add Fade Effect – Adds a fade effect to both the incoming and out going slide for a smoother transition. (Some effects already have fades added to them)

Caption Effect – Determines what animation the caption transitions in with.

Carousel Type

Wide Desktop, Desktop, Tablet, Mobile – These numbers set the amount of slides to display at once.

Wide Desktop –  Effects browser windows that are greater than 1200px wide.

Desktop –  Effects browser windows that are less than 1200px wide but greater than 900px wide.

Tablet – Effects browser windows that are less than 900px wide but greater than 600px wide.

Mobile – Effects browser windows that are less than 600px wide.

Slide By – The amount of slide to transition by.

Center Slides –  If enabled,  the slide in the middle of the carousel will be the focused slide and will always remain centered on all browser widths.

Mouse Drag – If enabled, visitors can click and drag the slides left and right to navigate through them.

General Controls

Autoplay – If enabled, the slider or carousel will automatically transition on set intervals.

Autoplay Speed – Sets the speed at which autoplay transitions from slide to slide. (Only visible if Autoplay has been enabled)

Pause On Hover – If enabled, the slider or carousel will pause Autoplay while the cursor is hovering over the slider.

Video Autoplay – If enabled, any videos inside the slider or carousel will automatically start playing when the slide is visible. (Only visible if Autoplay has been disabled)

Auto Height – If enabled, the slider will automatically adjust to the height of the focused slide.

Wide, Desktop, Tablet, Mobile Height – Sets the height of the slider or carousel at the respective browser window sizes.  (Only visible if Auto Height has been disabled)


Slide L/R Padding – Increasing this value will add space in-between the left and right of each slide.

Arrows – If enabled, navigation arrows will display at the right and left of the slider and carousel.

Pagination – If enabled, pagination dots will appear below the slider. Users can click on the dots to navigate through the slider or carousel.

Background Color – If enabled, allows you to set a background color for the slider or carousel.

Edit Mode Help

Slide Width – This option only effects how Carousel Complete looks in edit mode. Reduce the percentage to allow the slides to appear left to right to save space inside of the stacks editor.


Please follow & like us :)
Follow by Email


cleanTips is a great tool for displaying small notes, information, and links next to information that a visitor might have questions about.

Basic Setup

cleanTips ToolTip Sections

cleanTips has two sections in the edit area. In this example the top is the ToolTip message that will appear when the bottom section is hovered over by the mouse arrow. Note that both sections will accept any other stacks: text, images, media, videos, and other stacks.

After you have placed content inside of both sections select a theme: currently there are two themes “Default” and “Outlined.”

Next select a direction for the ToolTip: Top, Bottom, Left, or Right.

Size of ToolTips & Padding is Important!

Important! cleanTips is intended for small amounts of data by design, though it is not limited to it. The larger the toolTip becomes the more you must adjust the container’s padding to account for it’s size. In addition, depending on the direction the ToolTip is appearing, you may need to adjust the ToolTip’s distance from the message it hovers next to.

Important! There are so many influencing factors to the exact positioning of the ToolTips that the alignment of the ToolTip shown in Edit mode will most often vary from the exact position shown in Preview mode. Fine tuning usually isn’t too hard, but will take a few often take a few tries to get perfect.

Positioning Left & Right

cleanTips position left

When positioning to the left and right the ToolTip will appear outside of the box and can even bun unable to edit at times.

cleanTips position shown in edit

For this reason I created the option to turn off the actual position so that it’s easier to edit.

cleanTips position not shown in edit fix

This makes the ToolTip much easier to edit. So why is this even an option? To help you place the ToolTip horizontally & vertically as it will more closely appear in it’s actual position when in Preview.

Sizing & Positioning

Many of the customization options are very straightforward and lack a need of explanation in most circumstances. For that reason I will be focusing more on the ones that seem the most important.

Position. This option is set to make the ToolTip centered by default, though can be adjusted (the arrow can also be adjusted in another option).

Distance. This option refers to the distance of the ToolTip from the message it appears next to. Negative amounts will distance the ToolTip away from the message where positive amounts will bring the ToolTip closer to the message.

Inherit Width. This is an option available for the Top & Bottom positions as it did not make as much sense for Left & Right. It will set the ToolTip to be the same width as the Message section that it appears next to. This can be turned off and a manual width set.

Padding Exceed Width. This option lets you decide if the padding will increase the size of the ToolTip or if it will not (then pushing the content inside rather than growing the size of the ToolTip.

Arrow On & Arrow Position. These refer to the small triangle that appears next to the ToolTip, which is On by default. You can turn it off and also position it in other areas (centered by default).

Please follow & like us :)
Follow by Email

Countdown Clock

Basic Setup

Countdown Clock comes built as 5 functioning pieces that integrate with each other: Wrapper, Days, Hours, Minutes, and Seconds.

Countdown Clock Elements
The first option in the settings panel titled “Section” is where you choose what function the stack will serve.

After you drag and drop the first Countdown Clock stack into the editor it will automatically be set to “wrapper”. You will then need to place a column stack and the 4 inner elements stacks inside the wrapper under the heading “Time Elements”. First place the 4 column stack, then drag and drop 4 additional Countdown stacks (one into each column) and set each “Section” to the corresponding value: Days, Hours, Minutes, and Seconds.

More information on each element below.


The wrapper controls a majority of the settings and all the time elements (days, hours, minutes and seconds) must be contained inside of it.

A majority of these controls in the General Options section are very straight forward. You first set up the date that the clock will countdown to.

Countdown Clock Text Displayed

Text is displayed by default, but can be turned off. This is the text that will display underneath the individual clock numbers (i.e. Days, Hours, Minutes, Seconds). Note that the language for these can be changed in the individual time elements.

Global colors & sizes for the numbers and text can be controlled, but note that you can override these in the individual time elements if you like.

Font declarations can be made, but these require you to import your own fonts. You can do this manually or you can use various tools such as our Font Importer in our Typography stack suite. If you make no font declarations here and make the fields blank then fonts will be declared by your theme.

Symbols can be placed after Days, Hours & Minutes, such as the common colon symbol :

Countdown Clock Responsive Sizing

Responsive sizing is off by default and may not be necessary if you are using responsive columns. Regardless, if you turn it on you can control sizes for the numbers and text at various screen sizes. The sizes will only adjust when they reach the screen size or below and for no errors to occur please keep these in order from largest to smallest… largest screen size at the very top and smallest at the very bottom.

There are four, but if you wish to have less then simply duplicate, but still keep in order from largest to smallest. Example: 767px, 767px, 480px, 480px. That would adjust sizes only at 767px screen width and 480 screen width, but does assume you also set the number and text size to be the same in each relative screen width.

Adding Time Elements (Days, Hours, Minutes, Seconds)

time elements

As mentioned before, Countdown Clock comes built as 5 functioning pieces that integrate with each other (all found inside the “Section” option). Now that we have explained the wrapper we need to set up the Days, Hours, Minutes, and Seconds which we will refer to as “Time Elements”.

Countdown Clock Adding Time Elements

The basic setup shows where to place the time elements in the green alerts. Time Elements are at the top and the completion message at the bottom.

Time Elements in Columns

Stacks Columns

Though not necessary, it is highly recommended that the time elements be placed in columns for most basic setups. You can use a responsive columns stack, such as Responsive Grids, or the free built-in columns that come with Stacks.

Countdown Clock with Columns Added

After doing this your setup should appear something like this. Note that the numbers do not represent the actual numbers for your clock as this is controlled through JavaScript, which does not run in edit mode.

In the section below “Countdown Complete Message” you can place whatever you would like to display once the clock has finished. This can be any other stack content including text, images, other media and even other stacks.

Time Element Controls

Countdown Clock Time Element Controls

Each time element can align the numbers & text left, right and center. Additionally, you can control the text that is displayed (text display must be turned on in the wrapper). You can control the text for both singular & plural – singular will only be shown when the number 1 is reached in the clock.

Finally, you can override colors and sizing for each individual time element, which will override the colors and sizing set in the wrapper.

Overlay Mode

Overlay Mode allows you to cover an entire page instead of just a section of a page. Once the Countdown Clock has finished the page will be exposed – for added security there is also a Redirect to URL option that will instead send the user to a new URL once the clock has finished.

Controls for this section are very straight forward and all content will automatically center both vertically and horizontally in this mode.

Below the Time Elements there is an Optional Content Area, which allows you to place text, images, media and other stacks. This section will disappear when the clock has finished and so is only added so you can give viewers some added information, such as what will be displayed when the clock is finished. Note that everything will be auto-centered, so it is recommended that you do not add too much to this section.

Version 1.0.2+ Close Overlay option

Countdown Clock - Close Overlay

A close overlay link can be placed in version 1.0.2 that will close the overlay and reveal the page behind it. Simple assign the class of “pageOverlay” to a link.


There are currently 3 themes and their effects can be seen in both edit and preview mode. The “Wireframe” theme will automatically adjust to the color of the background of Overlay if you have turned Overlay On. We plan to add more themes in the future as well, so please feel free to send us requests.

Please follow & like us :)
Follow by Email

Cinema Slider

Set up

  1. First drag and drop the Cinema Slider Stack into the Stacks editor. It should appear like the screenshot below.Screen Shot 2015-05-28 at 10.20.44 AM
  2. Then drag and drop the Cinema Slide Stack into the “Drop stacks here.” section located underneath the heading “Add Slide Stacks Below”. Repeat this step until you have as many slides as you want to use. Your finished result should appear like the screen shot below.Screen Shot 2015-05-28 at 10.24.15 AM
  3. Now select the first Cinema Slide stack and in the panel on the right side of RapidWeaver click the browse button underneath the section labeled “Slide Settings”. Locate the first image you wish to use. Repeat this step for all of the slides you have added.

For additional help on styling your slider refer to the Slider Settings guide below.

How to Add Captions

All you need to do is drag and drop a text stack inside the Cinema Slide‘s “Drop stacks here” section to add captions to your slides. For additional help on styling your captions refer to the Slide Settings guide  below.

How to Create a YouTube Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the YouTube Video slide type.
  2. Locate the video you want to use on and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string (after “?v=”) Screen Shot 2015-05-28 at 11.14.23 AMor found in the share tab for the video after the last slashScreen Shot 2015-05-28 at 11.12.20 AM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

How to Create a Vimeo Video Slide

  1. After adding your slide stack to the editor, select the stack and in the panel on the right side of RapidWeaver underneath Slide Settings select the URL Video slide type.
  2. Locate the video you want to use on Vimeo and place the video code into the Video Code input. You can find the video code in the address bar at the end of the URL string after the last slashScreen Shot 2015-05-28 at 1.59.17 PM
  3. Next you need to add a screenshot (of the video itself or of some other image) so that the transition effect will work. Click on the browse button to add your screenshot and you are done.

Slider Settings Guide


Image Alignment – This sets what area of the image the slider will focus on if the image is too large to fit the aspect ratio. Note: The images will still scale to fit the slider, cropping will only happen if the images have a different aspect ratio than what the slider has.

Height Type – There are three options for height type: Aspect Ratio, Percentage, and Static Pixel Height.

  • Aspect Ratio – If you know what aspect ratio your images are use this option. This will keep the slider fully responsive and ensures a great fit for most photos and videos.
  • Percentage – Use this option if you want to adjust the height till you get a good fit for your non-standard sized images. The percentage is in relation to the slider’s width (I.E. 50% means one half the size of the width or 2:1 ratio) This option will also keep the slider fully responsive.
  • Static Height – This option will keep the slider at a specific height no mater what size the browser window is. This option is not fully responsive for images and videos.

Slider Max Width –  This option is for when you don’t want your slider to fill the entire width of where you place it. Set a max value and the slider will not stretch to fill the width.

Slide Hang Time – This sets the time between the end of the last sliding effect and the start of the next one.

Transition Time – This sets the length of the transition effect.

Autoplay – Enabling this will set the slider to automatically start playing when the page is loaded.

Navigation Hover – If this is enabled the navigation buttons (prev, next and play/stop buttons) will be visible on the mouse hover state only, if this is disabled they will be visible always.

Frame Settings

Detailed Size – Use this option to set specific values for the frames top, bottom, left, and right widths.

Size – This sets the size of the frame on all sides.

Style – These are different templates to add shadows to the frame (for sliders with frames) or to the slider (for sliders that use the frame as a background instead). To use the frame as a background be sure to set you slider’s max-width and the slider will automatically center inside the frame.

Texture – Add a colorable texture to the frame or background.

Advanced Settings

Slider Min-Height – Set the minimum value height the slider can be regardless of the aspect ratio. This is useful only for mobile sized screens, when the slider becomes too small. increase this value to enlarge the slider.

Secondary Slider – Enable this option if there is already another Cinema Slider on the page. This will reduce load time by removing unnecessary code as it can “borrow” the code from the first slider you placed.

Don’t Crop Images – This will disable cropping on the image. Useful if you want to use portrait style images.

Hide Prev/Next Buttons – Enable this to hide the prev/next buttons.

Hide Play/Stop Button – Enable this to hide the play/stop button.

Show Thumbnails – This will display the thumbnail images you have set inside each Slide Stack below the slider so that users can navigate through the slider by clicking on them. If you also enable “Show Pagination”, the thumbnails will display when the pagination bullets are hovered instead of below the slider. Note: This option only works if you have set thumbnail images for each of the slides in your slider. See the Slide Settings Guide below to learn about adding those thumbnail images.

Disable Pause On Hover – By default the slider will pause whenever the mouse is over it. Enable this option to turn that feature off.

Show Pagination – Enable this to show a bullet style navigation in the bottom right corner of the slider. As mentioned above, if you enable “Show Thumbnails” with this option also enabled, thumbnail images will display above the bullets when hovered.

Show Loader –  Enable this to show a circular loader while the slide hangs. The slider will transition to the next slide when the bar fills the entire circle.

Loader Position – Choose where the loader will display.

Loader Opacity – Set how transparent the loader will be. 10% is barely visible and 100% is opaque.

Loader Diameter – This controls the size of the loader.

Loader Stroke – This controls the thickness of the loader bar.

Slide Settings Guide

Slide Settings

Slide Type – You are able to choose either an image, YouTube video, or other video (I.E. Vimeo). There is also an option titled “No Image (Caption Only)”, use this option when you do not want to add and image but are going to use Stacks content instead.

Image – Browse for the image you want to use for the slide.

Transition – This sets what animation the slide transition will use.

Caption Settings

Text – This sets the color of your captions text, this can be overwritten by the stacks you place inside of the caption area.

Background Style – Set a color as a background for the caption so that it can be more easily read.

Transparency – Change the opacity of the captions background.

Advanced Settings

Thumbnail – Add a thumbnail of your image. This is only useful if you are using the “Enable Thumbnails” advanced setting in the Cinema Slider.

Add Link – Optionally add a link to your slide, so that when it is clicked, it will navigate to there.

Please follow & like us :)
Follow by Email

Pinterest Connect


The Pinterest Connect script is not supposed to run multiple times on a page, though this may not always cause a problem. However, it is recommended by Pinterest to never run it more than once and to run it below all Pinterest API calls.

Disable Pinterest Script

For this reason please make sure that only the last instance of Pinterest Connect on your page has the script enabled. All other instances should have the script disabled (the last customization option).

Image Hover Button

Note also that the Image Hover Button option will only work if the script is running, so if you wish to take advantage of this option on your page you must have it selected in a Pinterest Connect instance where the “Disable Script” option is not selected (by default it is not selected).

Pin It Buttons

Pinterest Pin It Buttons


Pinterest provides 4 images each with 2 different sizes.

Pin It Button Options

These buttons can be easily changed and the sizes can be easily selected.

Image Hover Button

Image Hover Buttons

Additional, yet identical, options appear for the Image Hover Buttons in case you would like to use different buttons.

Follow Link

The follow link creates a Pinterest URL option. This URL should be an individual Pinterest URL.


If you wish to change this:

Pinterest Edit Profile

Select the Edit Profile button in the top right of your personal Pinterest Profile Page (if you don’t have one you must create one).

Pinterest Edit Profile URL

In the middle is an option to change your Username, which also controls your personal URL address.

Embed Portfolio

Embedding a portfolio creates a Pinterest URL option. This URL should be an individual Pinterest URL.

To change this please reference the previous steps in the Follow Button tutorial directly above.

Embed Board

Embedding a board creates a Board URL option. This URL should be the same as the URL you find when entering any Pinterest Board.


Embed Individual Pin

Embedding an individual pin creates a Pin URL option. This URL should be the same as the URL you find when entering any individual Pinterest Pin.


Please follow & like us :)
Follow by Email


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


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

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 “”, your email would need to be something similar to “” 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:

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.


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

Screen Shot 2015-04-15 at 9.17.28 AM

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

Screen Shot 2015-04-15 at 9.18.55 AM


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.


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


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. 


Jon Doe

Please follow & like us :)
Follow by Email


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

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


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


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.



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

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.


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

Parallax Switch


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.


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

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


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

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

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.




Please follow & like us :)
Follow by Email

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:

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.


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


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.



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.


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