Expanse

Explanation

Expanse has two states. On load the Stack will be condensed into a “Card”. When a user clicks the open button it will animate open into an expanded state. By default the expanded state will fill the entire screen unless margin has been added in the settings panel. Set up is simple and you only need to add your desired content to the Stack. You can use the settings panel to customize the appearance of the Card when it is condensed and when it is expanded.

Settings

Animation

Animation – Choose from 11 different options that change how the Stack expands.

Speed – Adjust the speed of the expand animation in milliseconds.

Card Layout

Card Type – Choose from 3 options. “Template | Icon Button” is a preset layout with an image and an overlapping round button. “Hover & Click” will make the Stack expand when any part of the card has been clicked on. “Button” will add a button to the Stack that can be clicked to make it expand. These last 2 options do not have a template and will allow you to set up your own layout.

Card Width – Adjust the width of the Stack when it is condensed or in it’s “Card” state. If this width value is more than the value of it’s container, the Stack will scale it’s entire size to fit inside. This will cause the contents and text to shrink. If you do not want the contents to shrink, you will need to adjust this value so that it is equal to or less than the width of the container.

Card Height – Adjust the height of the Stack when it is condensed or in it’s “Card” state.

Margin T/B – Adjust the space below and above the Stack when it is condensed or in it’s “Card” state.

Card Styles

Header Image (“Template | Icon Button” Card Type) – Add an image to display at the top of the the template. The image will automatically scale to fill the entire height and width of the Header. The aspect ratio of this image is 21:9.

Card & Button Colors – BG = Background, Cls = Close

Button Icons (“Template | Icon Button” Card Type) – Choose from 4 different sets of expand and condense icons for the template’s round button.

Border Radius – Add/Adjust the round corners of the Card.

Shadow – Enable/Disable a subtle shadow around the Card.

Title Font – Optionally declare a custom font for the Header Titles in the Card and in the expanded content.

Text Font – Optionally declare a custom font for the text in the Card and in the expanded content.

Hover Animation – Choose from 3 different options that add hover animations to the entire Card. “Overlay & Message” will display a message when the Card is hovered. “Shadow” will add a shadow when the card is hovered. “Opacity” will make the card slightly transparent and opaque when hovered.

Truncate Type – Choose from 3 different options for how the Card handles overflowing content. “Text Ellipsis” will add “…” to any text that overflows at the bottom of the card. This option only works if the content at the bottom of the card is text. “Gradient Fade” will make the content fade out at the bottom of the card. “Clip” will not apply any effect and the content will simply not overflow past the bottom of the card.

Expanded Layout

Content Width – Adjust the width of the expanded content. This option will not effect the width of the stack when it is expanded but rather the content inside of the Stack.

Margin – This will add space around the edges of the expanded Stack equal to the value you set.

Padding T/B – Adjust the top and bottom padding of the expanded Stack’s content.

Padding L/R – Adjust the left and right padding of the expanded Stack’s content.

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

Author Card

Setup

After adding the Author Card Stack to the Stacks’ page, add the included Font-Awesome Stack to enable the icons. After this you can use the Settings Panel to customize your card and select a theme.

Settings Panel

Author Settings

Profile Image – Add your image here. Profile images should be square. Non-square images will be cropped and centered.

Name – Add a name or business name.

Title – Add an occupation or subtitle.

Hover Greeting – This greeting will display in a white chat bubble above the profile image when the card is hovered by a mouse. Keep this value short in order to prevent the chat bubble from covering too much of the photo.

Enable Hover Greeting – Disable this option to remove the “Hover Greeting”.

General Settings

Theme – Choose from 4 card layout themes.

Width – This will adjust the width of the card (The height is determined by the content you add to the card). If the container width is less than the width of the card, the card will adjust to fit inside the container. On mobile screens the card will automatically display in “Vertical Mode”.

Vertical Mode – Optionally display the card in a vertical orientation on all screen sizes.

Name Font – Optionally declare a custom font that will only effect the Name text.

Text Font – Optionally declare a custom font that will effect all text excluding the Name text.

Round Corners – Adjust the radius of the card corners.

Shadow – Select from 6 predefined shadow styles.

Show Content – Show/Hide the “Drop Stacks Here” section of the card.

Show List Items – Show/Hide the “List Item” section of the card (found directly below the “Drop Stacks Here” section).

Show Footer – Show/Hide the footer that contains the social media icons.

Theme Styles

Round Profile Image – Enable/disable a round profile image. This option is only available in the “Standard” and “Solid” themes.

Text – Adjust the colors of the

1: Name

2: Title

3: Content in the “Drop Stacks Here” section and “List Item” section

4: All the links contained on the card.

Background – Adjust the colors of the

1: Main background (Except the “Solid” theme)

2: Footer gradient left (Background gradient left of the “Solid” theme)

3: Footer gradient right (Background gradient right of the “Solid” theme)

4: Dividers found above the “Drop Stacks Here” section and “List Item” section

 

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

Pagelit

Setup

Drag the Pagelit Stack into the editor.

Pagelit starts with a single page, clicking the blue “Add Page Button” will add additional pages.

The top Page will be used as the Book or Magazine cover and the last page at the bottom will be used as the back cover. The cover pages will be highlighted with a blue rectangle and will be labeled “Front Cover” or “Back Cover” in edit mode.

Each Page Stack has a front and back represented by two “Drop Stacks here” sections. The front section (located at the top of each individual Page Stack) 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 (Located at the bottom of each individual Page Stack). Inside of each page you can drag any Stack content you wish, including images, video, text, and even other stacks.

Click on individual Page Stacks to reveal background options in the “Settings Panel”. Here you can set the color of the background or set an image to display as the content. You can also use “Warehoused” images by enabling  “Use URLs”.

If you are creating a book or magazine made from images you can simply drag and drop the images into each Page Stack’s Settings Panel “Front Image” or “Back Image” section.

Additional customization and settings will be explained in the Settings Panel Breakdown below.

Pagelit Settings Panel Breakdown

Type – Choose between 3 different modes:

  • Book – Soft Pages will make the first and last pages animate as a hard cover.
  • Book – Stiff Pages will make all pages animate as solid and stiff card stock.
  • Magazine will make all pages animate as paper. This option removes the “Cover Size +” and “Page Rounding” settings.

Page Width – Adjust the width of the pages. The book will be double this value when opened. If the container is not wide enough to fit Pagelit while it is open, it will scale to fill the available space. This will also cause the content to shrink as if it were an image.

Page Height – Adjust the height of the pages. The height will also scale if the container is not wide enough to fit Pagelit while it is open.

Margin – Adjust the space at the top and bottom of Pagelit.

Cover Size – Adjust how much larger the cover pages are in relation to the inner pages. This setting is disabled if the “Type” is set to Magazine.

Navigation Type – Choose between 3 different modes:

  • Page Click will allow users to navigate forward and backward by clicking or touching the cover,  left page, or right page. Users will not be able to interact with the content inside the pages if this mode is enabled.
  • Buttons will add navigation buttons below Pagelit that will allow users to navigate forward or backwards. This option is best if you want users to interact with the content inside the pages.
  • Page Click and Buttons will add navigation buttons below Pagelit and allow users to click or touch to navigate.

Page Rounding – Adjust the corner radius of the book edges. This setting is disabled if the “Type” is set to Magazine.

Page Padding – Adjust the padding around the edges of each page.

Page Shading – Enable/Disable inner page shading at the spine of the book or magazine.

Enable Page Numbers – Enable/Disable page numbers that display at the bottom of each page.

Font Size – Adjust the size of the enabled page numbers.

Speed – Adjust the speed (in milliseconds) of the page turn animation. This will also adjust the speed of the “Pop Out” animation when enabled.

Quality– Choose from three modes:

  • Automatic will make Pagelit automatically adjust the detail of the animation depending on the user’s device pixel density or browser type. This is the recommended setting.
  • Best Performance will always use the lowest level of detail for the animation. This prioritizes the animation to be a smooth as possible.
  • Best Quality will always use the highest level of detail for the animation. This setting is only recommended if your page dimensions are less than 400 (page width) by 600 (page height) as larger books or magazines can be quite demanding on high dpi (IE Retina) screens and some browsers.

Pop Out – Enable/Disable a pop out animation that will remove Pagelit from it’s container and place it in a full screen overlay. If Pagelit has been scaled to fit it’s container, it will grow to the set height once it leaves the container.

Loader Size – Adjust the height of open space shown while the book is loading.

Page Settings Panel Breakdown

Front Image & Back Image – Select an image to display stretched out over the entire page. The image will match the dimensions you set in Pagelit’s Settings panel.

Use URLs – Enable/Disable input boxes that allow you to declare the location of a warehoused image.

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

Notice

Show Settings

The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.

Show Type

The show type option allows you to select how and when your Notice notification will appear on the page. There are four options to choose from:

– Open on Start

– Open on Timer

– Open on Scroll to

– Open on Notice Trigger Only

Each type will be explained below:

Open on Start

The Open on Start type simply makes the notification appear as soon as the page finishes loading. This is the default type and is useful when you want your users to see your notification right away.

Open on Timer

The Open on Timer type allows you to show your notification after a certain amount of time has passed. Once you select this option you will see that an input field appears, for you to input the amount of time to wait before the notification is show. The timer works in Milliseconds, meaning 1000ms = 1s.

Open on Scroll to

The Open on Scroll to type will show the notification as soon as the user scrolls to the position where the notification is placed on your stacks page. No need to do anything special here, just place the notification on the stacks page where you want it to appear, and set it to the Open on Scroll to type.

Open on Notice Trigger Only

The Notice Stack comes with a sub-stack called the Notice Trigger, which allows you to trigger your notification when some other content on your page is clicked. It’s a simpler container that you can use to wrap content. It works with buttons, images, text, anything you can think of.

The Open on Notice Trigger Only type is useful when you do not want your Notice notification to appear automatically, but you only want it to appear after a trigger is clicked. In these situations, select this option.

You can read more about the Notice Trigger stack at the very bottom of the tutorial page.

Show Animation

The show animation list is simply a list full of awesome animations used for displaying your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.

Hide Settings

Hide Settings

The Show Settings section is where you can control when your notification will appear on the page, as well as select the animation that you want to use.

Hide Type

The hide type option allows you to select how and when your Notice notification will disappear from the page. There are only two options to choose from:

– Hide Manually

– Hide on Timer

Each type will be explained below:

Hide Manually

By default the “Hide Manually” type is selected. This simply means that the notification will remain open until the user manually clicks the Close Button (X) at the top, or the “Close” action at the bottom of the notification.

Hide on Timer

The Hide on Timer option allows you to hide your notification after a certain amount of time has passed. The timer works in Milliseconds, meaning 1000ms = 1s.

Hide Animation

The hide animation list is simply a list full of awesome animations used for hiding your Notice notification!!! There is a huge list and they are all really fun and entertaining. Play around and find one that you like.

Main Notification

Main Notification Settings

The Main Notification Settings section is where you will set up the majority of layout, content, and styling options for your notification.

Content Type

The Notice stack allows you to choose from two content types:

– Text / Icons (Built in content with controls)

– Stacks (Add your own content entirely)

Text / Icons

By default the Notice stack content is set to text / icon. You will find as soon as you open the stack that you can edit the notification text, and you can add an Icon using the settings.

We’ve included a lot of settings for customizing the Text / Icon for your notification already. You can create a wide variety of notifications using the built in content provided.

Stacks

If text and and Icon are simply not enough for you, we’ve added the ability to add stacks content to the notification instead. You can literally create anything you can imagine with stacks content. Just like our example page, you will see we’ve made some very creative notifications.

Fill Mode

The fill mode option will allow you to select the width of your Notification. It can be full width, a fixed pixel width, or a percentage width. All notifications will scale to fit mobile devices, therefore this width is really the “Maximum” width of the notification.

Z-Index

Yes, we have allowed full range of the z-index for the Notice stack. No more z-index conflicts, if you need to raise or lower the z-index of your stack, please do so.

The z-index controls the layer on which the notification appears, therefore if your notification is appears below some content that it should be on-top of, then you should raise the z-index, and vise-versa.

Position Vert (vertical positioning)

The Position Vert option allows you to choose how your Notification will be aligned vertically to the page. You can choose to align the notification to the:

– Top of the page

– Center of the page

– Bottom of the page

NOTE: If you choose to align your notification to the vertical center of the page, animations will not work. : ( Unfortunately this is just the nature of web development at the moment. No need to worry though, we were able to create a default fade-in/fade-out effect for vertically centered notifications. That way, it isn’t completely boring. : )

If you select Top, or Bottom for the vertical positioning, you will find that an input box appears that will allow you to set the offset from the top/bottom of the page respectively.

Position Horiz (horizontal positioning)

The Position Horiz option allows you to choose how your Notification will be aligned horizontall to the page. You can choose to align the notification to the:

– Left of the page

– Center of the page

– Right of the page

Side Margin

The Side Margin option includes two input fields; one for setting the left margin of your notification, and one for setting the right margin.

For notifications that are flush with the edge of the page, leave these options set to 0.

For notifications that you would like to be spaced out from the sides of the page, increase these values accordingly.

Padding & Radius

The padding option simply allows you to set the inner padding of the notification.

The radius option allows you to control the roundness of your notifications corners.

Content Width

The content width option allows you to choose the maximum width of your notifications inner content.

In some cases you will not want your inner text to space the entire width of the notification, in these cases you can decrease the size of the inner content.

By default inner content will not be longer than 960px, but you can change this to whatever you’d like.

Background

The background option allows you to set a custom background for your notification, you can choose between:

– None (no background)

– Solid Color (a single color)

– Gradient (a gradient between two colors, including the direction)

– Image (an image of your choice, the sizing is up to you)

Border

The border option is straight-forward and simply allows you to add a border to your notification, you can control the weight, color, and style of the border.

Shadow

The shadow option allows you to add a box shadow to your notification. You can choose the color and other basic box-shadow properties such as x and y offsets, blur, and spread distance.

Main Notification > Text

Main Notification > Text

The Main Notification > Text section is where you will find basic settings to control text properties such as fonts, font-sizes, line-heights, text color, text alignment, etc.

These options are are fairly straightforward, therefore we won’t explain all of them. The only important thing that you need to know is how to add custom fonts, which you can read below.

Text Font

We’ve included a bunch of preset fonts with Notice, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Main Notification > Icon

Main Notification > Icon

Here you will find the ability to add custom icons, as well as edit the icon font, icon positioning, size, coloring etc.

Notification Icon (checkbox)

By default an icon is not used with the Notice stack, though adding one is really easy! Simply check this option and you will see that an icon appears in your notification. : )

Icon Font

We’ve included three of the major icon fonts on the web: Google Material Icons, Font-Awesome Icons, and Ionicons.

Icon Font

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Icon Position

With the Notice stack, you can choose to position your icon in two ways:

– Side (Left or Right)

– Top (with Left, Right, Center alignment options)

Side

If you select Side, the default option, you will see that another dropdown appears allowing you to align the icon to the Left or to the right of your notification.

Top

If you select Top, the default option, you will see that another dropdown appears allowing you to align the icon to the Left, to the Center, or to the Right of the notification.

Icon Spacing

We’ve including the ability to add custom spacing around your icon, this is because all icons are different, and it allows you to create a wide variety of styles!

You can control the Top, Bottom, Left, and Right spacing around your icon.

Icon Color

Here you can simply set the color of your notifications icon. Opacity is also enabled which is great for creating flat style design colors.

Main Notification > Close Button

Main Notification > Close Button

The close button refers to the (X) in the top right hand corner of the notification. This is a standard practice for closing popups on the web. There is only and only option for the close button, and that is choosing whether to use it or not. Read more below.

Show Top Close Button

This checkbox allows you to choose whether or not you want to use the top close button (X). By default the close button will appear, and it will match the color of your notifications text.

Because we’ve also included custom action buttons, including a close action, we’ve included the ability to hide the top close button (X), just in case. That way you don’t have to have 2 close buttons in your notification. This way, you can mix and match.

Main Notification > Action Buttons

Main Notification > Action Buttons

With Notice, we have added an awesome feature creating your own action button to your notification! This allows your user to take action after reading the notification! You can link to a separate page, or a section on the same page with a custom button! You can customize the colors, text content, etc. Read more below…

Show Action Button (checkbox)

By default, the Notice stack does not use Action Buttons, if you want to add the action buttons to your notification, simply check this option, and they will magically appear ^_-.

After they appear, you will find that if you double click on the right-hand button that reads “Custom Action Text”, you can customize it to say anything that you’d like.

Link

The link option in this section is the url where the user will be directed to after clicking on the “Custom” action button.

Button Height

Here you can simply set the size of your action buttons. To keep things simple and clean, all you have to do is set the height, and all of the spacing, alignment, responsiveness, etc. will be taken care of! Great huh?! : )

Button Border

The Action buttons have a subtle border that separates them from the notification, you can customize the color and opacity of this border using this color picker.

Custom Action Button Colors (checkbox)

By default Action Buttons will have the same background and text color as the rest of your notification. This makes it easy for creating quick notifications.

That being said, in some cases you may want to set a custom background and text color for your action buttons. If you want to do so, simply check this option, and more color pickers will appear.

You can set the general color of both action buttons, and then you can also individually set the hover background/text of the Close action and Custom action individually.

Advanced Settings

Advanced Settings

Oh boy, it looks like the basic functionally just wasn’t enough for you… That’s okay, hopefully these advanced features will suit your needs.

Trigger ID

We’ve included a simply trigger stack with Notice called Notice Trigger. This stack can be used to wrap content on your page, so that when the user clicks on that content, your Notice notification will appear! Awesome sauce… ^.^

In the advanced settings you will find an input called “Trigger ID”. This is where you can give your notification a custom ID that you can use to trigger with a Notice Trigger.

When you drag a Notice Trigger stack onto the page, you will find that there is an ID field for connecting your trigger to a particular Notice notification. Simply type in the same ID that you used with your notification, and the two will be connected!!!!!

Maximum Height

Responsiveness on the web is hard… There is such a wide variety of content out there, that it is nearly impossible to predict what our users will use.

By default all notifications will stop growing at 70% of the browser windows height, and the remaining content will be scrollable.

There may be some special cases where you want to increase or decrease this height, and thus we’ve included this as an advanced feature. Although, 70% is a very standard height that will fit all devices.

Activate Cookies

The Activate Cookies option can be used for only showing your Notice notification to a user if they haven’t already seen it. This option might be useful for preventing your users from getting annoyed if they often visit your website.

If you check this option, it will create a cookie that detects whether or not the notification has already been seen before, if it has been seen, then the notification will no longer appear.

If you uncheck this option, the notification will return back to its default show behavior.

Position Absolute

This feature is mainly for development purposes, but it is used to set notifications absolutely positioned to their container, rather than the fixed to the page itself. We can’t see any specific reason for using this option, but if you find a use for it, let us know. ^_-

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

HTML Body

Setup

Note: This tutorial assumes that you a familiar with HTML, CSS, and how to use RapidWeaver Stacks.

1 – To get started, you will need to set the RapidWeaver project’s theme to “HTML Body Blank”. This theme was specifically made for use with the HTML Body Stack and will give you access to the <head> and <body> elements. This theme also serves as a truly blank canvas to start your projects. If you want to use the HTML Body Stack inside of a different theme you can skip this step, however you will not have access to the <head> and <body> elements if you do so.

2 – Drag and drop the HTML Body Stack into the editor. The “Mode” option found in the settings panel is set to “HTML Body Blank Theme” by default. If you are using the Stack inside of another theme change this value to “Other 3rd Party Theme”.

This Stack is separated into 3 main sections: “<head>”, “<body>”, and “before </body>”. Each section has a blue button to add their respective elements.

3 – Add all of your project files (css, js, images) to your Resources section found in the Source List to the left of the RapidWeaver window.

4 – Now we can use the “<head>” and “before </body>” sections to create links to those files. Click the blue button in either section to begin adding a link. Select the element that pops up and in the settings panel, set the “Element Type” to either “Link” or “Script”.

Note: This Stack includes a few CDN (content delivery network) hosted libraries that you can add quickly by changing the “Resource” value. You can also add IE conditional comments around the specific links if you need to target specific old versions of Internet Explorer with the “IE Conditional” option.

5 –  Leave the “Resource” option set to “Custom” and click on the “Set Link” Button. In the link dialog window that opens up locate the file you wish to link to and click “Set Link”.

6 – Repeat Step 5 until you have linked all of your necessary files.

Note: The “<head>” and “Before </body>” sections have editable areas below the blue buttons. You can use these areas to type or paste any HTML, CSS, or Javascript you need added to your project.

7 –  To begin creating a project, just click the blue button in the “<body>” section of the Stack. This will automatically add a new HTML Element Stack. You can also manually add HTML Element Stacks by dragging them in from the Stacks’ Library.

8 – Each HTML Element Stack has it’s own settings panel where you can change the Element Tag, add classes, or add custom Attributes (IE you can add an ID by typing in id=“someID” into the “Attributes” field).

9 – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

This concludes all you need to know to get started on your project. For a further breakdown on what each of the settings do see the “Settings Panel” section below.

Settings Panel

HTML Body

Mode – “HTML Body Blank Theme” must be used when the RapidWeaver project’s theme is set to “HTML Body Blank”. This will give you full access to the “<head>” and “<body>” elements. If you are using the Stack simply as an HTML section inside of another theme set the value to “Other 3rd Party Theme”.

Body Attributes – You can optionally add custom attributes to the <body> tag. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

Editor Theme – By default, the HTML Body Stack shows in the Stacks editor as 3 labeled and separate tab sections. You can change this value to either “Dark HTML” or “Light HTML” to make the editor have more of an HTML text editor style of appearance.

Font Size – Adjust this value to increase or decrease the size of the HTML tag labels in edit mode.

HTML Resource

Element Type – Choose “Link” if you would like to create Stylesheet links and “Script” if you wish to link to javascript files. There is also and option for creating custom Meta tags.

Resource – Leave this option on “Custom” if you need to link to a resource found in your RapidWeaver Resources section. You can also choose from any of the included CDN (content delivery network) hosted libraries instead.

Custom –  This is were you can add the link to the resource. Note: this option is ignored if you have chosen a CDN library in the “Resource” option.

IE Conditional – Though older versions of Internet Explorer are being fazed out, you can use this option to add a conditional comment that will allow the linked resource to only load in specific older versions of Internet Explorer.

HTML Element

Type – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

Element Tag – Accepts any HTML tag value.

Classes – You can add multiple classes each should be separated by a space. These classes will also show up in the editor to help you locate and identify sections of your code. When the element is selected, the classes will also show near the </> close tag.

Href – Only visible when the “Element Tag” is set to “a”. Allows you to create a link using the RapidWeaver link dialog window.

Src – Only visible when the “Element Tag” is set to “img”. Allows you to select an image using the RapidWeaver link dialog window.

Alt  – Only visible when the “Element Tag” is set to “img”. Allows you to quickly edit the alt value for an image.

Attributes – Add custom attributes to the element. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

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

Listify


Listify Tutorial

Introduction

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

Listify Stack

The Listify Stack is the main stack for creating lists. Simply drag this stack onto a stacks page, and then add items by clicking on the add ( + ) button.

You will find instructions for all of the Listify Stacks’ settings below:

List
List Items
List Items > Text
List Items > Icons

List Fill Mode

There are two options for the list fill mode, “Fill” and “Pixel Width”.

The fill option will make a Listify list expand to fill the width of it’s container.

Pixel Width allows you to set a specific with for your list. Keep in mind that lists with fixed pixel widths are not be responsive.

List Radius

The list radius option is simply for creating a list with rounded corners. The higher the radius, the rounder the corners will be.

List Padding

List padding refers to the space between the edge of a list and it’s inner content. If you want there to be some extra space around the content, increasing the list padding is the way to do so.

List Margin

List margin refers to the space around the list itself. If you need to add some extra space on the outside of a list, do so with the list margin.

List Background

You will find that there are 4 background options for each list, “None”, “Color”, “Gradient”, and “Image”. If you select one of these options you will see that a specific set of controls will appear for the appropriate option.

List Borders

You can add borders to your list by selecting the “ON” option for the List Border. After doing so, you will find controls for setting the border width, style, and color.

List Shadow

Similar to the list border, you can add a shadow to your list by selecting the “ON” option for the List Shadow. After doing so, you will find controls for setting the shadow color and other properties.

NOTE: The “List Items (Shared Styles)” options are styles that can be used to affect all of the items in your list. This is great for creating basic lists that share similar properties like colors, fonts, sizes, etc.

If you want to style items individually, click on the “List Item” substack, and check the “override shared styles” option. You can read more about this under the “Listify Item” stack section.

Hide All Text

Checking this option will hide the text for all of the items in your list. This is a rare situation, but it can be used when you want to create a list of only icons.

Hide All Icons

Checking this option will hide the icon for all of the items in your list. This is useful when you want to create a list with no icons at all, and only text.

Indent Direction

This is option is specifically for multi-level lists. It controls the direction in which the sub-level items will be indented. You can choose to indent sub-level items from the “Left” or from the “Right”

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Indentation

This option can be used to set a specific pixel indentation for sub-level items. If you set the indentation to “15px” then all sub-level items will be pushed in-wards by 15px.

Item Spacing

Item Spacing is the space inbetween each list item. Specifically it is the bottom margin of each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text(Shared Styles)” options are styles that can be used to affect the text of all items in your list. If you want to set specific text styling for an individual item, click on the item itself, and change it under the “List Item > Text (Individual) settings.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Items > Icons (Shared Styles)” options are styles that can be used to affect the Icons for all items in your list. If you want to set specific icon styling for an individual item, click on the item itself, and change it under the “List Item > Icon (Individual) settings.

In addition, the actual Icon Font and Icon itself cannot be set globally. This is due to limitations in the stacks interface. The Icon Font and Icon Code must be set individually for each Item. If you want to create a list of items that share a similar icon, such as a heart or a star (like a bullet point), then we recommend creating one item, and then copying & pasting it for the rest of the items.

All other styles for icons such as color, padding, size, etc. can be set globally. : )

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Item Stack

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

General
List Item
List Item > Text
List Item > Icon

NOTE: By default all List Items will retain the styles set on the Listify Stack itself. If you want to style an individual item separate from all of the other items, you must check the “Override Shared Styles” option first.

Once you check this option, you will find that you can style an item individually from all others.

Link

The link option is simply for setting a link for a list item. It is not necessary to set a link, but if you want to link an item to another page or resource, then you can do so.

Item Level

The item level option is used for creating multi-level lists. You can set the level of an item to push it inwards by one sub level.

For example, you will see that there are 11 item level options.

– Top

– Sub Level 1

– Sub Level 2

– Sub Level 3

– Sub Level 4

– Sub Level 5

– Sub Level 6

– Sub Level 7

– Sub Level 8

– Sub Level 9

– Sub Level 10

By default, all items are set to top level, Each numbered level, is one level deeper than the rest. For example Sub Level 1 items will be below Top level items, and Sub Level 2 items will be below Sub Level 1 items.

The order of items is VERY IMPORTANT. If you want to create a list with multiple levels, each level must follow the order above, like so:

– TOP

– Sub Level 1

– Sub Level 1

– Sub Level 1

– Sub Level 2

– Sub Level 2

– Sub Level 2

Override Shared Styles

This option is crucial for setting specific styles on an individual list item. If you want to style an individual item differently than the rest, you must check this option first. If not, not of the following styles will apply.

Custom Stack Content

This option can be used to remove both the icon and text from a list item, and replace the inner content of the item with a section for adding custom stacks! It is great for adding things like images or anything else. We specifically use this option for adding images to our pricing table examples.

Hide Text

This checkbox can be used to remove the text content of a list item. It is useful when you want to have an item with only an icon.

Hide Icon

This checkbox can be used to remove the icon from of a list item. It is great when you want to have an item with only text.

List Item Fill Mode

There are 3 fill options for each list item. “Fill”, “Pixel”, and “Percentage”.

Fill will make the item fit the width of it’s parent list.

Pixel will set a fixed with for the item (keep in mind that this is not responsive)

Percentage will make the list item fill a certain percentage of it’s parent list. e.g. an item with the fill set to 50% will fill half the width of it’s parent list.

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Spacing

Item Spacing is the space inbetween each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text (Individual)” options are styles that can affect the text of an individual item only, making it different from the rest.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Item > Icon (Individual)” options are styles that affect the individually selected item only.

Here can you can set the Icon Font and Icon Code for the List Item.

Icon Font

You can select from 3 different Icon Fonts. Google Material Icons, Fontawesome Icons, and Ionicons.

Icon Code

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Group Stack

The Listify Group Stack was created specifically for making groups of list such as pricing tables. It’s extremely easy to use, as all you really need to do is drag multiple lists into a Listify Group.

There is no limit to how many lists you can add to a group, though we recommend no more than 3 or 4.

General

List Alignment

The list alignment option controls how child lists will be vertically aligned. If you want the lists to be aligned all to the top, select “Top”, if you want them to be vertically aligned to the center, select “Center”.

By default, Lists will be aligned to the center.

Wrap Lists

The Listify Group stacks will automatically wrap lists to expand the full width of the page for mobile devices. You can choose the breaking point at which you want your lists to wrap.

There are 3 options, Mobile, Tablet, or Desktop.



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

Side Menu

Side Menu Tutorial

Description

A beautifully customizable dropdown menu that slides out from either side of the page, triggered by a menu toggle. Use Rapidweaver’s built in menu, or create your own custom menus using Stacks, Markdown, or HTML. Get creative with a wide variety of styling, sizing, and layout options.


Tutorial Overview

  • Getting Started
  • Basic Setup
  • Settings
    • General
    • Menu
    • Dropdown Icons
    • Top Level Menu Items
    • Sub Level Menu Items
    • Menu Toggle
    • Advanced
    • Experimental
  • Creating Menus With Stacks Controls
  • Adding List Icons & Subtitles
  • Extra Menu Toggle Stack (included)


Getting Started

Let’s get started using the Side Menu.

Here you’ll learn how to get the menu up-and-running on your web-page.

Don’t worry, it’s suuuper easy! (Drag and drop)

( p.s. if you already now how to download and install, just skip to step 3 )

Step 1

Purchase the Side Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the side_menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called side_menu.stack, double-click on this file to install the stack into Rapidweaver.

Step 3

Now all you need to do is search for the stack in the Stack Library, e.g. “Side Menu” and then Drag and Drop it onto your page

That’s it!

We’ve included great presets that allow your menu to work right away, as soon as you place it on the page.



Settings

Here we’ll go over all of the settings included with the Side Menu.

General Settings

  • Options
    • Unique Menu ID
    • Use Custom List

Unique Menu ID ( INPUT )

The Unique Menu ID will provide your menu with a specific ID that will help distinguish if from other Side Menu’s on the page.

It can also be used to connect your Side Menu to extra menu toggles using the included Side Menu Extra Toggle stack.

NOTE: If you only plan on using one Side Menu on your page, you don’t need to do anything with this value. By default the Side Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

By default the Side Menu stack will use your Rapidweaver site menu.

The Custom List option can be used if you do not want to use your Rapidweaver menu, and instead want to create your own custom dropdown menu, with your own links.

If you check this option, you will see a dropdown list that will allow you to choose between:

  • Stacks, Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Using our stacks controls is the quickest and easiest way to create great looking menus. Markdown is also quick and easy, finally there is HTML, which can be used to create more advanced menus.

Don’t know anything about HTML or Markdown???

Not to worry, If you check the option, you will see that we’ve also provided a default menu example in the input field. Just copy the format and you’ll be good to go! ^^


  • Options
    • Font Family
    • Text Alignment
    • Fill Mode
    • Padding
    • Background Opacity
    • Background
    • Header Section
    • Footer Section

Font family ( SELECT MENU )

Simply allows you to choose a font for your menu from a list of included presets. We’ve chosen some of the top fonts on the web.

Text Alignment ( SELECT MENU )

With the Side Menu, you can choose to align the menu item text to the left, right, or center. To be honest, left aligned menus are the most readable for users and we recommend sticking to this convection. That being said, we’ve provided different text alignment options for your convenience.

Fill Mode ( SELECT MENU )

This option allows you to choose the maximum width of your menu.

You can choose to use a Pixel value or a Percentage based value.

In addition, you will find that you can set three different widths for your menu, one for Mobile, one for Tablets and one for Desktops. This allows you to make sure that you menu fits just right on all devices. Both PIxel and Percentage widths provide these three widths.

Padding ( SELECT MENU )

Here you can set the padding of your Side Menu. You can set the top, bottom, left, and *right padding.

Set the left and right padding to 0 when you want the inner menu items to be flush with the edge.

Background Opacity ( SLIDER )

Here you can set the opacity of your Side Menu’s background. Set it to 1.0 to make the menu fully opaque, or set it to a lower value to make it transparent.

By Default, it is set to 0.8 (slightly transparent)

Background ( SELECT MENU )

This is where you can set the background of your menu. You can choose between

  • None
  • Solid Color
  • Gradient
  • Image

The Options are fairly standard and easy to setup.

One thing to note is that the IMAGE BACKGROUND has a special image cover, for images that might make text harder to read.

This image cover is simply a color option with the ability to change the opacity. Increase or decrease the opacity depending on your image, and how visible your menu text is.

Header & Footer Sections ( CHECKBOX )

At the end of the Menu settings, you will see two checkboxes labeled Header section and Footer Section. Checking either of these options will create a section in RapidWeaver that allows you to add extra content to the menu. The header section will be placed above the menu, below the close icon. The footer section will be placed right below the menu.


  • Options
    • Icon Size
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Icon Size

This is a simple input field that will allow you to set the size of your dropdown icons. Both the open and close icon sizes will be equal whatever value you set.

Open & Close Icons

You can choose an icon for your dropdown Open state, and Close state.

Open is the default state, You should choose icons that tell the user to click on the link to open a dropdown.

Close is the icon that will show when a dropdown link is clicked. This icon should tell the user that he/she can close the menu.

You can select which icon font you would like to use for each icon. We’ve included icons from Google Material Icons, Fontawesome, and Iconicons.

You also need to type in the proper Icon code for the icont you want to use.

NOTE: Due to the way each icon font works, there is a different icon code format depending on which font you use.

Google Material Icon Format: account_circle (lowercase, use underscores _ to separate words)

See all Material Icons here: Offical Material Icon site

Fontawesome Icon Format: arrow-circle-down (lowercase, use dashes – to separate words)

No need to add “fa fa-“, just type in the specific icon code. We handle the rest.

See all Fontawesome Icons here: Offical Fontawesome site

Ionicon Icon Format: ion-arrow-down-b (lowercase, use dashes – to separate words)

With Ionicons, you must include the “ion-” before the code. Their site is set up this way, so you can easily copy and paste the codes directly.

See all Ionic Icons here: Offical Ionicon site

Rotate

You can use the rotation option to make your icon rotate once a dropdown list is opened.

This is handy for rotating plus symbols ( + ) into ( x ) symbols, or rotating down-arrows into up-arrows.

To achieve such an affect, set both the open AND close icons to the same value, e.g. a plus ( + ) or a down-arrow, and then set the rotate to something like 45 or 180(degrees).

( + ) to ( x ) = 45deg

( keyboard_arrow_down ) to ( keyboard_arrow_up ) = 180deg


Top Level Menu Item Settings

  • Options
    • Font size
    • Subtitle Size
    • Padding
    • Vertical Spacing
    • Radius
    • Text (Color)
    • Subtitle (Color)
    • Background
    • Hover Text (Color)
    • Hover Subtitle (Color)
    • Hover Background

These options are very straight forward. I recommend playing around with them to see what happens. If you change them, the menu preview with update too, so you can easily tweak your menu and see the changes right away!

One thing to note is the Vertical Spacing.

This input will determine the amount of vertical space between all menu items in the list.


Sub Level Menu Item Settings

  • Options
    • Font size
    • Subtitle Size
    • Indent with (Sub level indentation – see below)
    • Use Top Level Color Styles (Checkbox)
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are nearly the same as the top level items, with the exception of padding, vertical spacing, and radius. These styles are shared with the top level menu items.

Note: By default sub level menu items with share there color values (text color, background, etc.) with top level menu items

If you want to use custom color styles for sub level items, uncheck the Use Top Level Color Styles checkbox.

Indentation (SELECT MENU)

This option allows you to choose how sub level items will be indented.

Sub level items need to be indented for a user to know that they are below a top level item. There are two types of indentation, Margin, and Padding.

By default, Side Menu sub level items are indented with Margin. This means that Sub Level Items, will have a smaller width that top level items, and they will be pushed inwards.

Choosing the Padding option makes it so that all items (Both top level and sub level) are the same with, but Sub Level items will be pushed inwards with padding. This great for creating menus that are flush to the edge because the shared width makes the menu look clean, but the padded indentation of the sub level items still allows the user to distinguish sub level items.

It might sound a bit complex, but not to worry, try changing the option and see what happens. It’s really easy to understand once you see it in action.



  • Options
    • Show Toggle Text (Checkbox)
    • Show Toggle Icon (Checkbox)
    • Text Font
    • Text (input)
    • Text Font Size
    • Icon Font
    • Icon Code (input)
    • Icon Size
    • Fill Mode
    • Position
    • Vertical Align (Fixed Menus only)
    • Horizontal Align
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background
    • Border
    • shadow

For the most part, the Menu Toggle Settings are straightforward and easy to use. Play around with them and checkout the preview in settings to see the changes directly.

There are a just few options that are important to understand:

Show Toggle Text ( CHECKBOX )

Unchecking this option will hide the text of the toggle button, leaving only the icon

Show Toggle ICON ( CHECKBOX )

Unchecking this option will hide the icon of the toggle button, leaving only the text

Position ( SELECT MENU )

There are two positioning options to choose from with the Side Menu Toggle

Inline or Fixed

Fixed:

By default, the toggle is fixed, meaning it scrolls with the page.

When this option is selected, you can choose the Vertical (top, bottom) and Horizontal (left, right, center) alignment.

Use the margin settings to adjust the spacing of your toggle when fixed.

Inline:

If you select the inline option, your menu will stay inline with the content. You can still set the Horizontal alignment (left, right, center) to make your toggle fit just right.


Close Button

  • Options
    • Use Custom Close Button
    • Size
    • Icon Font
    • Icon Code (input)
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Border

With the Side Menu, we’ve provide the ability to use a custom close button! By default, the close button will be a simple X, the most common close icon on the web. If you want to create your own close button, using an arrow arrow_back or something else, you can use the Use custom close icon option. See more below.

Use Custom Close Button (CHECKBOX)

If you check this option, the default Close Icon will be replaced with a new one that you can fully customize. underneath this checkbox you will see a variety of styling options for the close icon including icon options, color options, backgrounds, radius, sizing, margin, padding, and more.

The icon for the close icon follows the same standards as the icons all throughout the Side Menu. Be sure to use the proper icon code for the icon font that you choose. Other than that cutsomizng the close icon is really easy.


Responsive

You will find a Responsive section in the settings panel, where you will have the option to hide the Side Menu at different screen sizes. Just like typical RapidWeaver stacks, you can choose to hide the stack on:

  • Mobile
  • Tablet
  • Desktop

You can select multiple options at the same time, so choose freely when you want the menu to display.


Advanced Settings

  • Options
    • Show Data ID Info
    • Make Parent Items Clickable

Show Data ID info

As a really cool bonus feature, you can use ANY clickable html element to open up your Side Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="side_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Side Menu’s Unique ID value.

Then, just add the data attribute to a clickable HTML element, such as a link, button, etc.

here are some examples

<a href="#" data-id="side_menu_UNIQUE_MENU_ID"> Open my menu </a>

<button data-id="side_menu_UNIQUE_MENU_ID"> Open my menu </button>

If you check “Show data ID info” option, a snippet of your exact data-id code (including your unique ID) will show at the top of the stack in edit mode. This makes it really easy for copying and pasting the code for use.

You’re welcome. ^_-

Make Parent Items Clickable

By default, parent item will not direct the user to a link, but instead open the dropdown to view sub level items.

In some cases, you might need parent items to link to pages as well. For these cases you can use the Make Parent Items Clickable option, under the Advanced Section

Simply check the option, and you will see that parent items will now link to pages, and the dropdown menu can be opened by clicking the icon button on the right.



Experimental Settings

  • Options
    • Replace Theme Menu

Due to popular request, we’ve developed an experimental feature that is meant to hide your themes default menu, to use the Side Menu instead!

Simply check the “Replace Theme Menu” option, and the magic will take place.

NOTE: This feature is experimental, and may not work with all themes.





Making Custom Lists With Stacks Controls

We’ve created a simple interface that can be used to make custom menus by simply clicking a button to add items, and changing a few settings to customize each link, and link level. You can even easily add List icons & Subtitles ^_^

Here, I’ll show you how to make make custom lists using the new feature:

# 1 Check the “Custom List” option and then select “Stacks”

After doing select stacks, you will see that a new stacks list item has appeared underneath the menu preview, follow by a [ + List Item ] button for adding additional items to your list.

# 2 Customizing List Items

If you click on a stacks list item, you will see that there are some settings in the inspector panel. You can use these settings to Set the link, Set the item level, add list icons, and add subtitles. The settings for each added list item are:

  • Item Link
  • Item Level
  • Item Subtitle
  • Item Icon

Here you will find a “set link” button that will allow you to choose where you want the list item to link to. It uses stacks link creation window, so you can easily link to a page on your RapidWeaver site, or link to an external site.

Item Level

You will use these settings to create dropdown menus of multiple levels. The options are:

  • Top Level
  • Sub Level 1
  • Sub Level 2
  • Sub Level 3
  • Sub Level 4
  • Sub Level 5

By default, added links will be set to “Top Level”, meaning the list item will be always be shown.

You can create a dropdown menu by placing a new list item directly underneath a Top Level element, and then changing the level to Sub Level 1, like so:

Doing so will create a dropdown menu with the Sub Level 1 item underneath the preceeding Top Level item.

You can create more sub levels by following the same rules. For example, create a third level of list items by placing some Sub Level 2 items directly underneath a Sub Level 1 item, like so:

You can create up to 5 levels deep. This should be plenty, we’ve chosen this amount because having more than 5 levels of items is way too confusing for a user. We recommend going no more than 2 or 3 levels deep, unless absolutely necessary.

Item Subtitles

Here you will simply find a checkbox that reads “Add subtitle”, if you check it, a new text-input will appear in the Stack List Item, where you can input some subtitle text.

Item Icon

Here you will find a checkbox that reads “Add Icon”, if you check it, more controls will appear allowing you to choose an icon font, and input the icon code. The rules for creating icon codes are the same for creating menu toggle icons and dropdown icons.

Not only will you see new controls appear, but you will also see the icon show up next to the main text in the Stack List Item.



Adding List Icons & Subtitles

The Side Menu supports creating List Icons & Subtitles!

This feature is only possible when creating custom lists, not when using RapidWeavers built in Menu.

The method for creating list items and subtitles will depend on which type of custom list you’ve selected. Remember there are 3 types of custom lists

  • Stacks *(new)
  • Markdown
  • HTML

#1 Using Stacks

The easiest way to create list items with Icons and Subtitles is to use the new Stacks custom list feature.

If you are using the new Stacks custom list option, then you can simply follow the instructions in the section above

It is as simple as using the settings inspector panel. You can check a box to add a subtitle, or add an icon to each list item. You’ll see more options for customizing there.


#2 Using Markdown or HTML

If you are using markdown or HTML to create a custom list, you will need to use some code snippets for adding Icons and Subtitles. The snippets for both are exactly the same.

Subtitle Snippets

The snippet for creating a subtitle for Markdown or HTML is a simple small tag with your subtitle text inside. like so:

<small> MY SUBTITLE TEXT HERE </small>

Icon Snippet

If you are using Markdown or HTML to create a custom list, you can use an Icon tag to add list icons.

Side Menu supports three different icon fonts, and the icon snippet for each font is different:

Google Material Icons

<i class="material-icons">ICON_CODE_HERE</i>

Font Awesome Icons

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

Ionic Icons

<i class="ion-ICON_CODE_HERE"></i>

Simply choose the font of the icon that you want to use, replace the ICON_CODE_HERE text with the code for your icon.


#3 Adding snippets to your Markdown/HTML list items

Markdown

The default format for a Markdown Link is:

