You can access the styles by clicking on the main Settings stack found at the top of each page. The Deluxe Settings stack is placed inside of a Stacks plugin partial. If you are unfamiliar with partials you can learn about them at https://yourhead.com/partials/

In the settings panel are the default settings for the entire project. These settings can be overridden by presets, classes, and by any styles applied directly to any stack. Most of the settings are straight forward with a few exceptions:

Vert. Margin
Adjusts the vertical (top and bottom) margin of all Heading and Paragraph Text stacks.

Set Font Family
Enable to define a custom font for the entire site. Here you can add the name of a font you want to use that you have loaded through a font stack like Webfont Helper. There is also a second setting in the "Headers" section if you would like to declare a separate font for the headings.

Line Height
Adjusts the distance between lines of text by percentage. This is most useful for paragraphs or titles that cover more than just a single row of text.

Horz. Spacing
Adjusts the horizontal spacing between the text letters and the space between each individual word. In most cases these values should be left at 0.

Element Settings
Here is where you can select an element type. Each of these types will function the same way with each option having different pool of preset styles to choose from.

There is also and optional "ID" field where you can define a unique value. This is useful if you need to create a link to the element somewhere else on the page that you want to scroll to. See the Creating "Scroll To" Links tutorial for more info.

Lastly, there is an option to hide the entire element at deferent devices sizes.

Preset/Shared Styles
This section is for selecting a preset style for the element tag/type. The presets can be found in the main Settings stack at the top of each Stacks page. Only certain elements will have presets and when a preset number that has a definition is selected, the description title will show at the top right of the stack inside the editor.

Classes
There is also a field were you can add multiple class names to have any styles associated with those classes apply to this element. You can learn more about classes in the Creating & Using Classes tutorial.

Style Sections
There are 4 style sections: Background, Border & Shadow, Layout, and Inner Text. By default, all of the styles are disabled and only styles inherited from presets or classes will apply. If you enable a style, the inherited styles will then be overridden. This is useful when you want to make a change to a singular element or if you would rather style your elements one by one.

Most of the style options function just like they do with the built-in Stacks. However 2 exceptions are the Width and Height settings, which will be gone over in the next 2 documentation sections.

Share Styles By Class Name
This section allows you to define a unique class name that can be shared with other stacks to inherit any styles you have defined. You can learn more about classes in the Creating & Using Classes tutorial.

Inner
Select this option to define the max width of the inner content of the Element stack. This option is most useful for defining a content width for you entire project.

Outer
Select this option to define the max width of the entire outer element.

Define
Select this option to define a specific min height of the Element stack. There are also 3 options for aligning the content vertically and a single option for spacing adding space between the inner stacks.

Percent
Select this option to define a min height by percentage of the height of the browser window. This option allows the height to adjust according to the size of the browser or device. This option is great for when you want to create content sections that fill the entire browser window regardless of how much content there is.

The Link Element stack is an extension of the Element stack and it functions identically to it. There are a few differences related to creating links. The first is that there are only 2 "Tag/Type" element options.

<a> Button
This element type does not have a "Drop stacks here" content section and instead has a special field for you to define the link's text or title. There is also an option to set where the link navigates.

<a> Element
This element type allows you to add other stacks to the link content. This is useful for adding icons, columns and other stacks.

The Columns stack is the equivalent of the Stacks plugin 2-5 Column stacks. This stack allows you to make up to 12 columns and has a few additional settings for achieving more advanced layouts.

Column Count
Set how many columns you want to use

Gutters
Adjust the spacing between each column

Column Align
Will allow you to change how the columns align vertically & horizontally with each other.

By default columns will not collapse for mobile devices and narrow browser windows, you must enable Responsive Settings. When enabled, you can define two device widths that have corresponding Column Count settings. Each value represents how many columns can display on a single row with the left over columns breaking to the next row/s.


Last Col. Width
There is also a setting that allows you to set the width of the last column. This allows you to fill any remaining horizontal space.

Hiding/Showing Stacks
The breakpoints values will change the size at which the stacks hide or show when using the "Hide This Stack" option on Element stacks inside the columns stack.

After adding the Deluxe Tools stack to the editor, select the "Video" tool in the stack settings menu. Then add the URL of the video you want to use.

Thumbnail
Optionally add an image to this field to display a static image before the video is played.

Play Icon
When this is enabled, it will display an icon above the video thumbnail to prompt users to play the video.

Any stacks content can be added to each slide (Image, Text, or other 3rd-party stacks). In preview or when published, each slide will display one at a time filling all available space to the left and right. The settings menu provides a few different options for defining how the slider navigates.

Show Arrow Navigation
Enables left and right arrows that users can use to navigate through the slides.

Allow Swipe/Touch Navigation
Enables the ability to click and drag or swipe the slides to navigate.

Autoplay
Enables automatic timed slide navigation. Autoplay will stop while the mouse cursor is over the slider.

Pause Time
Define how long the slides remain stationary when autoplay is enabled.

Transition Speed
Define how fast in milliseconds the slide transitions to the next when navigating or during autoplay.

L/R Padding
Optionally define left and right padding for the slider. Slides will not fill in this padded area but the arrow navigation will if it is enabled.

The settings menu provides a few different options for defining how the slider navigates when the gallery lightbox is open as well as how the gallery displays.

Show Arrow Navigation
Enables left and right arrows that users can use to navigate through the slides.

Allow Swipe/Touch Navigation
Enables the ability to click and drag or swipe the slides to navigate.

Transition Speed
Define how fast in milliseconds the slide transitions to the next when navigating.

L/R Padding
Optionally define left and right padding for the slider. Slides will not fill in this padded area but the arrow navigation will if it is enabled.

Columns
Number of columns displayed before the lightbox gallery is launched. If more than 2 columns is defined mobile size device/browser windows will display a maximum of 2 columns.

Gutter
The space between each image in the columns.

Element Settings
Here is where you can select an element type. Each of these types will function the same way with each option having a different pool of preset styles to choose from. The only exception is "<span> Loose Text" which includes one additional setting:

Non-Wrapping Text
When this is enabled the text will not wrap to a new line unless explicitly defined by a line break. This is usually for visual purposes and is useful for preventing things like large text from breaking to multiple lines when the browser narrows.

Wrapping Text Example:

Non-Wrapping Text Example:

Preset/Shared Styles
This section is for selecting a preset style for the element tag/type. The presets can be found in the main Settings stack at the top of each Stacks page. Only certain elements will have presets and when a preset number that has a definition is selected, the description title will show at the top right of the stack inside the editor.

There is also a field were you can add multiple class names to have any styles associated with those classes apply to this element. You can learn more about classes in the Creating & Using Classes tutorial.

Text
By default, all of the styles are disabled and only styles inherited from presets or classes will apply. If you enable a style, the inherited styles will then be overridden. This is useful when you want to make a change to a singular element or if you would rather style your elements one by one. Most of the style options function just like they do with the built-in Stacks with a few exceptions:

Override Font Family
Enable to define a custom font this Text stack. Here you can add the name of a font you want to use that you have loaded through a font stack like Webfont Helper.

Override Margin
Adjusts the vertical (top and bottom) margin of this Text stack.

Override Text Spacing & Weight: Line Height
Adjusts the distance between lines of text by percentage. This is most useful for paragraphs or titles that cover more than just a single row of text.

Override Text Spacing & Weight: Horz. Spacing
Adjusts the horizontal spacing between the text letters and the space between each individual word. This is mostly useful for styling headings.

Share Styles By Class Name
This section allows you to define a unique class name that can be shared with other stacks to inherit any styles you have defined. You can learn more about classes in the Creating & Using Classes tutorial.

Navigation Settings
There are 2 main menu types for the Deluxe Menu stack. The horizontal menu serves as the main responsive menu for the project while the vertical menu serves as an optional full list of page links that can be displayed in a sidebar or footer.

A new "One Page" option was added with the release of the Alex Solus Project. To learn more about how to use this menu see the Using the One Page Menu tutorial.

A new "Off Canvas" option was added with the release of the Forma Project. To learn more about how to use this menu see the Using an Off Canvas Menu tutorial.

Menu Item Settings
This section of styles functions similarly to the Text stack styles. By default, all styles are inherited from he main Settings stack.

Override Font Family
Enable to define a custom font the menu items. Here you can add the name of a font you want to use that you have loaded through a font stack like Webfont Helper.

Override Margin
Adjusts the margin around each individual menu item.

Override Text Spacing & Weight: Horz. Spacing
Adjusts the horizontal spacing between the text letters and the space between each individual word.

Mobile / Submenu Styles
These settings modify the appearance of the dropdown menus as well as the appearance of the entire mobile dropdown menu.

Breakpoint
Define the device/browser width at which the mobile menu toggle displays instead of the menu items.

Mobile / Submenu Item Styles
These settings control the appearance of the link text in the dropdown menus as well as the entire mobile dropdown menu.

Fonts
Select a font from this section to get started. You can then enable "Test Font" to get an idea of how the font will look across different elements.

After you have selected a font, simply drag and drop the font in the editor outside of the the Webfont Helper stack. You will then need to delete the Webfont Helper stack from the editor to prevent the stack from uploading all 45 font files to your website.

Setup
First select an icon library from the "Icon Set" dropdown. At the bottom of the Settings section is a URL that you can right-click/ctrl-click to reveal a menu. In that menu select "Open URL".

This will open a list of usable icons with their icon names. Add the name of the icon you want to use to the "Icon Name" field. If you are using Material icons the icon names are found beneath the icons.

If you are using Ionicons 5 the icon names are found in the bottom right of the browser window after selecting an icon. You can omit the "-outline" or "-sharp" part of the name as the stack has a built in select option that will add it for you.

If you are using Font Awesome 5 the icon names are found beneath the icons.

You can allow any stacks image to open in a window overlay that appears on top of the page, this is referred to as a lightbox popup. All you will need to do is to add the following class name to the image stack:

deluxe-lightbox

To create a link that scrolls to an element first give the element (to be scrolled to) a unique ID. When creating the link, open the link settings dialog and in the link URL field add a # symbol followed by the ID.

Preset Settings
Select the "Tag/Type" of element you want to create a new preset for. Then select a preset number (1-10) to assign the styles to. Be sure to choose a number that has not already been defined by another Preset stack of the same "Tag/Type" (Each "Tag/Type" can have up to 10 presets defined).

Next, create a custom title/description for the preset in the "Description" field. This title only applies to the Stacks Editor to help identify what preset is currently selected by an Element stack.

Now all you will need to do is adjust the styles using the remaining settings fields. The settings are identical to the ones you find in the Element stacks. Any changes you make will automatically be inherited by any Element stack of the same type and preset number.

Apply Styles
In the Advanced section you can optionally select a condition for when the styles apply. By default (the checkmark icon) the styles will always apply. You can change it so that the styles only apply on:
Hover = when a mouse cursor is above the element
Active = when the element is being clicked (or is in focus for form elements)
Mobile = when the browser/mobile device window is below a certain breakpoint width

Presets with conditionally applied styles can and should be assigned to preset numbers that have already been defined without a condition. You do not need to redefine any styles that have already been defined by the non-conditional preset. For example, if you define styles for the Button/Link preset #1, you could then create another one for Button/Link preset #1 with "Apply Styles" set to "Hover". In this conditional preset you only need to define what you would like to change when the Button/Link preset is hovered, like a background color for instance.

Class Name
Here you can create a unique class name. The class name cannot contain spaces, cannot start with a number, and cannot use special characters other than dashes - and underscores _.

Applying the styles to another element
To apply the defined style to other elements simply add that class name to the "Classes" field.

Deluxe has a few predefined class names that you can use by simply adding them to the "Classes" field of an element stack. See below for a list of usable class names and descriptions.

Applies to image stacks only. Allows the image to open up inside of a lightbox on click.

Applies to the Deluxe Columns stack in a 2 column layout only. Allows the right column to appear above the left column rather than below it in tablet sized screens. This class should be applied to any stack located in the right column of the Deluxe Columns stack.

Applies to the Deluxe Columns stack in a 2 column layout only. Allows the right column to appear above the left column rather than below it in mobile sized screens. This class should be applied to any stack located in the right column of the Deluxe Columns stack. The class may be applied to any Element stack placed inside of the column you wish to effect.

Applies to the Deluxe Columns stacks with 2 or more columns only. Allows the column to stick to the browser/device window when the column content is scrolled. One of the columns must have content longer than the browser/device window height to allow scrolling. The class may be applied to any Element stack placed inside of the column you wish to effect.

Send To
This value needs to be changed to the email address you want the form messages to be sent to. If you would like to send to multiple addresses you can simply add more and separate them with commas.

Send From
If your Webhost requires that the messages be sent from an address associated with your domain, you must place a domain email address in this field, otherwise leave this field blank.

Subject
Controls the title or subject of each message sent from the form.

Use Google reCAPTCHA
Optionally enable Google reCAPTCHA to prevent spam messages. You must obtain keys for the captcha to work correctly. You can find your keys at http://www.google.com/recaptcha/admin.

Description

Whatever value the form user adds to this field will be appended to the subject field of the message.

Whatever value the form user adds to this field will display as their name. An input with this Name value is required for the php mail form to function correctly.

Whatever value the form user adds to this field will be used as the "Reply-to" field. When replying to the received message the reply will be sent to this address. An input with this Name value is required for the php mail form to function correctly.

Lastly, paste the copied value it into the form stack's "Action" field.

Each Page Settings stack will have its own settings where you can define the page title and url hashtag.

Page Title
This is the title of the page as it will display in the menu list.

URL Hashtag
Each page needs to have a unique URL Hashtag. This value is used when creating links to the page (IE www.yourwebsite.com/#about) and for displaying the page in the browser address bar. Do not add a # (hashtag symbol) before the value. The value cannot contain any spaces or special characters other than - (dashes) and _ (underscores).

Show link in menu
Optionally disable the page from showing inside the menu list.

After you have finished adding new pages and adding content to those pages, you can select the All Page Settings stack to change the navigation behavior between the pages.

Page Animation
Select a transition animation that runs whenever a user scrolls away from the current page or clicks a navigation link to another page.

Easing
This option effects how the animation moves over time.

Speed
Set the page transition animation speed in milliseconds.

Allow scrolling between pages
By default, users will need to use the menu list to navigate between pages. Enable this option to allow navigating through all the pages simply by scrolling through them.

Pages that require scrollbars due to long content will prompt users with a next or previous arrow to prevent accidental navigation.

The Element stack is where we can define a height and a background color for the off canvas menu. It's important to define a background color to prevent the menu from being transparent. It's also recommend that the Height: Percent: Min-Height be set to 100% to keep the menu the same size as the browser or device window.


You can also optionally add the "column-sticky" predefined class to the Element stack so that the menu and menu toggle is always visible when the column content is scrolled. You can find more info about the "column-sticky" class here.

Any content can be added above and below the Menu stack. The menu will only move off canvas in browser/device widths below the Breakpoint value defined in the Menu stack settings. You can also disable "Enable Menu Items" if you want to create an off canvas section that does not include a menu.