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.
In the options select “Share Button”.
Now get the URL of the Linkedin page that you want to link. Highlight it and copy it.
Take the link that you just copied and paste it into the Website URL option in the Linkedin stack.
In the options select “Follow Button”.
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.
Step 1: Drag & drop the Carousel Complete stack into the stacks editor.
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).
or or (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.
Step 1: Select the video option in the Carousel Complete Slide stack.
Step 2: Add the video’s URL to the “Video Url” field. The Carousel Complete Slide stack supports YouTube or Vimeo URLs.
Carousel Complete General Controls
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.
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.
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.
cleanTips is a great tool for displaying small notes, information, and links next to information that a visitor might have questions about.
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
When positioning to the left and right the ToolTip will appear outside of the box and can even bun unable to edit at times.
For this reason I created the option to turn off the actual position so that it’s easier to edit.
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).
Countdown Clock comes built as 5 functioning pieces that integrate with each other: Wrapper, Days, Hours, Minutes, and Seconds.
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.
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 :
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)
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”.
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
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.
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
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 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
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.
First drag and drop the Cinema Slider Stack into the Stacks editor. It should appear like the screenshot below.
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.
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
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.
Locate the video you want to use on YouTube.com 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=”)or found in the share tab for the video after the last slash
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
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.
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 slash
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.
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.
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 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.
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.
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.
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.
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).
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 provides 4 images each with 2 different sizes.
These buttons can be easily changed and the sizes can be easily selected.
Image Hover Button
Additional, yet identical, options appear for the Image Hover Buttons in case you would like to use different buttons.
The follow link creates a Pinterest URL option. This URL should be an individual Pinterest URL.
Here is a customer review/tutorial on Ice Box by William Winter
Typography is a stack suite comprised of 6 stacks
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.
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.
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.
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.
By selecting Responsive Font Sizes you are given 5 breakpoints, which by default will progress in the following order:
320px (iPhone portrait)
480px (iPhone 5 Landscape)
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.
The 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.
When selecting Google Web Fonts some basic instructions are given in the customization options.
Additional tips are given in the edit section in a green alert box. These give a couple recommendations of where to find your fonts.
Font Squirrel (for custom fonts, though you can use other sources as well)
To import a google web font I’ll give the following example, which is the basic process for importing all Google Web Fonts.
1. Find the font you want
2. Select the font with the Arrow button
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
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).
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.
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.
When you’re ready to proceed hit the “Webfont Generator button in the top menu.
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.
Unzip the folder and drag these files into the Resource folder in your RapidWeaver site.
You should see them appear like this in your Resources section.
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
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’
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.
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.
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.
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 “firstname.lastname@example.org” 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.
All of the stacks have a Title Setting. Whatever you put will display as the title and placeholder for the Form Element.
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.
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.
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>I need a auote</option>
Date Enable Time – This will allow users to select a time as well as date.
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.
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.
Here is a customer review/tutorial by William Winter
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.
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”
Gutter: The gutter has to option to turn off and on.
Gutter Width: Select the width of the gutter if you have the Gutter option turned on.
Bottom Margin: Input how much spacing you want bellow Responsive Grids.
Break Point 1: Input the break point for the first media query. “This is usually for tablets on portrait mode.”
Break Point 2: Insert the amount of pixels you want for the second break point. “This is typically for mobile phones.”
2 column , single column spacing , single column width , image options
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.
Step 2: Select whether you want to use pixels or percentage.
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.”
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.
Step 2: Input how large you want your stack to be.
Step 3: Select the position of the stack. “center is very useful”
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)
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)
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.
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.
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
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
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
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.
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.
# 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.
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 (#).
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.
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.
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.
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.
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.
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.
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.
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 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.
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).
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.
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.
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
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.
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.
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:
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.
Couldn’t be easier – just use RapidWeaver’s built-in link maker/breaker (middle icon makes, right button breaks).
Definition of Terms
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:
<span style="padding-left: 2px;">Your Text</span>
<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.
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.
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: