Unlimitab

Table of Contents

• How to use (Start Here)
• General
• Navbar
• Content
• Individual Tab Settings

---

---

How to use

Get up in running with Unlimitab in Minutes!

Unlmitab is a fairly easy stack to set up on your page, even though there are a lot of customization options, actual setup is very simple.

Step 1

Drag the stack onto your page

Step 2

Add tabs using the ( + ) button at the bottom of the main Unlimitab Stack

You can change the tab text by double clicking on the "Tab text" input directly in RapidWeaver. You can also set custom colors for an individual tab by clicking on that tab, and going to the RapidWeaver settings panel.

By Default all tabs share the same colors & styles which are set by the main Unlimitab Stack.

Step 3

Add your content to each tab

Step 4

Customize your look.

Step 5

That's it!

Let's take a closer look at all of the settings in detail below.

---

---

General Settings

This is where you will find the main settings for the container surrounding all of the tabs. You'll find things like:

• Max-width
• Mobile Point
• Margin
• Padding
• Radius
• Background
• Shadow

Most of these settings are pretty straightforward and easy to setup. The only setting to pay close attention to is the mobile-point option. This mobile point will determine the the pixel-width at which all of the mobile settings will be applied.

---

---

Navbar

The navbar is the container that holds all of the tab pills, the navigation arrows, and the dropdown menu. You will find all of the settings for these areas of the stack here. We will go through each of the options below in detail so that you can understand what they mean.

Radius

This sets the corner roundness of the navigation-bar containing the tabs.

Navbar Background

Here you can set a background for the navigation-bar. There are 4 options to choose from:

• None
• Color Background
• 2 Color Gradient
• 3 Color Gradient

Font Type

Here you can set a separate font for the Navigation bar. There are 4 options to choose from:

Inherit

This will inherit from the nearest parent stack

Preset

Choose from a list of the top fonts which have been praised on the web.

Custom Font

This allows you to specify the name of a font which you have provided on your own. Keep in mind that you must have provided the font elsewhere on your stacks page.

Custom Google Font

Here you can provide the name of a font found on Google Web Fonts, and the font will automagiacally be loaded in for you. All you need to do is type in the name such as "Squada One".

---

Tabs

Here you will find specific settings for the tabs in the navigation bar.

Blur Inactive Tabs

This will use the latest web-technology to blur out the tabs that are inactive. Note that this may not work on older browsers such as IE 9 and below.

Tab Alignment

This will set the alignment of all the tabs inside of the navigation-bar. You can align the tabs to the:

• Left
• Right
• Center

Tab Spacing (Vertical & Horizontal)

Here you can set the space around the tab text.

Vertical refers to the amount of space above and below the tabs. Think of it as the top and bottom margins.

Horizontal refers to the amount of space in-between each tab.

Tab Border

Here you can choose whether or not tabs will have a small border above/below them. If you choose to set a tab border you can also choose:

• Tob/Bottom positioning

Choose whether the border should be placed above or below the tabs.

• Border Radius

The border is slightly rounded on the edges. You can set the roundness here.

• Border color inheritance

The border color inheritance refers to whether the border color should match the tab text or the tab icons.

---

Tab Text

Color (Active & Inactive)

Here you can set the color of the tab text. You can set both the color of the active tab and the inactive tab.

Text Size (Desktop & Mobile)

Here you can set the font-size of the tab text. You can specify different values for both desktop and mobile.

---

Tab Icons

Checkbox (Turn icons ON/OFF)

Check this box to turn tab icons on. This will make icons appear above/below/next-to each tab (your choice).

Color (Active & Inactive)

Here you can set the color of the tab icons. You can set both the color of the active tab icon and the inactive tab icons.

Size (Desktop & Mobile)

Here you can set the size of the tab icons for desktop & mobile.

Spacing (Desktop & Mobile)

Here you can set the amount of space between the tab text and the tab icons for desktop and mobile.

Icon Position (Top, Bottom, Left, Right)

Here you can choose the position of the tab icons in correlation to the text.

---

Navigation Arrows

On each side of the navigation-bar you will find navigation arrows that move through each tab when clicked. You will find the options for editing these arrows here.

Hide Arrows on Mobile

Unlimitab is touch-friendly meaning that the arrows on not necessary on mobile devices. Users are very fond of swiping through tabs on mobile nowadays, so we have provided an option to hide the arrows on mobile. Check this box if you want the arrows to be hidden on mobile devices.

Arrow Colors (Icon & Button)

Here you can set the color of the navigation arrow buttons. You can set the color of the arrow icons and the buttons surrounding the arrow icons.

Arrow Size (Icon & Button)

Here you can set the size of the navigation arrows. You can specify the size of the arrow icons and the size of the buttons themselves. Keep in mind that the buttons are perfectly quadrilateral meaning that the width/height are the same.

---

Navigation Dropdown

Unlimitab automatically creates a dropdown menu from your tabs. The navigation dropdown menu is locating in the top right corner of the navigation bar. You can customize the navigation bar here.

Max Width

This specifies the width of the navigation dropdown menu.

Radius

Here you can set the corner roundness of the navigation dropdown-menu.

Item Text

This sets the font=size of the dropdown-menu item text.

Item Padding (Vertical & Horizontal)

This sets the vertical and horizontal padding around the dropdown-menu items.

Item Color (Initial & Hover)

Here you can set the color of the dropdown-menu item text initially and on hover.

Item Background (Initial & Hover)

Here you can set the background color of the dropdown-menu items initially and on hover.

---

---

Content

Here you will find all of the options for the content section of the tabs.

Content swipeable

If you check this option. When the user swipes the content with their mouse/finder Unlimitab will move the the next tab in the stack. Think of it as a tab on a mobile-application.

Drag Threshold

If the content is set to swipeable, you can specify how far (in pixels) the user must drag their finger before the slider moves to the next tab. Think of it as the swipe strength required to swipe through tabs via the content section.

Keep in mind that this only applies to the content section. The tabs in the navbar are always swipeable.

Min-Height

Some content sections may be of completely different heights and it may look strange if the heights suddenly change. Here you can specify a minimum height for each content section.

Radius

This sets the corner roundness of the content section.

Padding

Here you can set the inner padding of the content sections.

Spacing (From nav & Between content sections)

Here you can set the amount of spacing around the content sections. You can set the spacing for:

• The space between the navigation-bar and the content sections.
• The space between each of the content sections (visible when swiping through tabs)

Font Type

Here you can set a separate font for the Content sections. There are 4 options to choose from:

Inherit

This will inherit from the nearest parent stack

Preset

Choose from a list of the top fonts which have been praised on the web.

Custom Font

This allows you to specify the name of a font which you have provided on your own. Keep in mind that you must have provided the font elsewhere on your stacks page.

Custom Google Font

Here you can provide the name of a font found on Google Web Fonts, and the font will automagiacally be loaded in for you. All you need to do is type in the name such as "Squada One".

Content Background

Here you can set a background for the content-sections. There are 4 options to choose from:

• None
• Color Background
• 2 Color Gradient
• 3 Color Gradient

Text Colors (Headers, Links, Text)

Here you can set the color of text that appears in side of the content sections. You can set the color for:

• Header tags
• Links
• Text

Border

Set the border around the content sections

Shadow

Set a box-shadow around each content section.

---

---

Individual Tab Colors

If you click on an individual tab, you will see that there are toggle-able options to set custom colors for that tab. Simply toggle the color option that you want to change, and set the color. Then when that tab is selected, the colors will change.

Lastly, when Icons are turned on, you must click on the individual tab to set the icon for that tab. You will find the option for setting the tab icon at the very top of the Unlimtab Tab Stack settings.

---

---

That is all

Thank you for taking the time to read this tutorial. Cheers!