With UI.X 2, we created a framework that allows users of our products to gain complete control over their theme. Every setting, such as sticky navigation or side-by-side nodes, can be toggled on or off with a quick click of a checkbox. It also serves as the basis of all premium XenForo themes from ThemeHouse. We will begin with installation and basic customization, then go into each individual feature. You are able to navigate by using the lefthand sidebar. On mobile, you are able to click the purple icon to show the lefthand sidebar navigation. This is for XenForo 2. The documentation for UI.X can be found here.

Please make sure that the theme version you are updating or installing is compatible with the XenForo version you have. You can check this by making sure the first 3 numbers on the XenForo version and theme version match. Any additional numbers do not apply. For example, UI.X 2.1.1.2.0 is compatible with XF 2.1.1. If an incompatible theme is installed or updated the theme may not work as intended. Install & Upgrade (Recommended) To install using Install & Upgrade, please refer to the Install & Upgrade documentation. Installing UI.X 2 Manually Be sure that you grab the UI.X 2 Add-on before you install the theme as it is required for theme functionality. You can install the UI.X 2 Add-on with Install & Upgrade. Download the skin from your customer area. You will be asked to provide some information before downloading. Once you download, save the .zip file somewhere you are familiar with. Next, you will want to extract the files to a place on your computer that you will remember. Inside the downloaded folder are a number of other folders such as /PSDs/ and /Upload/. If there is an /Upload/ folder, upload the contents of /Upload/ into your root XenForo directory using an FTP program such as FileZilla. You will next want to import the .xml file, normally named style-[PRODUCT-NAME].xml (style-UI.X.xml in this example's case). To do this, you will need to log into your XenForo control panel and select the Appearances tab. Click the Import a Style link, choose the .xml file (that you downloaded from Audentio.com). If this is your first installation, set the 'Import as' field to 'Child of style: (no parent style)'. (Other listed options come in handy for product updates from ThemeHouse.) Finally, click Import. Now that you've imported your ThemeHouse XenForo theme, create a child skin of that theme. (This step preserves the theme's configuration and is critical for seamless product updates.) Go to your XenForo installation Admin Control Panel and select the Appearances tab. Now, click on the Styles tile button. Click the + Create New Style button. Set the Parent Style field to '[Theme Name]', name the child, and click Save Style. Be sure to have the UI.X 2 Add-on installed as it is still required even when installing the theme manually. Installing UI.X 2 with the UI.X 2 add-on This option still works, however we now suggest using Install & Upgrade instead. Your first step is to download the add-on from your customer area. Navigate to one of your purchases before looking for the green download button. Click on that to grab the UI.X 2 Add-on files. Next, you will want to extract the files. After that is done you will need to upload the contents inside the upload folder into your root XenForo directory. Go to your Admin CP before navigating to the Add-ons menu. Click “Add-ons”, you should see the UI.X Add-on with an Install button next to it. Click on that as it should then automatically install. Congratulations! You have officially installed the UI.X 2 add-on on your site. From there, click on the cog icon before clicking the options tab that shows on the drop-down. Before the add-on will allow you to download any style, you must set an API key. You can find the API key in your customer area on ThemeHouse. Navigate to your account dashboard > Account > API > Generate an API key before copying it. Paste your API Key in the field titled API Key under [UI.X] General options in your board options, and then navigate to the section titled ThemeHouse styles under Appearance. You will see a list of all themes available to download through the add-on. If you have already purchased UI.X 2, simply click the install link. After you've got it installed and working, you might want to check out some of the amazing features that come with this product. Click any of the links on the side to jump to that section. If you need assistance installing the add-on or would prefer us to handle it for you, you can create a ticket. All custom style edits should be made to this child skin - not to Default the primary UI.X 2 theme. UI.X 2 Dark includes a child based xml file which can be used to make edits to the theme instead of the primary theme. This xml can be found in the UI.X 2 Dark release package. All settings are shared with this xml and other xml's that are UI.X 2 based. After you've got it installed and working, you might want to check out some of the amazing features that come with this product. Click any of the links on the side to jump to that section. If you need assistance getting the add-on installed or would prefer us to handle it for you, you can create a ticket.

You can edit your UI.X options within your Admin CP under Options > [UI.X] Options. General Options Adding Your API Key You can find your API key in your customer area on ThemeHouse. Navigate to to your account dashboard > Account > API > Generate an API key before copying it. Paste your API key within your [UI.X] Options > General options. New directory octal permission - This will define the octal file permissions to use for new directories. The default value of "0755" should work in most situations. This option is only used if you install with FTP. Sidebar collapse time - How long (in seconds) should the sidebar collapse for before being reopened? Leave at 0 for indefinite. Collapsed sidebar navigation by default - By default, the sidebar will not be collapsed for any users. Use this option to set it as collapsed by default for registered or unregistered users, or both. Collapsed side navigation by default - By default, the side navigation will not be collapsed for any users. Use this option to set it as collapsed by default for registered or unregistered users, or both. Enable style options in user preferences - This allows users with the appropriate permissions to override the above settings for collapsed sidebar and collapsed side navigation from their preferences page. Remember user style changes - Select how you would like user style changes (e.g. collapsed sidebar) to be remembered. User session data is deleted after a user has been inactive for 4 hours. Enable FTP - If this option is enabled, all styles will be installed through FTP instead of attempting to copy the files on the server using PHP. Use this if you get permission errors while installing a style. Globally enable material avatars - If you're using any additional styles and want your default avatars consistent across styles you'll want to enable this option to enable Material avatars regardless of style. Social Media Your social media accounts added will appear within your footer by default. You can set the URL for each social media site you'd like to add and an icon will appear. https://media.audent.io/media/file/7620/social_media.png

UI.X 2 customization can be purchased for $119. This package includes an hour of 1-on-1 time with a ThemeHouse developer in order to customize your forum. We also offer different customization packages for more in-depth customization requirements. Check them out here. You will be able to download UI.X 2 after purchasing it. You can find the download link by navigating to your account dashboard > purchases > select UI.X 2 > Click the large green download button before uploading that into your forums root. If you don’t receive you purchase after a few moments, go ahead and create a ticket on our support portal. This can be done by navigating to Setup -> Options -> [UI.X] Social Media. From there you are able to add custom social media. Yes, you are able to remove the branding without having to purchase branding removal. This is applicable for all XF2 based products at ThemeHouse. View this blog post for more information on branding removal. UI.X 2 creates a parent and child style. The child style can be used to make your own edits to the theme. You can easily set icons for new navigation items by navigating to Setup > Navigation > Public Navigation > Click a navigation link > Look for Extra Attributes. Item and adding an Extra attribute. This will allow you to add an icon via an icon font. The name field should be class, and value field should be the class name for the icon that you want to use. For Material Design Icons, you can find a class list here. But include mdi prefix. For example: mdi mdi-check-circle Under no circumstances should you edit the parent style; only edit the child style. If you create a child style based off the primary style. When editing the primary styles properties, templates, and other settings. All edits made to the primary will be copied over to the child style. Yes you can as we offer a demo which allows you to test out UI.X 2 before you purchase it. (Note: this forum resets every twenty-four hours) Set your API key by navigating to Setup -> Options -> [UI.X] General Settings -> Add the API key in the field box marked “API Key”. Yes, [TH] Nodes is added to your account automatically after your purchase of UI.X 2. Yes, you must have the UI.X 2 add-on installed to avoid issues or error messages on your forum. Some theme functions may not operate without this add-on. This add-on also allows you to install the themes with just a few clicks. You will find the theme files in your account dashboard. Navigate to Purchases before looking for UI.X 2. Click on that purchase before looking for the version history as you should see a small green download button next to the latest version(s). Click on that button to grab the theme files. Be sure that you have [TH] Nodes installed before you do this. This add-on is provided free of charge when you purchase UI.X 2. Navigate to: Forums -> Node layout and styling -> Select the primary theme your using -> Click one of the forums before clicking on Node Icons -> From there input whichever icons you’d like. We offer Material or FontAwesome based icons. Navigate to: Appearance > Style Properties > Typography. From there you are able to add in your own fonts. You can also change the text size, font weight, and so much more. Navigate to: Appearance -> Style Properties -> Page Setup -> Default Width Toggle -> Select one of the options that you’d like in the drop-down before clicking save. Sure you can. Navigate to Appearance -> Style Properties -> Sidebar -> Sidebar location -> Select left before clicking save. This is due to the unregistered users permissions. Go and allow the group ability to “Show welcome section” before clicking save. After you do that, unregistered users should be able to see your welcome block. You are able to change the default prefix colors by navigating to Appearance -> Style Properties > Prefixes > From there you are able to change the colors to whatever you like. After you’ve changed them all be sure to click save. Navigate to: Appearance -> Style Properties -> Buttons -> Untick Button ripple effect before clicking save. You are able to change the small logo image link by navigating to Appearance -> Style Properties > Basic Options > Logo small image path > Input your own small logo image link into the field box before clicking save. You are able to remove these widgets by navigating to your administrative panel. Navigate to Appearance -> Widgets -> Select one of the many widgets provided before unticking the box next to UI.X: Extended footer. These widgets include: About Us, Quick Navigation, User Menu, and Follow us on Facebook. Relative font sizes allow your site to support user accessibility font size options. We have also added the ability for users to individually choose their base font size as a user preference. Users are able to achieve this by navigating to user preferences before editing the drop-down marked Font Size. If you have outdated templates, and have forgotten you upgrade your add-ons before you upgrade your theme, then you have a few options available to you to resolve the issue. You can simple ignore these outdated templates. Although they are flagged as outdated, more often than not this will simply be a product of upgrade/installation order, and not because they are actually outdated. You can uninstall and then re-install your theme(s). Installing the theme(s) fresh will fix the issue of being being upgraded/installed in the incorrect order. You can copy the contents of the template, revert it, and then save the content with the copied content back in. This will tell XenForo to stop flagging the template, and keep the templates contents intact. If you have outdated templates regardless of using the correct upgrade/install order, then the templates are more than likely flagged as outdated correctly. You have 2 options available to you. Use the automatic merge tool provided by XenForo. If the changes to the templates are compatible with each other, then this is a safe to properly combine them. If the automatic merge tool does not resolve the issue, then you have changes in both the child theme as well as the parent theme that are incompatible with each other. If this is the case, then you will have to merge the templates manually. This process may be difficult, but can be eased if you properly understand what specifically is occuring. The problem in this case is that either the parent template (or a template in default XenForo) has edited the same portion of code that has also been edited in your custom style, and XenForo does not know which version to use. The easiest way to resolve this issue is to use all of the code from either your custom style, or the parent style (whichever is changed the most), and then re-apply the changes from the other. (I.E. If there are a large amount of changes in a parent theme, and only a couple changes in the custom style, then the easiest course of action is to use the parent edits, and then re-make just the few template changes from your custom style afterwards. You may find a differentiation tool helpful in this case. These tools are designed to find the specific changes between two templates or files. https://www.diffchecker.com/ is a free example of one of these tools. Install/Upgrade add-ons Using an FTP Client, upload any of the contents that are provided under the add-ons upload folder into your forums root. After, navigate to the Add-ons section where it will show which add-ons you are able to install or upgrade. If you are upgrading an add-on, this will overwrite the add-ons files. For further information on installing add-ons on XenForo, navigate to their official XenForo 2 documentation here. UI.X 2.0.4 update potential issues The UI.X 2.0.4 update has a few breaking changes that you will need to double check to make sure they are still working as intended. The following is a list of bugs you may encounter. Fix: Adjust Style Properties > Header and Navigation > Logo Block Breakpoint Fix: Adjust Style Properties > Search > Search location Fix: Adjust Style Properties > Page Setup > Titlebar Location Fix: Adjust Style Properties > Breadcrumb > Top AND Bottom Breadcrumb Locations Fix: Adjust Style Properties > Welcome Section > Welcome Section Location Fix: Adjust Style Properties > Header and Navigation > Staff bar breakpoint Fix: Adjust Style Properties > Header and Navigation > Sub navigation breakpoint Fix: Adjust Style Properties > Header and Navigation > Header Row Breakpoint

Permissions are now able to be configured with the UI.X 2 Add-on. These let you configure access to UI.X 2 functionality for specific user groups or even specific users through the standard XenForo permission settings. XenForo permissions are configurable under the Groups & permissions tab of the Admin Control Panel. To configure permissions for an entire user group, select User Group Permissions from the Permissions group in the sidebar of the Users tab. Then select the user group you wish to change permissions for. To configure permissions for a single user, select User Permissions from the Permissions group in the sidebar of the Users tab. Then select the user you wish to change permissions for. From the User Permissions page or User Group Permissions page, find the [UI.X] Permissions group and set your desired permissions. A setting of Not Set (No) or Never will not allow the specified functionality for the selected user or user group. A setting of Allow will allow the specified functionality for the selected user or user group. Once permissions are set as desired, click Update Permissions at the bottom of the page to save your settings. Welcome Blocks permissions are now easily configured, allowing the welcome block to be shown for any desired user group or users. This is useful in instances where the welcome block contains information prompting unregistered users to join the website. Collapsible Sidebar permissions are now easily configured allowing the collapsible sidebar to be enabled for any desired user group or users. This is useful when your sidebar contains advertisements or other information you wish to always be displayed to a specific user group.

The Color Palette in UI.X 2 has been simplified to allow for ease of branding. All default XenForo color values have been used to control basic components. These colors are used to highlight important parts of components. Color 1-5 are intended for background colors. Light themes start with lightest as 1, and darkest at 5 (with 5 being an optional colored background) Dark themes start from darkest at 1 to lightest at 5 (5 here still being an optional accented) Accent colors 1-3 are intended for branding. Accent 1 - Primary color Used mostly for highlighting important content Accent 2 -Secondary brand color Used much more sparingly than primary brand color. Also used to highlight important information. Accent 3 - Tertiary color Generally used for “state” Hover states, active tabs, etc.. Neutral colors are intended for text For light themes, neutral 1 being the lightest and 3 being darkest For dark themes, darkest neutral 3 - lightest neutral 3 Note: The default color function input for these fields does not ever need to change. It ensures that your font colors will always have maximum legibility, and be thematically consistent. They are based Color Palette 2. A note on text colors: We suggest using the material design spec to maximize legibility https://material.io/guidelines/style/color.html#color-usability

These settings define the colors that will be used throughout the system for specific content or structure types. For consistency and ease of editing, the colors used should come primarily from the Color Palette. Primary brand color - Primary brand color Primary brand color (darker) - Darker variation of the primary brand color. Secondary brand color - Used for hover and active state Section background - Used for the section background When changing a color, you can check off the option below shown as “Revert customizations made in this style”. This reverts the color itself back to color used when you uploaded the theme on your forum.

General Mobile active navigation title - Adds a short version of the active navigation to the header when navigation links collapse to the canvas navigation. https://media.audent.io/media/file/4857/mobile-active-navigation-title-selected.png Image path - This sets the path to the themes main images directory. This will generally be "styles/themeName." This is useful in case you later change where your main images directory is. The purpose of this component is to display the active navigation when the navigation component is hidden away. This component only shows when the viewport width is above Narrow responsive break point and below Navigation collapse width. This value of the text is, by default, the title of the selected nav entry when applicable. However, the text can. be overwritten on a per-content-template basis using a helper, which can be found here. Navigation logo vertical spacing - The max height of the navigation logo is the height of the navigation bar minus these spacings, however it may be smaller when there is not enough horizontal width. Logo width - Sets the width for logo. (Note: Only applicable for logos in the header logo row. For logos in the navigation, use "Navigation logo vertical spacing" instead.) This width is only used when the logo is in the Header row (formerly Log Block in XF1). To set the width of your logo when in navigation, use Logo Width (navigation). Note: The logo size will not exceed the natural dimensions of the image. Logo hierarchy There are 3 different URL paths for logos, as well as logo text/icon. The following guide shows the hierarchy for logo components. The highest numbered item will be shown, with the rest being the fallbacks in order: Logo small (under the Logo breakpoint viewport width only) 2x logo URL Logo URL Logo text/icon Defines the location of various commonly-used assets etc. Responsive Logo Logo small image path - Sets the path to your themes small logo variation. This allows you to set a smaller logo, primarily for smaller viewport widths where large logos do not fit well This image replaces the general logo in whichever location it is in at the Logo breakpoint Logo breakpoint - Max viewport width to switch to the brandmark image. Use 100% for always, 0 for never, and other values in pixels. Logo breakpoint - Max viewport width to switch to the brandmark image. Use 100% for always, 0 for never, and other values in pixels. Text logo Logo text - Sets the text value when text logo is applicable. Please note: this is overwritten when a logo image path is set. https://media.audent.io/media/file/4859/logo_text.png Logo Icon - Adds a CSS font icon when logo text is applicable. IE: mdi mdi-layers Responsive logo font size - Sets the font size of the logo text for mobile. Logo text breakpoint - The device width under which the logo text changes font-size.

General Hide elements during javascript loading - Enabling this setting will prevent JavaScript-dependent components from running until the JavaScript has finished running. Enabling this will help to prevent "flashes of unstyled content" during page load. Enabling this can sometimes cause issues with cacheing. Some CDN's may also be affected. Remove what’s new buttons - Removes the whats's new buttons both from the visitor tabs location as well as the call to action buton on the forum list route. Remove Title from Forum Index - Enabling this setting removes the Titlebar component from the forum index. This setting only removes the Titlebar component if there are no other components that use this location We suggest using this setting in conjunction with Remove forum list page actions. If Page Action buttons are present, the Titlebar will not hide. Remove forum list page actions - Enabling this setting removes the page actions from the forum list. By default these are New Posts and Post New Thread. List of additional css templates to include - Links CSS and LESS templates to the theme. Format requires comma separated list, as well as the file suffix (.css or .less). Example: uix.less, tactical.less, tactical_light.less Force scrolling notices to all be primary notices - This allows you to force all scrolling notices to follow the primary notices style. Social Media Social media position - Choose the location for the Social Media component. https://media.audent.io/media/file/4824/social-media-copyright.png https://media.audent.io/media/file/4825/social-media-staffbar.png https://media.audent.io/media/file/4826/social-media-header-row.png Backstretch Enabling Backstretch allows an image or images to appear as a background. To enable backstretch, navigate to Appearance > Styles > Style Properties: Global Settings. Check the box next to Backstretch. https://media.audent.io/media/file/4778/backstretch.png Backstretch images - Sets the images that you would like to use in the backstretch function. Your images must be wrapped in quotes Every line must be followed by a comma "," except the last image. EX: "@xf-uix_imagePath/images/bg/1.jpg", "@xf-uix_imagePath/images/bg/2.jpg", "@xf-uix_imagePath/images/bg/3.jpg" Backstretch selector - CSS selector for where to apply Backstretch. The following is a list of common locations: Body: body Welcome section: .uix_welcomeSection__inner Header: .uix_headerContainer Backstretch fade - Sets the speed (in milliseconds) that the images fade out/in. Backstretch duration - Sets the amount of time (in milliseconds) that each image will be visible. Elevation (box-shadow) Elevation refers to the perceived depth of a component relative to the rest of the page. Box shadows are used to show that components are on top of/above other components on the page. Elevation 1 - Set the box shadow for components that are at "elevation 1". Commonly used for things such as buttons, cards, nodes widgets, etc. Elevation 2 - Set the box shadow for components that are at "elevation 2". Commonly used for things such as modals, off-canvases, sticky components, and hover states for components that are already elevated. Parallax Enable Parallax - Adds an image to a selector with a parallax effect. Parallax image - Sets the image for tha parallax function. Enable Selector - Sets the selector for the parallax function. Javascript Path - The path to the theme's javascript directory relative to /js/themehouse/ . Allows for multiple versions of UI.X and/or Audentio.com products to be installed and not share the same javascript functions. Only change this if you are certain you should be. Main page tabs Main page tabs - Enables the main page tab component Main tabbar location - Choose the location for the main tabbar component. Main tabs sticky - Makes the main tabs sticky. Note: This is only applicable when the main tabs are in the header position. Sticky tabs height - Sets the height of the sticky tab bar. (Note: This is important for calculating sticky heights.) Javascript Path - The path to the theme's javascript directory relative to /js/themehouse/ . Allows for multiple versions of UI.X and/or Audentio.com products to be installed and not share the same javascript functions. We recommend leaving this setting untouched unless advised otherwise. Theme UI.X Version - This is for development only, and should not ever be changed. It is asked that you do not edit this so that you know which version you are using. If this value does not match other values in our code, then it will throw errors. Beta Mode - For development and bug-finding purposes. DO NOT enable on a live site please.

UI.X uses a relative font size feature that allows the users to individually increase or decrease the base font size across the site. In order for this to work as intended, all font size style properties must be set using REM and not PX. UI.X has set the effective base font to 10px, so 10px = 1rem for easy conversions. Similiarly, 16px = 1.6rem. Google Fonts - Choose which fonts you wanted loaded from the Google Fonts API. Separate font families with the "|" character. EX: PT+Sans+Caption:400|Roboto:700 Separate font weights with the a comma. EX: Roboto:300,400,500,600,700 Secondary Font - This font family is used for headings and other decorative text situations. Heading font weight regular - Normal font weight for all text using Secondary font. Heading font weight (heavy) - Bold font weight for all text using Secondary font.

Overview UI.X replaces the default FontAwesome icon set with Material Icons to be consistent with the material design styleguide that Google has laid out. This does not mean that you cannot use FontAwesome icons, as they are still loaded in. Furthermore, all of XenForo's mixins regarding iconography are untouched and still work as intended. You can visit https://materialdesignicons.com/ to see the full list of available icons. Instead of re-using the default FontAwesome LESS mixins, we have re-created this functionality as a Macro. The advantage of the macro is that it can be used both in CSS, as well as to add an inline icon directly in the markup. The following are example use cases For use in LESS .someIcon { } For use in markup templates

The macro has 2 arguments, which are name and icon. To use the macro in LESS, set arg-name="content". To use the macro in markup, set arg-name="icon". The second argument is Icon. You can see a list of available icons to choose from in Style Properties -> Icons. We have strived to name icons after their functional use, as opposed to their name in the icon font. This has been done so that they have functional meaning across any icon sets. This menu allows you to input different strings of icons that you select by format which can be edited in the extra field of the Icon Font menu. By default, UI.X uses 2 icon font sizes, which can be set in Icon font size and Icon large font size. Icon font - Easily switch between icon sets. You are able to choose Material or Font Awesome based icons which will be used on your forum. Load Material Icons locally - Loads the material icon font form local files as opposed to from the CDN. Changing the icon font We set up our macros set that they can easily accept any icon font given to them, and still work properly. You can change the icon font family and default styling in the Icon Font style property. You can then set the new content values for each icon. LTR/RTL support We allow administrators to specify icons either as LRT and RTL across their style. Any user using an opposite language of what an administrator selected to use to configure their style's icons will have the directionality of icons reversed. This means if an administrator is using LTR language and a user is using a RTL language, or vice versa, directional icons will be reversed. The advantage of this system is that administrators can configure the directionality of icons in their preference of either LTR or RTL and icons will adjust accordingly for their users. This can be configured with the Text Direction style property.

Enable Smart Border Radius Javascript - Enables context-aware border-radius rules. Very helpful, especially in the header. Border Radius Javascript Selectors - Only used if smart radius javascript is enabled. Comma separated list of javascript selectors. Do not include single quotes (').

Page style - Sets the overall page style regarding the space around the entirety of the content. The options are covered, fixed, and wrapped. https://media.audent.io/media/file/4827/page-style-default-covered.png https://media.audent.io/media/file/4828/page-style-fixed.png https://media.audent.io/media/file/4829/page-style-wrapped.png Content Wrapper - Allows you to set which elements to put inside the content wrapper. https://media.audent.io/media/file/4830/content-wrapper-main-content-sidebar.png https://media.audent.io/media/file/4831/content-wrapper-main-content-only.png https://media.audent.io/media/file/4832/content-wrapper-no-wrapper.png Default width toggle - This setting allows you to set the styling for the default width toggle rather it be fixed, fluid, or you can just disable it. Titlebar Location - Allows you to set where the titlebar should appear on the page. https://media.audent.io/media/file/4804/top-breadcrumb-outside-page-wrapper.png https://media.audent.io/media/file/5515/titlebar-top-main-container.png https://media.audent.io/media/file/5513/titlebar-above-main-content.png https://media.audent.io/media/file/5514/titlebar-top-main-content.png https://media.audent.io/media/file/5516/titlebar-bottom-header.png Remove page title (forum list) - This setting allows you to remove the page title from the forum index.

General Separate Header from Content Wrapper - Adds a bottom margin to header. Header whitespace - Pixel value of the margin between navigation, user bar, and logo block. https://media.audent.io/media/file/4860/header-whitespace-example-10px.png Navigation Move navigation above logo block - Moves the main navigation above the logo block/header component. Navigation bar height - Sets the height of the navigation bar. Height of Sticky Navigation Bar - Sets the height of the sticky navigation bar. Right align navigation - Floats both the navigation as well as the sub navigation links to the right. https://media.audent.io/media/file/4858/right-align-navigation.png Navigation tab icons - Adds icons next to the navigation text on the navigation bar. For infomation on adding new icons, see our FAQs. https://media.audent.io/media/file/4856/navigation-tab-icons-selected.png Add default navigation tab icon - This will add a stock default navigation icon. (Note: This may cause any custom icons you set to be overwritten. Disable this feature if this is the case.) Sidebar Navigation Navigation type - Sets the type of navigation style between default and Sidebar Navigation. https://media.audent.io/media/file/4855/navigation-type-sidebar.png Sidebar navigation is only available in the covered style along with the fluid header. Sidebar navigation width - Sets the width for the sidebar navigation component. Collapse sidebar navigation section links - Collapses the active tabs section links by default. Note: Only applicable when navigation style is set to sidebar navigation. https://media.audent.io/media/file/4786/collapse-sidebar-navigation-section-links-selected.png Show tablinks in sidebar nav - Adds the sub navigation links to the sidebar navigation. Login/Visitor tabs Visitor tabs position - Sets the user tabs position. Options include: https://media.audent.io/media/file/4812/user-tab-navigation.png https://media.audent.io/media/file/4813/user-tab-staff-bar.png https://media.audent.io/media/file/4814/user-tab-tablinks.png Visitor tabs location (mobile) - Sets which component the visitor tabs to move to for mobile. Options include: https://media.audent.io/media/file/4809/visitor-tabs-location-initial.png https://media.audent.io/media/file/4810/visitor-tabs-location-canvas.png https://media.audent.io/media/file/4811/visitor-tabs-location-tab-bar.png Login triggers style - The method in which the login form displays once the trigger is activated. Options include: https://media.audent.io/media/file/4815/login-trigger-dropdown.png https://media.audent.io/media/file/4816/login-trigger-link.png https://media.audent.io/media/file/4817/login-trigger-modal.png https://media.audent.io/media/file/4818/login-trigger-slideout.png Login triggers position - Sets the login triggers position. Options include: https://media.audent.io/media/file/4819/login-position-navigation.png https://media.audent.io/media/file/4820/login-position-staff-bar.png https://media.audent.io/media/file/4821/login-position-tablinks.png Remove register/login text - Allows you to remove the text that is shown on the register/login menu. Viewport width to remove login text - Sets the minimum viewport width to display the login text. Condense visitor tabs - Allows you to condense the visitor tabs. Links for the Alerts and Conversations are added to the user drop down menu. Viewport width to condense visitor tabs - Sets the minimum viewport width to condense the visitor tabs. Remove visitor tab text - This setting allows you to remove the visitor tab text. Viewport width to remove visitor tab text - Sets the minimum viewport width for the visitor tab text to display. Logo block (Header row) Minimum viewport width to show logo block - Sets the minimum viewport width to show on the logo block. Viewport width to center the logo block - Sets the maximum width to center the logo block. This causes all logo block components to stack vertically, and aligned in the center. Set 0 for never and 100% for always. https://media.audent.io/media/file/4785/center-logo-block.png Staff bar Staff bar sticky - Enables the sticky staff bar functionality. Sticky staff bar height - Sets the height of the sticky staff bar. Collapse staffbar links - Adds a collapse function on the staff bar's links. Viewport width to collapse staffbar links - Sets the maximum viewport width to collapse the staff bar links. Staff bar breakpoint - Sets the viewport width at which components move from the Staff Bar to the right side of the navigation in order to hide the staffbar. (Note: This is designed for mobile friendly design.) Sub Navigation Sticky sub navigation height - Sets the sticky height for the sticky section. Viewport width to remove the sub-navigation - Hides the sub-navigation bar at this breakpoint and moves its components to the right side of the navigtion.

Scrollable sidebar - Adds a scrollable container around the sidebar. (NOTE: Not recommended when Sticky sidebar is set to "Sticky top and bottom") Share widget modal - Replace the contents of the share widget with a button that opens a modal. This is useful to help differentiate between the share social icons, and the social links. Scrollable sidenav - Adds a scrollable container around sidenav. NOTE: In later versions this functionality is combined with the Scrollable sidebarstyle property. Sidebar mobile canvas - Adds the sidebar to an off canvas for mobile. Collapsible Sidebar - Allows you to collapse and expand the sidebar if it is enabled. The sidebar collapse function uses "sessions" which allows the browser to remember the users choice. This works for both guests as well as registered users. Sidebar breakpoint - Allows you to set the width at which the sidebar breaks under the main content. This also disables the collapsible sidebar functionality, as well as sticky functionality. Sidebar Heading Icons - Adds icons to the sidebar headings when enabled. This adds icons to all widgets, not just those in the sidebar. It does not, however, add an icon to HTML widgets, as XenForo does not add widget-related markup to them. Add default sidebar icons for custom HTML widgets - Adds the default icon to custom HTML widgets. Sidebar location - Set whether the sidebar is on the left or the right of the main content. The sidebar trigger will follow the sidebar (I.E. When sidebar is on the left, the trigger is also floated left.) Sidebar trigger position - Sets the location for the sidebar collapse trigger. Options are: https://media.audent.io/media/file/4835/sidebar-trigger-section-links.png https://media.audent.io/media/file/4836/sidebar-trigger-breadcrumb.png Show sidebar trigger phrase - Adds the sidebar phrase to the trigger. If the sidebar trigger is in the breadcrumb, it will force the breadcrumb to show regardless of other options. Sticky sidebar - Enables the sticky sidebar, and allows you to set to to sticky top only, is sticky top and bottom Sticky Top and Bottom: This allows the sidebar to stick to the bottom and bottom of the page depending on scroll directions, which allows the user to always easily see the whole sidebar. This is done in JavaScript, and does have slight performance implications. It is supported in many older browsers, unlike sticky top only. Sticky Top Only: The sticky functionality is being added purely with CSS. This means that it has no performance drawbacks. However, it is not supported in older browsers. Sticky sidebar - Makes both the sidebar as well as the Sidenav component sticky. The sticky functionality is being added purely with CSS. This means that it has no performance drawbacks. However, it is not supported in older browsers. Visitor Panel Stats as icons - Allows you to change the visitor stats to icons instead of text if it is enabled. Widget Padding - Allows you to set the default padding for the sidebar widgets. Sticky sidebar recalc delay - Sets the amount (milliseconds) to delay an additional calculation for the sticky sidebar. This style property is useful when ads or any other widgets/content load in the sidebar after the initial page load, which causes the sticky sidebar calculation to be incorrect. After this many milliseconds, the sidebar will recalculate to see if it is still correct, and will update if it is not.

General options Search position - This setting allows you to set where the search bar appears. Locations include the staff bar, navigation (left or right) or tablinks. https://media.audent.io/media/file/4839/search-position-navigation-left.png https://media.audent.io/media/file/4840/search-position-navigation-right.png https://media.audent.io/media/file/4841/search-position-staff-bar-right.png https://media.audent.io/media/file/4842/search-position-tablinks.png https://media.audent.io/media/file/4843/search-position-right.png Search bar height - This setting allows you to set the search bar height. Search bar width - This setting allows you to set the search bar width. This is required for minimal search animation. Add Button to the QuickSearch - This setting makes the search icon a functional submit button, and moves it to the right side of the input. Responsive options Viewport width to show search icon - This setting allows you to enter the maximum viewport width at which the search icon replaces the search bar. Such width includes 10000px for always icon and 0px for never. Search icon behavior - Sets the behavior for the search icon (when the search is only an icon, and not the full input). Options are: Dropdown - Uses the default XenForo search dropdown. Expand - Expands the search bar to an input that spans the full width of the header. Expand (mobile only) - Uses Dropdown for screen sizes tablet and larger, then switches to the Expand function for mobile only. https://media.audent.io/media/file/4844/search-icon-dropdown.png https://media.audent.io/media/file/4845/search-icon-expanded.png Focused search options These options change the colors of the search bar when it is focused. Search bar placeholder color - The color of the palceholder text before focus. Search bar placeholder color (focus) - The color of the palceholder text when focused. Search icon color (focus) - The color of the search icon when focused.

Ignore home link when checking "content checking" breadcrumb - Removes the breadcrumb when the only crumb is the home link. Top breadcrumb location - This setting allows you to change the location of the top breadcrumb. Locations include: https://media.audent.io/media/file/5503/top-breadcrumb-above-main-container.png https://media.audent.io/media/file/5502/top-breadcrumb-top-main-container.png https://media.audent.io/media/file/5504/top-breadcrumb-above-main-content.png https://media.audent.io/media/file/5505/top-breadcrumb-top-main-content.png https://media.audent.io/media/file/5506/top-breadcrumb-bottom-header.png Bottom breadcrumb location - This setting allows you to change the location of the bottom breadcrumb. Locations include: https://media.audent.io/media/file/5507/bottom-breadcrumb-below-main-container.png https://media.audent.io/media/file/5508/bottom-breadcrumb-bottom-main-container.png https://media.audent.io/media/file/5509/bottom-breadcrumb-bottom-main-content.png https://media.audent.io/media/file/5510/bottom-breadcrumb-below-main-content.png Remove bottom breadcrumb - Removes the bottom breadcrumb form all pages. https://media.audent.io/media/file/4846/page-action-breadcrumb.png Home breadcrumb as icon - Swaps out the home text with an icon when you have a home route defined in Options. Hide top page nav for mobile - Removes the top page navigation buttons for mobile to save important vertical space.

The Welcome Section is a component whose purpose is to quickly describe the forum to your guests, and encourage them to register. Because this component is intended to encourage registration, we suggest it be visible to guests only. However, it can be used as a site banner as well. If so, we suggest either removing or changing the register button. General options Welcome block image hero - Adds the welcome block image to the entire header component. (Note: Only applicable when welcome block is in header.) Welcome section visible to - Quick permission options for the welcome section. Options are: Everybody Nobody (disabled) Guests - Enabled only for guests. Permission Based - Enabled only for users with permissions to view. Welcome section location - Sets the location of the Welcome Section. https://media.audent.io/media/file/4805/welcome-section-outside-page-wrapper.png https://media.audent.io/media/file/4806/welcome-section-inside-wrapper.png https://media.audent.io/media/file/5511/welcome-section-above-main-content.png https://media.audent.io/media/file/5512/welcome-section-inside-body.png https://media.audent.io/media/file/4808/welcome-section-bottom-header.png Display welcome section on forum list only - Hides the Welcome Section on every page other than the forum list. Content options Welcome section title - Sets the title text. Welcome section text - Sets the body text. Welcome section sign up text - Sets the button text. Welcome section button url - Sets the URL for the button. Welcome section icon - Sets the class name for an icon of an icon font.

Extended footer https://media.audent.io/media/file/4861/enable-extended-footer.png The Extended Footer component is a row that adds a widget location. Any amount of widgets may be added to the Extended Footer, and their positioning is determined based on the preferred width of the widgets, the amount of widgets available, and the amount of space available in the Extended Footer. To add widgets to the extended footer on UI.X 2, it just takes a few clicks. To get start navigate to your administrative panel > Appearance > Widgets > Click “Add Widget” > Select a widget definition > Add in information into the required fields > Be sure to tick “UI.X Extended Footer” in the display positions > Click “Save” then it should show in the extended footer. Widget Key – Adding a specific widget key in this field allows you to use it in a template. Title - This allows you to add a specific title or name of the widget when viewing it in the widget menu. Display Positions – Down below you will see many different positions in this menu including the UI.X Extended Footer and Sidebar Navigation. Maximum entries – This allows you to control the number of avatars that can be shown in this widget. General Options Enable Extended Footer - Enables the Extended Footer. Note: To appear, it requires widgets to be set. Hide extended footer for mobile - Removes the extended footer on mobile devices. Force cover extended footer - Forces the extended footer row to be full width regardless of the Page Setup > Page Style style property. Force cover footer menu - Forces the footer menu row to be full width regardless of the Page Setup > Page Style style property. Force cover copyright row - Forces the copyright row to be full width regardless of the Page Setup > Page Style style property. Move footer inside main content - Moves the footer into the main content, as opposed to being full width at the bottom. Footer row order - These style properties allow you to adjust the order in which the footer rows appear. The options are: Extended footer Footer menu Copyright row Force cover footer rows - These style properties allow you to force the footer rows to extend the full page width, regardless of the option selected in Style Properties > Page setup > Page style. https://media.audent.io/media/file/4849/force-cover-footer-options.png Footer widget options Footer widget preferred width - Sets the preferred widget minimum width. Footer widget spacing - Set the spacing in between each widget. Footer widget icons - Adds icons to the footer widget titles. Hide footer style choose - Removes the style chooser which is placed on the footer of your forum. Extended Footer White Text - Checking this option will add CSS to make all text white for legibility. Only use this Style Property if you have a dark background that is causing legibility issues. (Most often useful for a dark footer on a light theme.)

Enable material avatars - Enables material based avatars which replaces the default based generated avatars used by the default XenForo style. Avatar Shape - Sets the shape of the avatars. Options are: Default - Uses Avatar border radius Circle Square Diamond Pentagon Hexagon Octagon This may overwrite avatar border radius style property!

General options Button ripple effect - Adds a ripple animation to buttons active state (when pressed). Floating action button (FAB) options https://media.audent.io/media/file/4847/page-action-fab-desktop.png https://media.audent.io/media/file/4848/page-action-fab-mobile.png Page action as floating action button - Adds the page action as a floating action button. Options include: Always Never Mobile (shows only for small screens) Floating action button viewport width - Sets the minimum viewport width to hide the floating action buttons when the FAB is set to mobile only. Show FAB on scroll up only - Hides the FAB by default, and reveals upon scrolling up. Floating action bar When the floating action bar is not set to Scroll up only, a bar is added to the bottom of the footer. This is to prevent the FAB from sitting on top of important content in the footer. Floating action button placeholder background color - Sets the background color for the floating action button bar in the footer.

Overlay blur effect - Adds a blur effect to overlays.

Level 1 category options Collapsible categories - Adds a trigger to collapse 1st level category nodes. This setting uses "sessions" meaning that it remembers the users choice fort a certain period of time. Category description display - Sets the tooltip display type. Options include: Tooltip Inline None (hides the description) Move category strip outside wrapper - Moves the category strip outside of the level 1 node container in the markup. https://media.audent.io/media/file/4783/category-strip-inside-wrapper.png https://media.audent.io/media/file/4784/category-strip-outside-wrapper.png Sticky category strips - Enables category strips to stick to the top of the page for the category that is currently in view. Level 2+ node options New node indicator - Displays a new indicator next to the node title if there is new content. https://media.audent.io/media/file/4852/new-node-indicator-selected.png Clickable nodes - This setting makes the entire node a clickable link to the forum. (Ignores other inner links.) Hide node last post - Hides the last post component in the nodes. Hide node stats - Hide the node stats component. Show node stats only on hover - Hides the node stats, and displays them only when hovering over the node. Node stats as icons - Replaces the node stat labels with icons. https://media.audent.io/media/file/4854/node-stats-icon.png Viewport width to collapse node stats - Sets the minimum viewport width to show the full node stat display. Node body (even) - Sets the background color of the node body.

Node icon width - Sets the width for the node icon containers (not the actual icon itself). Category strip icons - Adds the UI.X Folder icon to category strips. Forum icon - Sets the content of an icon to an icon font for forum nodes. Link icon - Sets the content of an icon to an icon font for link nodes. Page icon - Sets the content of an icon to an icon font for page nodes. Use images for node icons - This setting will allow to enable the use of images for nodes. Images are set in the CSS style properties below this style property.

Clickable threads - Makes the entire thread list item clickable. Collapsible sticky threads - Allows the users to collapse sticky threads. Requires Separate Sticky Threads. Separate sticky threads - This will add headings above sticky threads and above normal threads to clearly differentiate the two types of threads. Structured list horizontal padding - Sets the horizontal padding for list items such as discussion list, conversation list, reports list, etc. Structured list vertical padding - Sets the vertical padding for list items such as discussion list, conversation list, reports list, etc. Width to collapse discussion list items - Sets the maximum width to show the "simple" style for discussion list items. Discussion list item (even) - Sets the background color of even discussion list items. Discussion list item (hover) - Sets the background color of discussion list items on hover.

Original Poster indicator - Adds an indicator in the user post bit which shows who the original starter of the thread is. Collapsible extra info - Adds a trigger to toggle the postbit extra information open and closed (such as joined, messages, trophies, etc..). https://media.audent.io/media/file/4787/collapsible-extra-info-selected.png https://media.audent.io/media/file/4788/collapsible-extra-info-unselected.png Postbit avatar size - Sets the size of the post bit avatar. Post bit icons - Swaps out the user extra information labels for icons. Remove message arrow - Removes the arrow on postbit for messages.

Used for the style property “uix_mobileActiveNav” in Basic options. Sets a title in the navigation when navigation is collapsed into off canvas. Uses “page_title” by default. Use this in a content template to override:


        {{ phrase('forum') }}

This allows you to hide notices when adding it to a page/template: 1 This allows you to hide the page title: 1 This allows you to remove the breadcrumb on pages you add the helper: This allows you to hide navigation, tablinks, visitor tabs, and search: Adding this class allows you to any elements inside the .p-body sticky: .uix_stickyBodyElement .m-uix_whiteText(@color); - This LESS mixin is useful for determining whether or not white text should be used instead of default text (which is dark on a light theme.) By passing the background color (that the text displays on) to the mixin will add white text only if there is a legibility concern. Example: .textOnDarkBackground { background-color: black; color: black; .m-uix_whiteText(#000); } $uix_headerExtra - This page option can be used to add additional markup to the bottom of the header per any individual content template. The markup specifically is inserted at the bottom of . The following is an example use case:

This bar will inset extra content into the bottom of the header.

This style property group allows you to set new background colors for the default XenForo thread prefixes. Each option has a set text color. The list is as follows: Accent - white Red - white Green - white Olive - white Light green - white Blue - black Royal blue - white Sky blye - white Gray - white Silver - black Yellow - black Orange - black

These selectors receive classes when they aren't touching other selectors in the list. This is used to round their borders if nothing else is touching. .p-footer-inner, .p-footer-copyrightRow, .uix_extendedFooter, .p-nav, .p-sectionLinks, .p-staffBar, .p-header

Block notice location - Allows you to change the location of block notices to the following locations. Above main header Top of main header Above main content Top of main content Force scrolling notices to all primary notices - Sets the styling for all scrolling notices to be primary notices. UI.X Page animation Page animations - Adds animations to main components (header, sidebars, main content, footer) on page load. Sidebar widget animation - Adds an animation to sidebar widgets on page load. Discussion list animation - Adds animation to discussion list items on page load. Message animation - Adds an animation to messages on page load. Side navigation animation - Adds an animation to side navigation items on page load. Node animation - Adds an animation to node items on page load.

In UI.X we have introduced some new terminology in regards to naming the larger macro components. This was done to ensure clarity in the language used to describe our style properties, especially for positional style properties where you want to move something around. Below are a list of terms commonly use to describe components and their locations. Main Component Names Logo Block - The bar in the header that is the default location for logo. Known as Logo Block in XenForo 1In XenForo 2, this is sometimes referred to vaguely as "header", hence the clarification in our documentation. Sub Navigation - The bar in the header below the main navigation that houses the sub navigation links. XenForo referes to this bar both as "sub navigation" as we as "section links." For the purpose of consistency, we refer to it only as the sub navigation. Main Locations Header: Refers to everything above the content, the top third, typically for navigation, logo, important links, search and the like. Content: Refers to everything that is content-sensitive, and is the middle part of the page. Breadcrumbs, titles, call to actions, and of course the main piece of content (ie: thread, profile, page, etc.). MainContainer: Refers to the div wrapping both the main content as well as the sidebar. MainContent: Refers to the page content excluding any sidebars. MainSidebar: Refers to the main XenForo sidebar where widgets are typically inserted. Footer: Refers to the bottom third of the page, where you typically find legal information, copyrights, quick links, and other meta information about the site. Sub-locations Before and After: Refers to the position inside of the Main Location, but outside of the chrome or "padding, border, background, etc. of the component". Above and Below: Refers to the position inside of the Main Location AND inside the chrome. So for example, if you have a large footer, this would be inside the visual part of the footer section (if it had a background, it too would be on top of the background). Diagram We have a diagram to explain the differences in the structure. This system again is so you can for the most part put any widget or component anywhere, and this is a consistent method we use so you can rely on accuracy when you place your components. https://media.audent.io/media/file/6637/structure.png For brevity, the diagram is not comprehensive. Content, for example, also has before/after and above/below. And there are other components as well.

UI.X 2

Overlays