- (Item Text)[http://item_link_here.com]
Subtitles

To add a subtitle to your markdown list item, place the snippet right after the Item Text in the Markdown List Item Snippet, like so:

- (Item Text <small> MY SUBTITLE TEXT HERE </small> )[http://item_link_here.com]
Icons

The icon snippet can be added before the Item Text in the Markdown List Item Snippet, like so:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text )[http://item_link_here.com]

A full Markdown List Item Snippet with an icon and subtitle would look like this:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text <small>MY SUBTITLE TEXT HERE</small> )[http://item_link_here.com]

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.


HTML

The default format for an HTML Link is:

<li>
<a href="http://item_link_here.com">
Item Text
</a>
</li>

Subtitles

To add a subtitle to your markdown list item, place the snippet right before the Item Text inside of the A tag, like so:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
    </a>
</li>
Icons

The icon snippet can be added after the Item Text, before the closing A tag, like so:

<li>
    <a href="http://item_link_here.com">
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

A full HTML List Item Snippet with an icon and subtitle would look like this:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.

Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Side Menu. Of course, each Side Menu has a default toggle already included, but we’ve also included a sub-stack called the Side Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Side Menus Unique Menu ID to the Connected ID setting of the Extra Toggle stack. You’ll see it at the very top of the settings panel, in the General Section.

Paste your Side Menus Unique ID here, and voila! You now have an extra toggle that will open your menu.

The settings for the Extra Menu Toggle sub-stack are extactly the same as the Menu Toggle settings for the Side Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment

Hoooraah!

You’ve made it to the end of the tutorial. You’re a beast!

Not to mention you can now create amazing menus for your website~~ ^_-

Go crazy and make something awesome. Feel free to share your menus on our Facebook page

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

Formula

Greater Than Less Than Comparisons

Using Import IDs in Custom Expression Formula Segments

Setup

This tutorial will lead you through the set up of a custom calculator that displays the cost of a hypothetical 199.99 product. The total price output will be based on quantity needed, selectable extras, a slider for adding a ‘tip’, and a checkbox used to offer warranty.

Add the Stack to the Stacks page

formula stack layout

After adding the Stack you will see two sections, one labeled “Calculator (Input Fields)” at the top and another labeled “Formula” at the bottom. The “Calculator” section is where all of the usable input fields will be declared. The “Formula” section is where the math used to calculate the output will be declared, this section is only visible in edit mode while the “Calculator” fields will be visible and usable by page visitors.

Add Input Fields

Number Input

First we will create the Quantity input field. Click on the “Import Value” segment found in the “Calculator” section. In the settings panel found to the right of the RapidWeaver window, leave the “Type” option set to “Number Input” and change the “Import ID” to a unique value. It should start with an alphabet and should only use [ a-z A-Z 0-9  _ – ] characters. For our example we will call it “input-quantity” in order to make it intuitive when reading the formula later on. Set the “Min Value” to “1” so that the user has to at least order at least 1. Our “Max Value” will be set to “10” to put a limit of 10 units to purchase. Set the “Default Value” to “1” so that it is automatically that value when the page loads. Finally, enable the option titled “Show Label” and add the title “Quantity”. We will ignore the “Styles” and “Output” options for now (they will be gone over in the “Settings & Styles” tutorial below).

import value settings

Select Field

Next, add a new “Import Value” segment by clicking on the blue plus button found in the “Calculator” section. Change the “Type” option to “Select”. This will be our selectable options field. Just like the “Import Value” segment before, create a unique “Import ID”, we will call this one “input-options”. Enable “Show Label” and add the title “Options”. Now in the editor, we can add the selectable options. The “Import Value” now has it’s own blue plus button for adding more selectable options. Click the add button 3 times to add 3 more options for a total of 4. You can click each segment to change the title and selected value. Change the first segment to “No Extras” and in the settings panel set the “Value” to “-5” (This will subtract 5 from the total cost if this value is selected). Note: the “Value” field accepts numbers (99), negative numbers (-5), and decimal values separated with a period [.] (12.99). The value must be a numerical.

formula select value

We will update next three select segments with these values:

Title=Extra Paper | Value=0

Title=Extra Paper and Pencils |  Value=5

Title=Full Kit | Value=30

To pick which select option is enabled by default, drag the value you want to the top of the Select list. We will leave “No Extras” as the default value.

Checkbox

Add add a new “Import Value” segment. Set the “Type” to “Checkbox” and the “Import ID” to “input-warranty”. The “Text” option is the text that displays next to the checkbox, let’s change it to “Warranty”. In the formula to be created later, this field will multiply the total cost by 20% and add it to the total if enabled. We will need to set the “Disabled Value” to “1” (The total multiplied by 1 equals no change to the total value) and the “Enabled Value” to “1.2” (The total value multiplied by 1.2 will increase the value by 20%, 0.2 is 20% in decimal form, adding 1 to that value keeps the original value when it’s multiplied). We don’t wont this field to be enabled by default, so leave the “Start Enabled” option disabled.

checkbox example

Slider

Add add a new “Import Value” segment. Set the “Type” to “Slider” and the “Import ID” to “input-tip”. We want to allow the user to add a 0-20% tip so set the “Max Value” to “20” and the “Default Value” to “0”. Leave the “Step” value on “1” so they can choose any value between 0 and 20. Enable “Show Label” and put the title “Include a Tip”. Also enable the “Show Units” options and place a percent symbol [%] in the “Units” field. Note: The Slider type does not allow decimal or negative values.

slider example

 

Note: In version 1.0.1, the slider now accepts negative and decimal values in these settings: Min Value, Max Value, Default Value, and Step.

Now we have added all the of the fields we want the user to fill in, we just need to create the formula that calculates the total cost.

Add Formula Segments

First it is best to write out the formula and then type it into the “Formula” section after we have it laid out how we need it to be. If you need a refresher on the Order of Operations check out the link here. Here is the formula for our example:

((input-quantity * 199.99 + input-options) * input-warranty) * (input-tip / 100 + 1)

Note: The Slider type (Import ID: input-tip) does not allow decimal values. We will need to divide it’s value by 100 to turn it into a percent value in decimal form and add 1 in order for it to calculate the total correctly. (input-tip / 100 + 1)

In order to add the formula you must first add “Formula Segments” by clicking the blue plus button found in the “Formula” section. These segments are the numbers, math symbols, and values to be imported from the input fields found in the “Calculator” section. Each segment has a type that can be declared in the settings panel to the right of the RapidWeaver window. Our first two segments will be open parenthesis symbols [(].

parenthesis open

These formula segments can be dragged and dropped into any order after they have been created/added.

Helpful Tip: When dragging a segment, It’s best to place the segment over the the bottom right corner of the segment you want to place it in front of. Alternatively, you can place it over the top left corner to have it be placed behind the segment you are hovering over.

moving segments

Next we will want to import a value in the next formula segment. Set the “Type” to “Import Value” and in the “Import ID” field put the ID of the corresponding “Import Value” segment from the “Calculator” section. In our example it is “input-quantity”.

match ids

Next insert two more  formula segments and set the first to “Type” to “* Multiply” and the second “Type” to “Number”. In the Number “Value” field add “199.99”.

simple number

Continue to move each part of the formula laid out above until the full formula has been added.

formula complete

Setup is complete, you can now switch to preview mode to see the calculator in action. In the next tutorial we will go over all of the settings and styling.

Alternative Input Method V1.1.0+

Formula Segments can now be condensed together by using the option “Custom Expression”. You can type out entire formulas in a single segment if you wrap import IDs with brackets ([input-quantity]).

condensed formula

Note: If you see errors reporting that any of the “Import Values” are missing, check for typos in the “Import IDs”. 

Settings & Styles

The Formula Stack has three major parts each with their own settings panels. Below we will go over the options found it each one.

settings breakdown

Formula

This settings panel is where you will find all of the style options (Calculator, Input Fields, and Output).

Calculator

Calculator Theme – Choose between 3 different Themes with limited customization options or  “Custom” which will enable more styling options.

Max Width – This sets the width of the Calculator. When the window width is smaller than the set value, the calculator will fill 100% of the width. When the width is greater than the set value the calculator will center itself in the available space.

Background – Set the background color of the the Calculator.

Border Style (Custom) – Change the display type of the Calculator border.

Border Color (Custom) – Individual color settings for each side of the border.

Border Width (Custom) – Individual width settings for each side of the border.

Border Radius (Custom) – Individual rounding settings for each corner of the Calculator.

Box Shadow (Custom) – Declare a shadow using four settings. “X” moves the shadow to the right with a positive value and to the left with a negative value. “Y” moves the shadow downward with a positive value and up with and negative value. “Blur” adjusts how sharp the shadow is, 0 means no blur, 10 means 10 pixels of blur. “Spread” adjust how large the shadow is, a positive value increases the size while a negative value decreases the size.

Shadow Color (Custom) – Set the color of the Shadow.

Input

Input Padding – Adjust how much space sits around the text inside the input field and to the inside of the input field’s border. “T – B” controls the top and bottom and “R – L” controls the right and left.

Font Family – Declare a custom font for the input. “inherit” will use whatever font the theme has set for the page.

Font – Set the font size and line height of the input field text. The “Line Height” value should be greater than the “Size” value.

Text – Individual color settings for the Input text, Labels, and Units.

Font Weight – Set the thickness of the Input text.

Input Bg (Custom) – Set the color of the input background.

Border Style (Custom) – Change the display type of the Input field.

Border Color (Custom) – Individual color settings for each side of the border.

Border Width (Custom) – Individual width settings for each side of the border.

Border Radius (Custom) – Individual rounding settings for each corner of the Input field.

Box Shadow (Custom) – Declare a shadow using four settings. “X” moves the shadow to the right with a positive value and to the left with a negative value. “Y” moves the shadow downward with a positive value and up with and negative value. “Blur” adjusts how sharp the shadow is, 0 means no blur, 10 means 10 pixels of blur. “Spread” adjust how large the shadow is, a positive value increases the size while a negative value decreases the size.

Shadow Color (Custom) – Set the color of the Shadow.

Output

Answer – Set where the outputted answer to the formula will display. “Show Answer / Calculator On / Calculator On” is default and will simply place the answer below the Calculator input. “Export Answer / Calculator On / Calculator On” will reveal more options and allow you to send the value to another Stack’s input field on the page. The last two options are meant to be used in conjunction when using multiple Formula Stacks on one page.  “No Answer / Calculator On / Formula Off” will remove the the output all together (this is useful if you want to display the outputted answer somewhere other than underneath the Calculator). “Show Answer / Calculator Off / Formula On” will only show the answer with no Calculator section (Use the Formula section to import values from another Formula Stack).

Decimal Places – Set how many decimal spaces show for the decimal value. Set this value to 0 to not show a decimal value.

Separators – Change the symbol used as a Decimal (9.99) with the first input and the symbol used to group the numbers (1,000,000) in the second input.

Labels – Add a prefix or postfixed label by typing a value into either input field.

Show Title – When enabled, the “Title” input value will display above the output answer.

Font Family – Declare a custom font for the output. “inherit” will use whatever font the theme has set for the page.

Font – Set the font size and line height of the outputted answer.

Text – Individual color settings for the Answer value, Prefix, and Postfix.

Font Weight – Set the thickness of the Answer.

Field # (Show in an External Field) – Add the numerical value of the field you want to export the answer to.

Help: Show Field # in Preview (Show in an External Field) –  Enable this option to see the numerical value of each of the external input fields found on your page while in preview mode. Locate the field you want to export to and copy the number into the “Field #” setting to have it display there. Make sure to disable this setting after obtaining the value you need.

Import Value

Import Values can be found in the Calculator section. Each Import Value has it’s own settings panel.

Settings

Type – There are six options to choose from, each will display a different input method. To learn more about the “Sub Formula” option, see the tutorial titled “Sub Formulas” below.

Import ID – Expects a unique ID. It should start with an alphabet and should only use [ a-z A-Z 0-9  _ – ] characters. This ID is then used to link this “Import Value” to a “Formula Segment”.

Min Value (Number Input & Slider) – The minimum value that can be entered into this field.

Max Value (Number Input & Slider) – The maximum value that can be entered into the field.

Default Value (Number Input & Slider) – The value that will display when the page is loaded.

Step (Slider) – The amount of steps the slider shifts by when moved left or right.

Text (Checkbox) – Add text that will display next to the checkbox.

Disabled Value (Checkbox) – The value imported into the formula when the checkbox is left unchecked.

Enabled Value (Checkbox) – The value imported into the formula when the checkbox is checked.

Start Enabled (Checkbox) – Enable this to have the checkbox start checked when the page is loaded.

Start Date Text (Date / Time Range) – Text displayed inside the start date field.

End Date Text (Date / Time Range) – Text displayed inside the end date field.

Language (Date / Time Range) –  Set the language the pop up calendar date selector will display in.

Date Format (Date / Time Range) – Set an order for the day, month, and year to display in.

Week Starts On (Date / Time Range) – Choose which day of the week the calendar week starts on.

Enable Sunday-Saturday (Date / Time Range) – Disable or enable certain days of the week. Disabled days are not able to be chosen by the form user.

Include Time (Date / Time Range) – Include a time picker next to the calendar date selector.

Time Format (Date / Time Range) – Select a format for the time display.

Allowed Times (Date / Time Range) – A comma separated list of available times to select. Times listed here will show up for both the start end date time pickers.

Output As (Date / Time Range) – Will change the value imported into the formula based either on days, hours, or minutes.

Styles

Columns – “Single / Full Width” will set the width of the Input Field to fill the full width of the Calculator. “Two /  50% Width” will only fill half of the width of the Calculator and is only useful if the following “Import Value” field is also set to the same to create two columns.

Input Widths – The max width the field will display at.

Labels

Show Label – Displays a label for the field.

Label (Show Label) – Text displayed above the “Import Value” input field.

Show Units – Displays units for the field.

Units (Show Units) – text that will display to the right of the “Import Value” input field. If the input field is too wide for the units to display, they will be moved below the input field instead.

Output

Output Dates to External Fields (Date / Time Range) – Will allow you to set numerical values to output the dates and times to external fields.

Start Field # (Date / Time Range) – Add the numerical value of the field you want to export the start date and time to. Only works if  “Output dates to External Fields” is enabled.

End Field # (Date / Time Range) – Add the numerical value of the field you want to export the end date and time to. Only works if  “Output dates to External Fields” is enabled.

Output Value to External Field – Outputs the difference in days, hours, or minutes to an external field.

Field # (Output Value to External Field ) – Add the numerical value of the field you want to export the answer to.

Help: Show Field # in Preview (Output Value to External Field ) –  Enable this option to see the numerical value of each of the external input fields found on your page while in preview mode. Locate the field you want to export to and copy the number into the “Field #” setting to have it display there. Make sure to disable this setting after obtaining the value you need.

Formula Segment

Type – Choose to import a value from one of the calculator fields or select a math symbol to use.

Import ID (Import Value) – Place the “Import ID” of the corresponding field that you want to add to the formula.

Value (Number) – A numerical value. Accepts decimals and negative values.

Expression (Custom Expression) – In this field you can add any of the supported math operators and or methods (listed in the “Formula Math” section below ). This field is also useful for condensing your formula.

Exporting Values to a Form

The Formula Stack allows you to export calculator values to 3rd-party form fields so they can be saved or used.

To do so, Click on the option “Output Value to External Field” in the “Import Value” settings panel. Then enable “Help: Show Field # in Preview”.

export to external field

Switch to preview mode and you will notice that all of the fields (excluding those found in the Calculator) have numerical values. Find the field you want to export to and copy it’s field number.

field numbers

Switch back to edit mode and change the value “Field #” (in the “Import Value” settings panel) to the number you copied. Now when ever the field in the Calculator is changed, that field will automatically update with the current value.

Sub Formulas V1.1.0+

The Import Value Stack includes a type named “Sub Formula”. This will allow you to create a formula just like in the main Formula section, but the answer will be stored inside of and import ID that you can then use in other formulas on the page. This is useful when you need to repeat parts of a formula. Below is a Mortgage payment calculator as and example of when it is useful.

mortgage formula

The mortgage formula when written in the Formula stack will appear as:

1+[principle] *((( [rate] /100/12)*(1+( [rate] /100/12))** [payments] )/((1+( [rate] /100/12))** [payments] -1))

percent rate year

When we collect the “rate” in the calculator it’s determined as a percentage based on year (I.E. 4%) but the formula calls for the rate based on month and as a decimal value. 4% becomes 0.003333333, and now you can see why it’s better to have the user provide the yearly rate instead of the monthly rate. To get from 4% to 0.00333333 you first need to change the percent value to a decimal by dividing by 100.

[percent-rate-year] /100

Then it needs to be converted from a yearly rate to a monthly one by dividing by 12, with the final formula segment appearing as below.

([percent-rate-year] /100/12)

This formula segment is placed inside the final formula everywhere the Mortgage formula calls for the rate, but we can create a “Sub Formula” out of it so that we can call it just like we call in other Imported values.

sub formula

You would simply add the formula segment to the “Sub Formula” just as you would add a formula to the main “Formula” section. Create an Import ID (This example simply calls it “rate”). Now instead of typing out the full monthly rate out each time its used we can simply use [rate].

sub formula example

Formula Math

Supported Operators

+ Addition

Example: 2+2 = 2

– Subtraction

Example: 2-2 = 0

/ Division

Example: 10/2 = 5

*  Multiplication

Example: 10*2 = 20

% Remainder

Example: 19%5 = 4

( ) Parenthesis

Example: 2*(5+5) = 20

** Power

Example: 2**4 = 16

PI Pie

Example: PI*1 = 3.14

Supported Comparisons V1.1.0+

 > Greater than

Less Than

 >= Greater than or equal to

<= Less than or equal to

Examples:

15 >= 10

Result: 1

15 < 20 

Result: 1

15 < 10

Result: 0

(15 > 20) * 99

Result: 0

(15 >= 10) * 99

Result: 99

(15 >= 10) * (15 < 20) * 99

Result: 99

(15 >= 10) * (15 < 12) * 99 

Result: 0

((15 >= 10) * (15 < 20) * 99 ) + ((15 >= 20) * (15 < 30) * 88 ) 

Result: 99

((25 >= 10) * (25 < 20) * 99 ) + ((25 >= 20) * (25 < 30) * 88 ) 

Result: 88

Supported Methods

abs(x) Returns the absolute value of x

Example: abs(-21) = 21

round(x) Returns the value of x rounded to its nearest integer

Example: round(1.3) = 1, round(1.8) = 2

ceil(x) Returns the value of x rounded up to its nearest integer

Example: ceil(1.3) = 2, ceil(1.8) = 2

floor(x) Returns the value of x rounded down to its nearest integer

Example: floor(1.8) = 1, floor(1.3) = 1

max(x, y, z, …, n) Returns the number with the highest value

Example: max(4, -23, 7, 0) = 7

min(x, y, z, …, n) Returns the number with the lowest value

Example: min(4, -23, 7, 0) = -23

sqrt(x) Returns the square root of x

Example: sqrt(16) = 4

Supported Advanced Methods

random(1) Returns a random number between 0 and 1

cos(x) Returns the cosine of x (x is in radians)

sin(x) Returns the sine of x (x is in radians)

tan(x) Returns the tangent of an angle

log(x) Returns the natural logarithm (base E) of x

acos(x) Returns the arccosine of x, in radians

asin(x) Returns the arcsine of x, in radians

atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians

atan2(y, x) Returns the arctangent of the quotient of its arguments

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

Overlay Menu

Description

A stunning and fully customizable overlay dropdown menu triggered by a menu toggle. Use Rapidweaver’s built in menu, or create your own custom menus. Style to your hearts content with a wide variety of styling, sizing, and layout options.


Tutorial Overview

  • Getting Started
  • Basic Setup
  • Settings
    • General
    • Menu
    • Dropdown Icons
    • Top Level Menu Items
    • Sub Level Menu Items
    • Menu Toggle
    • Advanced
    • Experimental
  • Extra Menu Toggle Stack (included)

Getting Started

Let’s get started using the Overlay Menu.

Here you’ll learn how to get the menu up-and-running on your web-page.

Don’t worry, it’s suuuper easy! (Drag and drop)

( p.s. if you already now how to download and install, just skip to step 3 )

Step 1

Purchase the Overlay Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the Overlay_Menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called Overlay_Menu.stack, double-click on this file to install the stack into Rapidweaver.

Step 3

Now all you need to do is search for the stack in the Stack Library, e.g. “overlay menu” and then Drag and Drop it onto your page

That’s it!

We’ve included great presets that allow your menu to work right away, as soon as you place it on the page.


Settings

Here we’ll go over all of the settings included with the Overlay Menu.

General Settings

  • Options
    • Unique Menu ID
    • Use Custom List

Unique Menu ID ( INPUT )

The Unique Menu ID will provide your menu with a specific ID that will help distinguish if from other Overlay Menu’s on the page.

It can also be used to connect your Overlay Menu to extra menu toggles using the included Overlay Menu Extra Toggle stack.

NOTE: If you only plan on using one Overlay Menu on your page, you don’t need to do anything with this value. By default the Overlay Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

By default the Overlay Menu stack will use your Rapidweaver site menu.

This option can be used if you do not want to use your Rapidweaver menu, and instead want to create your own custom dropdown menu, with your own links.

If you check this option, you will see a dropdown list that will allow you to choose between:

  • Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Markdown is quick and easy, while HTML can be used to create more advanced menus.

Don’t know anything about HTML or Markdown???

Not to worry, If you check the option, you will see that we’ve also provided a default menu example in the input field. Just copy the format and you’ll be good to go! ^^


  • Options
    • Font Family
    • Menu Fill Mode
    • Overlay Opacity
    • Background

Font family ( SELECT MENU )

Simply allows you to choose a font for your menu from a list of included presets. We’ve chosen some of the top fonts on the web.

This option allows you to choose the maximum width of your menu.

You can choose to have it Fill the page, or you can use Pixel / Percentage based widths.

Your menu will automatically default to fill the page on mobile devices and tablets, no matter what fill option you choose.

Overlay Opacity ( SLIDER )

Here you can set the opacity of your Overlay Menu’s background. Set it to 1.0 to make the menu fully opaque, or set it to a lower value to make it transparent.

By Default, it is set to 0.8 (slightly transparent)

Background ( SELECT MENU )

This is where you can set the background of your menu. You can choose between

  • None
  • Solid Color
  • Gradient
  • Image

The Options are fairly standard and easy to setup.

One thing to note is that the IMAGE BACKGROUND has a special image cover, for images that might make text harder to read.

This image cover is simply a color option with the ability to change the opacity. Increase or decrease the opacity depending on your image, and how visible your menu text is.


  • Options
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Open & Close Icons

You can choose an icon for your dropdown Open state, and Close state.

Open is the default state, You should choose icons that tell the user to click on the link to open a dropdown.

Close is the icon that will show when a dropdown link is clicked. This icon should tell the user that he/she can close the menu.

You can select which icon font you would like to use for each icon. We’ve included icons from Google Material Icons, Fontawesome, and Iconicons.

You also need to type in the proper Icon code for the icont you want to use.

NOTE: Due to the way each icon font works, there is a different icon code format depending on which font you use.

Google Material Icon Format: account_circle (lowercase, use underscores _ to separate words)

See all Material Icons here: Offical Material Icon site

Fontawesome Icon Format: arrow-circle-down (lowercase, use dashes – to separate words)

No need to add “fa fa-“, just type in the specific icon code. We handle the rest.

See all Fontawesome Icons here: Offical Fontawesome site

Ionicon Icon Format: ion-arrow-down-b (lowercase, use dashes – to separate words)

With Ionicons, you must include the “ion-” before the code. Their site is set up this way, so you can easily copy and paste the codes directly.

See all Ionic Icons here: Offical Ionicon site

Rotate

You can use the rotation option to make your icon rotate once a dropdown list is opened.

This is handy for rotating plus symbols ( + ) into ( x ) symbols, or rotating down-arrows into up-arrows.

To achieve such an affect, set both the open AND close icons to the same value, e.g. a plus ( + ) or a down-arrow, and then set the rotate to something like 45 or 180(degrees).

( + ) to ( x ) = 45deg

( keyboard_arrow_down ) to ( keyboard_arrow_up ) = 180deg


Top Level Menu Item Settings

  • Options
    • Font size
    • Padding
    • Vertical Spacing
    • Ra dius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are very straight forward. I recommend playing around with them to see what happens. If you change them, the menu preview with update too, so you can easily tweak your menu and see the changes right away!

One thing to note is the Vertical Spacing.

This input will determine the amount of vertical space between all menu items in the list.


Sub Level Menu Item Settings

  • Options
    • Font size
    • Use Top Level Color Styles (Checkbox)
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are nearly the same as the top level items, with the exception of padding, vertical spacing, and radius. These styles are shared with the top level menu items.

Note: By default sub level menu items with share there color values (text color, background, etc.) with top level menu items

If you want to use custom color styles for sub level items, uncheck the Use Top Level Color Styles checkbox.


  • Options
    • Show Toggle Text (Checkbox)
    • Show Toggle Icon (Checkbox)
    • Text Font
    • Text (input)
    • Text Font Size
    • Icon Font
    • Icon Code (input)
    • Icon Size
    • Fill Mode
    • Position
    • Vertical Align (Fixed Menus only)
    • Horizontal Align
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background
    • Border
    • shadow

For the most part, the Menu Toggle Settings are straightforward and easy to use. Play around with them and checkout the preview in settings to see the changes directly.

There are a just few options that are important to understand:

Show Toggle Text ( CHECKBOX )

Unchecking this option will hide the text of the toggle button, leaving only the icon

Show Toggle ICON ( CHECKBOX )

Unchecking this option will hide the icon of the toggle button, leaving only the text

Position ( SELECT MENU )

There are two positioning options to choose from with the Overlay Menu Toggle

Inline or Fixed

Fixed:

By default, the toggle is fixed, meaning it scrolls with the page.

When this option is selected, you can choose the Vertical (top, bottom) and Horizontal (left, right, center) alignment.

Use the margin settings to adjust the spacing of your toggle when fixed.

Inline:

If you select the inline option, your menu will stay inline with the content. You can still set the Horizontal alignment (left, right, center) to make your toggle fit just right.


Advanced Settings

  • Options
    • Show Data ID Info

As a really cool bonus feature, you can use ANY clickable html element to open up your Overlay Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="overlay_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Overlay Menu’s Unique ID value.

Then, just add the data attribute to a clickable HTML element, such as a link, button, etc.

here are some examples

<a href="#" data-id="overlay_menu_UNIQUE_MENU_ID"> Open my menu </a>

<button data-id="overlay_menu_UNIQUE_MENU_ID"> Open my menu </button>

If you check “Show data ID info” option, a snippet of your exact data-id code (including your unique ID) will show at the top of the stack in edit mode. This makes it really easy for copying and pasting the code for use.

You’re welcome. ^_-


Experimental Settings

  • Options
    • Replace Theme Menu

Due to popular request, we’ve developed an experimental feature that is meant to hide your themes default menu, to use the Overlay Menu instead!

Simply check the “Replace Theme Menu” option, and the magic will take place.

NOTE: This feature is experimental, and may not work with all themes.


Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Overlay Menu. Of course, each Overlay Menu has a default toggle already included, but we’ve also included a sub-stack called the Overlay Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Overlay Menus Unique Menu ID to the Connected ID setting of the Extra Toggle stack. You’ll see it at the very top of the settings panel, in the General Section.

Paste your Overlay Menus Unique ID here, and voila! You now have an extra toggle that will open your menu.

The settings for the Extra Menu Toggle sub-stack are extactly the same as the Menu Toggle settings for the Overlay Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment

Hoooraah!

You’ve made it to the end of the tutorial. You’re a beast!

Not to mention you can now create amazing menus for your website~~ ^_-

Go crazy and make something awesome. Feel free to share your menus on our Facebook page

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

Action Menu

#1 Getting Started

  • Download & Install
  • Drag the ActionMenu Stack onto a stacks page
  • Configure your menu options
  • Add Items and links
  • Done

Download & Install

Purchase the stack here and install it into Rapid Weaver

Drag the ActionMenu Stack onto a stacks page

Open up the Library in Rapid Weaver and search for the ActionMenu Stack

Click and Drag the ActionMenu Stack onto a Stacks page

Configure your menu options

By default, ActionMenu will work automatically as soon as you drag it on to the page. The default settings have been carefully chosen to make your menu look as nice as possible, with no initial setup.

If you do want to make some adustments or changes, follow the Instructions Below to configure your menus settings.

Now all you have to do is click on the Add button, (the one with the + symbol) to add items to your menu

Peace of cake!

Thats it!

Getting started is literally as simple as clicking and dragging the stack onto the page, and then clicking the add button to create menu items.

#2 Action Menu Settings

  • General
    • Open on start
    • Show background overlay
    • Orientation
    • Distance
    • Animation Speed

Open on start

Marking this option will make your menu open by default when the page is loaded. If not checked, the menu will be closed initially.

Show Background Overlay

Checking this option will make an overlay background display when your menu is opened. By default this option is un-checked. But in some cases you might want a background overlay to make your menu pop out to the user.

After checking this option you will see that you can also set the Overlay Color and Overlay Opacity

Orientation

These options allow you to position your menu on the page. You can position it vertically on the top or bottom, or horiztonally on the left or right

The items and links will automatically adapt to the orientation you choose, no need for extra setup. ^_^ (Awesome sauce)

Distance

The distance options will determine how far from the edge of the page your menu will be place. You can set both a vertical and horizontal distance.

For example setting a vertical distance of 30px and a horizontal distance of 30px, will display your menu 30px from the top/bottom of the page and 30px from the left/right, depending on your orientation.

Animation Speed

The animation speed option is simply for making the menu items pop-up more quickly or slowly. The default setting is nearly perfect (^_-), but we’ve included the option just in case.

————————

  • Main Toggle
    • Hide Toggle Icon
    • Rotate Toggle Icon
    • Background
    • Icon
    • Size
    • Radius

Hide Toggle Icon

Checking this option will hide the icon in the toggle section. This is useful when wanting to use an image for the background.

Rotate Toggle Icon

By default the toggle icon will rotate when opened. This adds a nice effect. Although, in some cases (like when using image backgrounds ; ] ) you will not want this rotation to occur. If so, check this option.

Background

These settings will allow you to change the background of your menu toggle. There are four different options to choose from:

None, Solid Color, Gradient, Image

Icon

There are a few options for editing your menu toggles icon.

Icon Color Icon Font Icon Code (Which Icon you will use)

First, you can set the color of your Icon, next choose which icon font you want to use, and finally enter the icon code for the icon you desire.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( – ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Toggle Size

These options will allow you to adjust the size of your Menu Toggle and the Toggle Icon inside of it.

Toggle Radius

The slider allows you to adjust the corners of your Menu Toggle, you can set it to be completely circular, rounded, or completely square.

————————

  • All Items
    • Item size
    • Item Icon Size
    • Item Spacing
    • Item Radius

Item Size

This option will set the size for all of the Menu Items in your Action Menu. The items are all meant to be the same size for aesthetic reasons. Plus, it’s easier to set up. : )

Item Icon Size

This option will set the size for all of the Icons in your Menu Items. These are also all the same size, to fit properly with the item size that you choose.

Item Spacing

Adjusting this value will change the amount of space between each menu item. You can increase or decrease the space accordingly.

Item Radius

This slider option will allow you to adjust the corner radius of all menu items. Similar to the menu toggle, you can make it completely circular, rounded, or completely square.

————————

  • All Links
    • Always Show Links
    • Link Text Color
    • Link Background

All options in this section will change every Item Link in your menu.

Checking this option will make it the Item Links display all the time. By default they are hidden and only display when hovering over a menu item.

Link Text Color

This value simply changes the color of the text inside the Item Link area.

Link Background

There are a few different styles to choose from when it comes to link backgrounds. You can choose either none, a Solid Color, or a Shadow.

None:

This will display no background behind the Item Link.

Solid Color:

This will display one solide color behind the Item Link.

Shadow:

This will display a drop-shadow behind the link, giving it a floating affect. (It’s pretty sweet!)

 #3 Individual Action Menu Item Settings

These are the options for each individual Menu Item that you add.

  • General
    • Hide Icon
    • Hide Box Shadow
    • Item Link
    • Item Background
    • Item Icon Color
    • Item Icon Font & Icon Code

Hide Icon

This option allows you to hide the icon inside of the Menu Item. Useful when you want to use a background image.

Hide Box Shadow

Checking this option will hide the box-shadow behind the Menu Item when being hovered. This is usefull when you want to use matching background colors for your Menu Item and your Item Links. It gives them a nice blend affect.

Here is where you will add the URL that you would like your Menu Item to link to. You can set it to anything using Rapid Weavers link interface, including pages from your own site, or external web pages. (^o^)/ Incredible!

Item background

These settings allow you to change the background for the individual Menu Item. You can choose between None, Solid Color, Gradient, or Background Image

Item Icon Color

This value simple changes the color of the Icon inside of the Menu Item

Item Icon Font & Icon Code

Here you can specificy the Icon Font (Google Material, Fontawesome, or Ionicons), and then enter the icon code for the specific icon that you would like to use.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( – ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Hoorah!

You made it! Now you are able to harness the true power of this incredibly simple, yet practical stack, the ACTION MENU

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

Heroic Banner

Setup

1. Add the Stack to the Stack’s Editor.

stack added

2. If you intend to use an image, add an image to the Background Image field in the Stack’s settings panel under the heading “Background”.

background image

3. Add your desired content to the “Drop stacks here” section. This content will appear in front of the background image.

4. Change the Background Padding values to increase or decrease the size of the background area. This is the area where the Background Image displays. The Margin values are optional and only effect the space between the background area and the surrounding content outside of the Stack.

padding

5. Select a Preset value for the effect you want to use.

preset

By default the Preset option is set to “Auto – Animation”, “Auto” means that this preset animates automatically without the user having to do anything, “Mouse” means the effect relies on the position of the mouse, and “Scroll” means the effect relies on the position of the scroll bar. Of the 8 choices, most modes do not require any additional setup unless you wish to customize how it works.

General Customization

Image Size

You can adjust how the background image fits by changing this value.

  • Cover – Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
  • Contain – Scale the image to the largest size such that both its width and its height can fit inside the content area
  • Fit to Width – Scale the background image so that the left and right sides of the image fit to the width of background area. The left and right of the image will always be visible. The image may be cropped vertically or the image may repeat in the vertical direction, depending on the size.
  • Fit to Height – Scale the background image so that the top and bottom of the image fits the height of background area. The top and bottom of the image will always be visible. The image may be cropped horizontally or the image may repeat in the horizontal direction, depending on the size.
  • Actual Size – The image will not be scaled and will display at it actually resolution. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is good for patterns.
  • Use Custom Size – Declare a set height and width of the image. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is for more advanced users and is also good for patterns.

Content Background Color

This adjusts the color of the content inside of the background area. This color value supports opacity.

Content Padding

Increase or decrease the area between the content and the edges of the Content Background.

Max Width

Set a maximum width in pixels that the content can be. The content will be centered when the width of the browser or containing element is larger than the set amount.

Border

A set of options to control the border and border radius of the content.

Shadow

A set of options to add a box shadow to the content.

Preset Specific Customization

Auto – Animation: Direction

Change the direction the image animates.

Auto – Animation: Animation Speed

Increasing this value causes the animation to move more quickly.

Auto – Gradient: Colors 1 & 2

These set the color of the gradient inside of the background area. The color values support opacity, especially useful when also using a background image.

Auto – Gradient: Stop Points

Adjust at what point colors 1 & 2 overlap.

Auto – Gradient: Orientation

Change the direction or shape of the gradient.

Auto – Gradient: Animate Gradient

Enabled by default, this option makes the gradient transition from color 1 to color 2 and back continually.

Auto – Gradient: Animation Speed

Adjust how quickly Animate Gradient transitions between colors.

Mouse – 3D Parallax: Z position

Adjust how far away from the background the content sits in 3D space. A higher value brings the content closer to the screen.

Scroll – Frosted Glass: Blur Amount

Adjust how much blur is applied to the transparent content. Note: the content must have an opacity value lower than 90% to display.

Scroll – Parallax: Parallax Speed

Adjust how fast or slow the background image moves in relation to the browser’s scroll speed.

Scroll – Transition: Switch Point

Adjust how far from the top of the browser the stack should be before it fades the background image out and the transtion image in. Setting the value to 1px will mean the image will not transtion until the stack is 1px away from the top of the browser window.

Scroll – Transition: Animation Speed

Change how fast the image blurs out and in.

Scroll – Transition: Transtion Image

Set an image to transtion to whens the Switch Point has been reached.

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

Siphon

Setup

1. Drag the Siphon Stack into the Stacks editor.

Once the Stack is in the editor, you will see three components. The Container on the outside wrapping a single Slide, and the Slide wrapping a single Answer. The container is purple, the slides have a black border around them, and answers have a white border around them. There are also blue buttons that will allow you to add more slides to the container or add more answers to a single slide.

siphon components

 

2. Change the text “What do you want to ask?”, found above the answer, and replace it with a relevant question.

In this example we will ask “What is your name?”.

Now we need to set up how the form users will reply to this answer. Since the answer will be unique we need to use an input field. By default the answer is set to “Clickable Content”, to change it:

3. Click on the answer component to bring up its settings panel to the right of the editor. Change the option Answer Type to “Input Field”.

There is also an option to change what the label says underneath the input field. We will change it to “Name”. We will not need to use the 3 remaining checkbox options:

Required – When enabled, form users will not be able to leave the input blank and progress to the next slide.

Validate as Email Address – Enabling this option will not allow the form user to progress to the next slide until they have entered a valid email address format. 

Always Visible Confirm Button – Enabling this option will make the confirm / next button visible (Instead of only appearing after the input field has been focused / edited).

answer example

4. Click on the Slide component to pull up it’s settings panel and give the slide a unique Slide ID.

The ID can be anything you want it to be, but every slide should have it’s own unique ID. The value is case sensitive and you should avoid using special characters (!@#$%^& etc) with the exception of dashes  and underscores _ .

There are three fields in the settings panel, but we will only need to set the Slide ID for this slideIn this example we will give it the ID “q1” (for question 1). Note that the short-code [q1] we will be using later displays in the top right corner of the slide.

Background Styles are cosmetic and completely optional.

Leave Display Order set to “Automatic”, we will go over this option later.

The first slide is now finished and does not need anymore content, but you can add any additional info or Stacks content by dragging and dropping other stacks inside the Slide’s black border. You could also add more answer input fields if you wanted to get more information from a single slide.

5. Click the Add New Slide button to add a second slide.

In this slide we can use Siphon’s short-codes to greet the form user by name. An example of how to do so would be to change the question to “Hello [q1], what is the best way to contact you?”. The short-code:

[q1]

is simply made by wrapping the first slide’s Slide ID in brackets. The short-code will be replaced by the value given in the last slide.

short-code example

Now we need to create answers for this second slide. This slide is going to have multiple choice answers, so we can leave the Answer component set to “Text (Submits on click)”.

Submits on click – If a form user clicks on this type of answer, the slide will automatically submit and move to the next slide.

6. Double click the text “Click here to edit text.” and change the value to “Phone”.

7. Click on the answer component to open it’s settings panel and create a Value for the answer.

Unlike the input field, which gets it’s value from what has been typed in by the form user, “Text” answers do not have a value by default, so one will need to be createdIn our example, we will change the value of this answer to “Contact by phone”. When a form user visitor clicks on this answer, that value will be recorded.

To add a second answer, you can either duplicate the phone answer or:

8. Click the Add New Answer button to add a second choice for the form user.

In this answer we will add the text “Email” with the answer value being “Contact by email”. 

Just like we did for the first slide we need to:

9.  Create a unique Slide ID for this slide.

In this example we will give this slide the ID “q2”.

Note: It’s very important to remember to give each slide an ID. If a slide is missing an ID it can cause errors.

Now we need to show conditional slides according to how the second question is answered. First we will create a slide for people who want to be contacted by phone.

10. Add a new slide. This slide will only display on a condition based on the previous slide’s answer.

For our example the question will be “What number should we use to contact you?”. The answer should be an input field and in our example we are using “q3a” as the Slide ID.

conditional slide

We do not want this slide to display automatically, so:

11. In the slide settings panel uncheck the option “Automatic”. Two new fields will appear. To set what slide should come before this one, type in the previous slide’s ID into the After Slide ID field.

This slide is based on the second slide’s answer so we will put “q2”.

We want this slide to show only if the form user has chosen “Phone”.

12. Set the field Has Value equal to one of the answer values of the previous slide.

Has any Value – For more information on what that does see the section titled “Creating Multiple Branches” below. For now you can ignore this option.

In our example we will put “Contact by phone”.

This field is case sensitive and the value should match completely to the value you added to the answer in question 2.

13. Create a new slide just like the previous conditional slide.

In this new slide the question will be “What email address should we use to contact you?” and we want it to show when slide ID “q2” has the value “Contact by email”. This new slide ID will be “q3b”.

Now we can create a submit slide to do something with the collected answers. You can definitely create more slides gathering more information or skip adding a submit slide altogether if you just want to provide links or display conditional content. 

14.  Add a new slide and in the slide’s settings panel, change the slide type to “Submit /  Email Data”.

This will remove the Question field and add a submit button. When form user click the submit button all of the chosen and filled in answer values will be emailed to the address you provide.

15. While still in the settings panel, set the Reply To field by using a Slide ID from a corresponding slide that has an email address value.

In our example slide “q3b” will have the form user email address.

Note: Our example is just to teach you how to set up Siphon. You may want to make sure every form user provides an email address, not just those who want to be contacted by email.

16. Set the Send To field to the address you want to receive the form data. You can also change the Email Subject to whatever you would like as well as the text found in the submit button.

17. Give the submit slide a unique Slide ID.

We now need to create a final slide to show once all other slides have been filled out and submitted.

The Custom Email Format, Declare Custom “From”, and Enable Autoreply checkbox options can be ignored. You can find more information about them below.

18.  Add a new slide and in the slide’s settings panel, change the slide type to “End /  Complete”. This is a blank slide that you can add any stacks content to. This slide will only display if the submit slide has successfully sent the message.

Note: No error will display if you have entered in an email address wrong. Be sure to check your Send To field for spelling errors.

19. Finally, you can click on the outer Container element to get to the Siphon Styles settings panel. In this panel you can customize the form.

styles

Siphon includes an example file showing you how a simple contact form is set up. If you need to re-download the example file you can use this form.

Settings Panel Breakdown

Margin – Adjust the space outside of the Stack.

Padding – Adjust the space inside of the Stack.

Content Width – Set the a limit to how wide the content can be. The content will be centered with equal padding added to the left and right  if the browser window or parent stack is wider than the set amount.

Content Height – There are three options to choose from. The two Fixed options will make Siphon same height as it’s largest / tallest slide. The third option Dynamic will adjust the height of Siphon to match the currently active slide.

Content Align – Set the text alignment of the content inside of Siphon.

Navigation Style – Choose between two options. Back Button will place a arrow button at the bottom of each slide to allow users to back up to the previous slide. Pagination will place clickable bullets at the top of the slide allowing users to navigate to any previous slide in a single click. Note: Because Siphon slides are not static and the slides used as well as the amount of slides there are can change depending on how a form user interacts with the form, the pagination bullets will reset any time a form user makes a change to their input and re-submits a slide. All previously inputed data will be maintained however.

Next Button Style – Set by default, Checkmark will display a checkmark graphic inside of the button. Custom Text will replace the checkmark graphic and allow you to place any text inside the button. Note: When the Custom Text option is enabled, the Input Field’s special built-on submit (demonstrated below) button will be removed.

Built-on Next Button (Checkmark only):

Custom Text Next Button:

Button Text – The text that displays inside of the next button.

Button Font Size – The size of the text inside of the next button.

background styles

Background Gradient Mode & Animate Gradient – If the background has been set to gradient, you can animate it by enabling the “Animate Gradient” option. This will cause the background to move slowly back and forth in the direction of the gradient.

Background Image Mode & Attachment – If the background has been set to image, you can make it so the image does not move when the page is scrolled adding a parallax style effect by settings Attachment to “Fixed”.

question font styles

Question Styles – These settings only effect the question or text found at the top of each slide.

Answer & Text Styles – These settings affect all the text below the question or text found at the top of each slide.

Hover Color – This setting affects the color of the answer elements when they are hovered.

Input Color – This setting affects the color of the text inside the input elements when they are filled in.

Input Bg Color – This setting affects the color of the background of the input elements.

Input Style – Change the style of the input fields from underlines to boxes.

debug mode

Debug Mode – If you are having trouble with the Stack, you can enable this mode to have the console display a log of what is happening step by step. We only recommend enabling this option when contacting support to help resolve an issue.

Answer Type Descriptions

Text – Create a simple clickable text link. If this link is clicked, Siphon will automatically advance to the next slide and the field’s value will be applied to the Slide’s Short-Code (See “Using Short-Codes” below for more info).

Content – Create a simple clickable link out of an image, button Stack, or any other 3rd-party Stack. If this link is clicked, Siphon will automatically advance to the next slide and the field’s value will be applied to the Slide’s Short-Code (See “Using Short-Codes” below for more info).

Input Field – A basic input field that allows form users to provide numbers, email addresses, or a short amount of text. The input field has a built-on confirm button that displays once the field has been focused. You can make the confirm button always visible by using the “Always Visible Confirm Button” option in the Settings Panel.

Text Field – A basic input field that allows form users to provide large amount text. The input field has a built-on confirm button that displays once the field has been focused. You can make the confirm button always visible by using the “Always Visible Confirm Button” option in the Settings Panel.

Checkbox – A clickable checkbox that does not cause Siphon to automatically advance to the next slide. If the checkbox is checked, it’s value will be applied to the Slide’s Short-Code. If the checkbox is left unchecked, it’s value will be blank. Note: The Checkbox uses Font-Awesome Icons and the Font-Awesome Stack must be added to the page in order for checkbox to display.

Radio Button – A clickable radio button that does not cause Siphon to automatically advance to the next slide. Radio button’s can be group together by giving them matching “Radio Group ID”s in the Settings Panel. Only one Radio Button can be enabled per group. If a radio button is enabled, it’s value will be applied to the Slide’s Short-Code relative to the Radio Buttons position in this slide. If the radio button is disabled, it’s value will be blank. Note: Each Radio Button acts as it’s own input field that has it’s own short-code. See the tutorial “Using Multiple Answer Types in a Single Slide” below to learn how to get the short-codes for slides with multiple inputs.

File – This input is solely for allowing form users to upload files. Note: This Answer Type does not serve well in the case of displaying values or advancing to conditional slides. 

Using Short-Codes

To Display a Previously Given Value –  Take the Slide ID (of slide that contains the value you want to use) and wrap it in brackets [ ]

For example, if I had a slide with the id “slide3”, I would place the short-code

[slide3]

anywhere text is accepted in any following slide. That short-code will be replaced by the value given by the form user.

In the Submit / Email Data Slide – You can also use short codes in the From and Email Subject fields of a Submit / Email Data slide. If you have a slide that collects the form user’s email address use that slide’s ID in the Reply To field. Do not include the brackets when placing the slide’s ID in this field. You can also include multiple short-codes in the Email Subject field to help you quickly identify the contents of the email message.

Using Multiple Answer Types in a Single Slide

You are able use multiple Input fields, text fields, checkboxes, radio buttons, and files in a single slide. However, you cannot use any Answer Type that is tagged “Submits on click” as these options will automatically navigate to the next slide if clicked.

Multiple Input Field Short-Codes

When you want to create a short code for an input field value that comes from a slide with multiple Answer Types, you will need to reference which value you want to use by adding a dash (-) followed by a number representing it’s placement order. For example, If I had two input fields and one text field in a single slide, and I wanted to get the value from the second input field, my resulting short-code would be

[slide3-2]

slide3 example

 

Creating an Autoreply

When setting the Slide Type to “Submit / Email Data”, you will have the option to send an automatic reply message when a user submits the form.

Add your email address to the “Autoreply From” field to allow users to reply to your automated message. You can add a value like “No-reply” if you do not want users to be able to reply to the message. The subject and body fields support short-codes so that you can add information gathered by the form (like a name for instance).

Note: If one of the slides has not asked the user for their email address, the Autoreply will not have an address to reply to. The Submit Slide From field will need to contain the Slide ID of the slide that gathers the user’s email address.

short-code email address

Creating a Custom Email Format

The “Submit / Email Data” Slide Type will send a message with the user’s answers to the email address you specify. By default, when a user submits the information, the message sent to your email will contain all the answers given by the user separated line by line. To create a custom layout and to make the email more readable for your specific needs you can enable the “Custom Email Format” option.

custom format

This will allow you to use short-codes to organize the slide answers, adding titles and grouping them together.

Email Troubleshooting – Submitting to an Address Not Associated with Your Domain

Siphon includes an option titled Declare Custom “From”‘. Enabling this will allow you to set a value for the PHP email “From” Header. This is useful if you are having trouble getting your message to send to an address not associated with your domain. After enabling this option, place your domain email address in to the new field titled “From”.

custom from

Creating Multiple Branches

You to create multiple branches in Siphon with each branch having their own submit and end slides. This way you can combine multiple forms into a single Siphon Stack.

multi branch flow chart

Lets say you wanted to create a multiple branch form like in the illustration above. The grey box shaped like a chat bubble would be slide ID: s1 while the branch on the left would be slides: red1, red2, and red3. We will ignore the other two branches as they will be set up the same way the red one will be.

s1 would ask a question and give you three answers to choose from: Red Branch, Green Branch, and Blue Branch. 

For slide red1 we will set it to display after slide s1 has the value Red Branch.

has value

Slide red2 will then need to be set to display after slide red1 “Has Any Value”. The “Has Value” field should be left blank as it does not mater what value is given in slide red1, this slide will display always after slide red1.

has any value

If we had set slide red2 to display Automatically it would have displayed regardless if slide red1 was displayed at all.

Slide red3 would then also need to be set to display after slide red2 has any value.

Siphon includes an example file showing you how to set up multiple branches. If you need to re-download the example file you can use this form.

How to Use the ‘If’ Stack to Display Conditional Content

The included If Stack can be used to show conditional content in a slide depending on how a user has answered a previous slide.

For example, you can show a coupon code to form users who input a value greater that 10 in previous slide. If we created a slide with the id “i1” that asks the form user how many t-shirts he wants to order, we could use the If Stack like so:

The stack functions as if you were reading it from top to bottom. In the above screen shot it would read:

“Show this content if slide key i1 is greater than 10 and (if) slide key i1 is less than 20”

Then whatever you place inside the “Drop stacks here” section would only display if the form user says he is going to be more than 10 t-shirts but less than 20.

Note: This Stack would need to be placed in a slide after the slide with the ID “i1”.

Siphon includes an example file showing you how to use the “If” Stack. If you need to re-download the example file you can use this form.

Using AJAX to Submit to a PHP File For Data Processing (Advanced)

ajax to php

This Slide type is meant for those users who know a little about PHP and have or will write a custom script to handle the submitted form values. The values will be posted to a custom URL. The posted values can be used like so:

<?php
$data = $_POST["submitted_data"];
?>

 

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

Live Data

Setup

1. Create a new or open a saved spreadsheet in Google Docs: http://docs.google.com/spreadsheets

2. In your RapidWeaver Stacks’ page, place the Live Data Stack at the top of the editor.

3. In order to import data you will need to obtain a key from your Google Spreadsheet. In the settings panel click the “Show Obtaining Key Tutorial” checkbox to learn how to get your key.

spreadsheet key

3a.(Optional, skip if you are not using tabs in your spreadsheet, if you don’t know what I am talking about it’s best to skip this step) Change the Tab # value to match the tab you want to use (tabs are found at the bottom of the Google Spreadsheets editor).

3b.(Optional, skip this step if you only plan on using one Live Data Stack) In order to use more than one Live Data Stack to import multiple spreadsheets, you will need to create a unique Shortcode ID for each. The ID is case sensitive and should not have spaces or contain any special characters (-_+=!@#$ etc).

id to ratings

4.  You will be using short-codes to let the Stack know where you want data to be placed and to declare what cell in the spreadsheet to use.

What is a Short-code?
A short-code is a short line of code that lets you do things with little effort. Short-codes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Short-code = shortcut.

In the example short-code below, the first part “data” is the Shortcode ID of the Live Data Stack and the second part “A1” is the cell location of the data to use.

[data-A1]

After creating a short-code, you can place it anywhere text is accepted.

Example:

If you have changed the default Shortcode ID from “data” to “ratings”,

id to ratings

and in the spreadsheet that you have gotten a key from has a value in cell G3 that you want to use, your resulting shortcode will be:

[ratings-G3]

Place this code anywhere text is accepted to have the value from cell G3 display in that location.

shortcode example

You can import as many cells as you need to from the spreadsheet. I.E. [ratings-A1], [ratings-B3], [ratings-AA22], etc, all on the same Stacks page.

Note: The shortcode is case sensitive and requires the dash between the Shortcode ID (ratings) and the Cell location (G3).

Additional Settings

 Live Updating – Enable this option if you want the data to update at timed intervals. This will allow that data to update without your page visitor reloading the page. After enabling this you can set how long in seconds the Stack will check the spreadsheet for updates.

Example – Using Live Data with IFTTT and Super Forms/Siphon

In this example we will be using an automated recipe service called IFTTT along with the Super Forms Stack or Siphon Stack to create a form users can fill out that will automatically send data to a Google spreadsheet. This tutorial assumes you have already gone through the basic setup for the Live Data stack found in the tutorial above.

The result will be the same as the example found on the preview site for Live Data under the heading “Stacks Integration”.

stacks integration

Part 1 – IFTTT

1.  Log into your IFTTT account or create an account (It’s Free). IFTTT stands for IF This Then That, which in our example will mean, IF This(someone submits a form using Super Forms) Then That(store the data from the email in a Google spreadsheet).

2. Once logged in to IFTTT, click on your user name in the menu in the top right corner, a dropdown menu will appear, now click on “New Applet“. We will be creating a new recipe that does the work for us.

3. In the new page, click on the word “THIS” written in big blue letters. We will be setting what needs to happen first.

4. In step 1 of setup for your IFTTT recipe, search for “email” and select the icon labeled “email”.

5. Then in step 2 select “Send IFTTT an email tagged”. This option means if the IFTTT email address trigger@recipe.ifttt.com receives an email from your account’s email address (the address associated with your IFTTT account) with a specific tag in the subject line, it will execute your “That” part of the recipe, which we are about to define after this. Don’t worry if it’s not making much sense yet, just follow the steps and once we are done you can see it in action.

6. You can create any tag that you deem relevant, but for our example we will use “#rating“. Click “Create Trigger” to proceed.

7. In the new page, click on the word “THAT” written in big blue letters. We will be setting what needs to happen after the email is received.

8. In step 3 search for “Google Drive” and click on the Google Drive icon.

9. Then in step 4 select “Add row to spreadsheet”. This will create a new row in your spreadsheet containing the information sent in the email from the “This” part of the recipe.

9. In step 5 of the IFTTT recipe setup, change the “Spreadsheet name” field to something appropriate, we will be naming our spreadsheet “Ratings”. You can leave everything else as it is and click “create action“.

10. In step 6 you will see a summary of the applet you have created. Take note of the email address “trigger@applet.ifttt.com” and the address associated to your IFTTT account, these addresses will need to be used in the Super Forms or Siphon Stack.

Note: The applet address has been changed in the past, double check this step to see the current address is still the same.

Click “create recipe” to finish the applet setup.

11. Now we need to test the applet to make sure everything was setup correctly. Log into your email (Must be your email address that was listed in Step 6 of the applet creation process) and send an email to the address trigger@applet.ifttt.com with the subject line containing your hash tag, in our example it is “#Rating”. In the body we will be placing a number to represent a rating.

Click send, and wait a few seconds. Log into your Google Spreadsheets (https://docs.google.com/spreadsheets) and you should see your new spreadsheet under “Recent Spreadsheets”. If the spreadsheet does not show up, be sure to check your applet for typos. If you still have trouble you may need to contact IFTTT support for help.

Part 2 – Super Forms / Siphon & Google Spreadsheets

1. In your RapidWeaver Stacks page, add Super Forms or Siphon to the editor.

Super Forms:  Add a Select field Stack.

super forms

Siphon: Add 5 answers to the first slide by clicking the “Add New Answer” button.

2. Create the selectable values.

Super Forms: Edit the Select field Stack’s options to have selectable values between 1 and 5. We have also placed a title above the Select field “How are you feeling today?”.

options

Siphon: Change the first slide’s question to “How are you feeling today?” and add text to each of your answers listing the numbers 1-5.

answers

Siphon: Each answer needs to have a “Value” associated with the text in the answer.

answer value

3. We will need to edit some values in Settings Panel to get it to submit it’s emails to IFTTT.

Super Forms: In the “Email” field put trigger@applet.ifttt.com, In the subject line put the tag you created in step 6 above (Step 3 of the IFTTT recipe setup), for our example it was #rating. Then in the settings panel under the heading “Troubleshooting” enable “Declare Custom ‘From'” and type in your own email address (the email address you used to sign up for IFTTT) into the email field below it.

Siphon: Add a new slide and change it to a “Submit / Email Data” slide type. In the settings panel for that slide, add trigger@applet.ifttt.com to the “To” field. In the “Email Subject” field put the tag you created in step 6 above (Step 3 of the IFTTT recipe setup), for our example it was #rating. In the “From” field type in your own email address (the email address you used to sign up for IFTTT).

submit slide

4. Publish this page and after it is published, navigate to the page online and use the form to see if it is working. If the email sends successfully you can go to Google spreadsheets and see if IFTTT has automatically created a spreadsheet with the data. If everything worked you will find a spreadsheet titled “Send IFTTT an email tagged“.

IFTTT doc

5. Inside the document you will see a row similar to the screenshot below.

spreadsheet

Notice that the value “5” is being added the the D column. Every time someone submits an email using the Forms the email body will appear in this column.

Super Forms: We need to remove the text from this column to find an average value so we will select cell E1 and add the formula:

=SPLIT( LOWER(D1) , "abcdefhijklmnopqrstuvwxyz:" )

Siphon: We will not need to filter any text out, skip to step 16.

cell e1
Super Forms: This will move the value from column D into column E without the text. Now we just need to copy the formula into the entire E column. To do so, highlight and copy (Cmd + C) cell E1 and then click on the E above that cell to highlight the entire column then paste (Cmd + P).

highlight column

6. Now we just need to find the average by using the formula:

Super Forms:

=AVERAGEIF(E1:E, ">0")

You can place this formula in cell F1. This will find the average of all the values in column E. We do not have much data now but as page visitors use the form more values will appear.

Siphon:

=AVERAGEIF(D1:D, ">0")

You can place this formula in cell D1. This will find the average of all the values in column D. We do not have much data now but as page visitors use the form more values will appear.

7. Finally, you will just need to set up Live Data (just like in the Setup tutorial at the top of this page) to use cell F1.

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

Frontend

HTML Element Settings

html settings

Element Tag – This field is where you will declare what type of HTML element to use. Accepts any valid HTML element (div, section, article, a, input, img, etc). Note: The element that is created will not be wrapped in Stacks’ standard div elements.

Classes – Optionally declare an unlimited amount of CSS classes. Each class should be separated by a space. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

ID – Optionally declare a single ID for the element. Your ID should be unique and not contain any spaces. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

Href/Src – Use RapidWeaver’s link window to set a link to a page or resource. This field is only visible if the element has been set to “a” or “img” element.

Attributes – Optionally add any custom attribute. The attribute should be added in the following format with the equal sign and quotation marks added: attribute-name=”attribute-value”

Content Type – “Wrap” will allow you to nest other HTML elements and stacks inside this element. “HTML text” will allow you to type in text, which is useful if your element is a header or paragraph tag. In the image below, the top element is set to “Wrap” while the bottom is set to “HTML text”. The element type will display in the Stacks’ editor as well as the assigned class names to help with organization.

breakdown

 

CSS Settings

CSS Only / Remove Element – Enable this option if you do not wish to create a new HTML element but declare a CSS Rule instead. Once enabled the HTML element will be removed and the CSS Selector Title will display in the Stacks’ editor. This title will only display in edit mode and wont add anything to the actual published HTML. All of the declared CSS will be added the the current page’s Stacks CSS file.

Element Selector – By default this field is set to “[this]”. This value will automatically apply a random generic classname to the element and apply all of the non-default CSS to this element only. To apply the non-default CSS to elements with a specific class you can create a unique classname.

To create a classname type a period ( . ) into the “Element Selector” field, this period stands for “class”. Follow the period by typing any unique name. The name must begin with a letter (a–z) and accepts more letters, numbers, hyphens ( – ), and underscores ( _ ) with no spaces in-between. The name must also be at least 2 characters long.

Good Examples:

.myClass
.my-class
.my_class
.myclass2

Incorrect Examples:

.my class (has a space)
.2myClass (begins with a number)
.&my-class (contains unsupported "&" character)

You can then add this classname to any HTML element’s “Classes” field to have the CSS apply to it. Since this field is specific to classnames you will not need to add the class symbol (or period symbol) to the name when entering it into this field. Each classname you add should be separated by a space.

Note: If you leave the “Element Selector” field blank none of the CSS rules will be applied.

Single class example:

classnames

 

An advanced selector example with IDs and element selectors:

detailed name

CSS Rules – An explanation of every CSS rule will not be detailed in this tutorial. We recommend checking out w3schools for a property by property explanation.

CSS Properties

Custom Rules and Media Queries

custom feilds

If there is a rare CSS rule that is not listed in the settings panel you can add it to the “Custom Rules” fields. Additionally if you need to add an “!important” tag to a specific field you can declare it here as well. To do so, list the rule title followed by a colon (:) and then the value. You will not need to add a semi-colon(;) to the end unless you wish to declare a second rule in the same field (good for copy and pasting large amounts of CSS rules).

Media queries can be declared for responsive purposes. To add a media query size declaration first type in “and” followed by the rule encased in parenthesis. You can add multiple size declarations in a single field as long as each is prefixed by the word “and”. For example, “and (max-width: 1000px) and (min-width: 600px)” can be typed into the same field as opposed to one in each of the two fields.

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

Walkthrough

Setup

walkthrough core image

1. Before adding the Walkthrough Stack to your Stacks page you must add the Walkthrough Core Stack. This Stack will enable all the Walkthrough Stacks you add to your page. The Core stack must be placed above the other stacks and preferably at the top of your Stacks page.

core at the top

2. Drag Add drop a Walkthrough Stack above the Stack element you want to highlight. In this example I will be highlighting a “Text” stack.

walkthrough stack

above the element

3. Now grab the Stack element you want to highlight ( “Text” stack in this example) and drop it into the top “Drop stacks here” section, above the chat bubble in the Walkthrough stack.

nested element

4. Repeat steps 2-3 until you have added as many steps as you want to display.

Note: After you are done with setup, select the first Walkthrough Stack you added and change it’s Secondary Button “Function” to “Close Steps” or “None”. If you leave the function as “Previous Step” there will not be a previous step to go back to.

close button

 

Customization Options

Walkthrough Core Stack

The Walkthrough Core Stack is where you will find the global settings and color settings for all of the notice/alert chat bubbles.

Activate – Setting this to “On Load” will make Walkthrough automatically start when the page has been loaded. Setting this to “On Hover” will make Walkthrough start whenever the visitor hovers the mouse pointer over any of the Walkthrough elements, once the Walkthrough has been closed it will not re-initiate. Setting this to “On Click” will make Walkthrough start when any part of the Walkthrough elements have been clicked.

Delay – Set how long in seconds to delay initializing Walkthrough. This option is only available if the “On Load” Activate setting has been selected.

Width – This sets how wide all of the Walkthrough notice/alert chat bubble will be.

Show Header Close Icon – Enabling this will display an “X” icon in the top right of the Walkthrough chat bubbles.

Overlay & Transparency – These color settings allow you to place an overlay behind the active element to hide or fade the rest of the web page, bringing focus to the the active element. To remove the overlay just set the Transparency value to 0%.

Walkthrough Stack

Some options need to be set specifically per element. The Walkthrough Stack is where you find these specific options.

Scroll to Element – Enabling this will cause the browser to automatically jump to the location of the element when it is highlighted. If this is disabled, the chat bubble will still appear in the window and will attach to the element when it is scrolled into view.

Show Header – Enable this to show a colorable header to the chat bubble.

Header Title – Add a title to the Header of the chat bubble. This option is only available if “Show Header” is enabled.

Order – Set the order (in increasing numbers) that the steps will appear. Setting the value to “1” will make it appear before “2” and so on.

Position – Select where you would like the chat bubble to appear in relation to the highlighted element. You can also choose “Center in the Window” to display the chat bubble in the center without highlighting any element.

Secondary Text – Change the secondary button’s text

Secondary Button Function – Choose what the button will do when clicked. You can have it navigate to the previous step, close the Walkthrough, Navigate to a custom link, or you can remove the button.

Primary Text – Change the primary button’s text

Primary Button Function – Choose what the button will do when clicked. You can have it navigate to the next step, close the Walkthrough, Navigate to a custom link, or you can remove the button.

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

Page Flux

Setup

1. Add the Page Flux stack to any part of your stacks page and it will automatically be enabled for that page.

2. Adjust the options in the settings panel till you get the animation and colors you want to use. While in edit mode, Page Flux will show examples of the selected in and out animations as well as display the currently selected loader and styles. Selecting a new animation option will cause the examples to reanimate, giving you a general idea of what the animations will look like.

3. Add a single Page Flux to each of your websites pages to ensure the animation is fluid between all pages.

Importing Page Flux into a non-stacks page

You can add Page Flux to non-stacks pages by importing it using the PlusKit plugin.

1. Add the PlusKit plugin to your RapidWeaver project. This will allow you to import Stack pages into non-stack pages.

add pluskit

2. Now you will need to add a new stacks page to import into your preferred non-stacks page.

add new stacks page

3. Give a unique title to this new stacks page, in this example we will be simply calling it “Page Flux”.

page flux page title

4. Add the Page Flux stack to this blank stacks page and style it how you would like it to animate. Be sure to open the Page Inspector > General Settings and disable “Show in navigation” so that this page does not show up on your site as it’s own standalone page.

disable show in navigation

5. Navigate to the non-stacks page you wish to import Page Flux into and open the Page Inspector > Sidebar. Add the code below into the sidebar and replace “PageNameHere” with the title you created in step 3.

@import((PageNameHere))

For our example the import code would be “@import((Page Flux))”. Note: The page name is case and space sensitive.

 

 

import page flux

 

6. Highlight the  import code and select “Ignore Formatting” from the “Format” dropdown menu.

ignore formatting

Options

Animation Settings

In Animation – Sets how the page will animate in when it is loaded.

In Duration – Controls the speed of the In Animation.

Out Animation – Sets how the page will animate out when a new page is loading in.

Out Duration – Controls the speed of the Out Animation.

Use Overlay Animations – Enable this option to replace the animation in and out options with overlay animations. Note: If using Overlay animations it is recommended that you use them in every page of your website. If one page does not have the overlay the effect can be lost.

Loading Settings

Loader  – Choose an loading icon animation. You can also use a custom image that display while the page is loading.

Size – Controls the size of the loader

Speed – Sets the speed at which the loader rotates or animates.

Override Theme Body Color – Enable this option to set the color of the background. This will keep the background from flashing white in-between page loads.

 

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

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

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
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/">
RSS

Live Search

Setup

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.

Bellow 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

Pagination

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, please contact 1LD support 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.

<!--NOSEARCH-->

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.

<!--NOSEARCH-->

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
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/">
RSS

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.

Naming

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: http://fontawesome.io/icons/

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
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/">
RSS

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.

Colors

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
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/">
RSS

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.

Realmac-linkedin

 

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 https://developer.linkedin.com/plugins/follow-company. 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.

Realmac-linkedin

 

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.

Realmac-linkedin

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
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/">
RSS