UI.X Add on UI.X worked great as a theme, but we wanted more functionality. So we ve built UI.X as one system, theme and add on

Transcription

1 UI.X version has several new features that we are excited to share with you in detail. UI.X Add on UI.X worked great as a theme, but we wanted more functionality. So we ve built UI.X as one system, theme and add on working together. XenForo allows this through add ons so to improve the UI.X experience we are now expanding UI.X s functionality with the UI.X add on. The UI.X add on compliments your UI.X themes through additional functionality that wasn t possible using just a theme as well as streamlining the configuration of multiple UI.X themes on a single forum. Updating to new versions of UI.X is made easier than even through the UI.X add on. Your forum will check for updates to UI.X and if an update is available, you can install it in one click. To allow for one touch updating and check for updates to UI.X, an API Callback to our servers is made. This callback does not gather any information about your site. That said, if you do not wish to use one click updates and prefer to continue manually updating, you are free to not enter an API key and there will be no callback made to check for updates. Before upgrading, make sure you have made backups of your UI.X theme as well as any UI.X child themes. Download the add on from your orders page at audentio.com Extract the.zip file to a familiar place such as your desktop then upload the contents of /upload/ to your XenForo root directory After the files have uploaded, go to your XenForo Admin Control Panel. On the right side you will see a list of all add ons, and at the bottom there is an install add on button. Click that. Then browse to the uix addon.xml file that you downloaded from audentio.com After that has installed, you will need to generate an API key from audentio.com key Back in your XenForo ACP, go to Options > [UI.X] General, and paste the API key in under Audentio API Key When that is done, you can now go to UI.X tab at the top of the ACP > Styles > Find UI.X in the list and install it right there. This will automatically create a child theme for you as well. Make sure to make all edits to the child theme. If you do not want to install via the styles tab using a callback, the theme files will be available to download in the orders page changelog table To install the theme that way, you must also upload the contents of /upload/ to your root XenForo directory. When that is done go to Appearance > Styles > Import a style > Browse for the.xml file you downloaded (the style not the add on) and import. Make sure when that is done to create a child theme to this style and make all changes to that. Never edit UI.X or any official product directly as upgrading becomes nearly impossible. Footer Columns can, depending on your forum setup, display the same content across multiple UI.X themes. To simplify having a unified footer across all of your themes, we added a section to input a global footer inside the UI.X add on. The global footer is optional so you can still have unique footers in all your themes if you choose. If you do choose to use the global footer, however, you will be able to update your footer in one location simplifying managing footers across UI.X themes.

2 Footer Columns can be configured under the UI.X tab of the Admin Control Panel. From the UI.X tab, select Options from the sidebar and select [UI.X] Footer To use the global footer, set Options To Use to Use Global Options. If you wish to go back to individual footers specified in each theme, set Options To Use back to Use Style Properties. The UI.X footer can then be configured in much the same way it was previously configured for individual themes, except that changes will be made to the UI.X footer of all your themes by default. Show Extended Footer will enable or disable the extended footer across your UI.X Themes. Footer Width sets the minimum width of columns in your extended footer. If the columns are not at least this size, they will break into additional rows. Individual widths can also be set for columns. Up to 4 individual columns can be configured as well. Show Column X will show or not show the column and its content. Column X Title is displayed as the title of the column. Column X Icon is the class added to display an icon for the column. This can be a Font Awesome icon, but can be any other icon set as well. Column X Content is the content of the column. HTML output is fully supported. Column X Width is the minimum width of the column. The column will display on an additional row if the minimum width is not satisfied. This overrides the previous global Footer Width setting. Footer icons for a theme that differ from the icons in the UI.X Add on this can be specified on a per theme basis if desired. These can be configured in the [UI.X] Footer Style Properties of a desired theme. Set the Column X Icon Override to be the class of your desired icon or enter uix_hide to not display an icon. This overrides the icons set by the UI.X Add on. Social Media Links similarly often are used across your UI.X themes so we have moved them to the UI.X Add on. Social Media Links can be configured under the UI.X tab of the Admin Control Panel. From the UI.X tab, select Options from the sidebar and select [UI.X] Social Media The UI.X Social Media Links can then be configured in much the same way they were previously. Social Media Links will enable or disable social media links on your themes. X URL will display an icon to the specified social media service with the specified link. Setting a link will trigger an icon for the social media service to display. Show Contact Link will display an icon to contact you. Show RSS Icon will display an icon to subscribe to your forum with RSS. Styling of individual icons is still done on a per theme basis similar to how it was done in the past. This can be configured in the [UI.X] Social Media Style Properties of a desired theme. Welcome Blocks also can, depending on your forum setup, be used across your UI.X themes so we now support a global welcome block to synchronize welcome block content across multiple UI.X themes on your site. Similar to with footer columns, this is optional and

3 you are still able to have unique welcome blocks across your themes if you choose to. Additionally, you can globally configure which user groups or users can view your welcome block (see Permissions). The Welcome Block can be configured under the UI.X tab of the Admin Control Panel. From the UI.X tab, select Options from the sidebar and select [UI.X] Welcome Block. To use the global Welcome Block, set Options To Use to Use Global Options. If you wish to go back to individual welcome blocks specified in each theme, set Options To Use back to Use Style Properties. The UI.X Welcome Block can then be configured in much the same way it was previously. Disable Welcome Block will prevent the welcome block from displaying even if user or user group permissions are set to display it. Welcome Button URL is the url of the button in the welcome block. Welcome Button Text is the text of the button in the welcome block. Welcome Section Header is the title of the welcome block. Welcome Section Message is the message displayed in the welcome block. Welcome Section Glyph Icon is the class of the glyph in the welcome block. To not display an icon, enter uix_hide. Additional styling of the welcome block is still done on a per theme basis similar to how it was done in the past. This can be configured in the [UI.X] Welcome Block Style Properties of a desired theme. Permissions can also now be configured since we have added capabilities provided by the UI.X Add on. These let you configure access to UI.X functionality for specific user groups or even specific users through the standard XenForo permission settings. XenForo permissions are configurable under the Users 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 [Audentio] 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 might be useful if your welcome block contains information about joining the website that is most useful for unregistered users.

4 Collapsible Sidebar permissions are now easily configured allowing the collapsible sidebar to be enabled for any desired user group or users. This might be useful if your sidebar contains advertisements or other information you wish to always be displayed to a specific user group. Phrases are used by XenForo to better support forum use in multiple languages. The use of a UI.X Add on allows us to add our own phrases to increase the usability of UI.X for multi lingual themes. UI.X Phrases are configured using the existing XenForo phrase system. Node Grid Layout is an option that provides much finer control over the layout of forum nodes. The Node Grid Layout allows you to specify a desired number of columns and a minimum width for columns and will responsively adjust the layout of nodes to provide an optimal view of your forum s nodes to users for their screen size. How to use (General): Node Grid Layout can be enabled on a per theme basis in the [UI.X] Forum Nodes Style Properties of a desired theme. To enable Node Grid Layout, set Forum Node Style to Node Grid Layout, ensure that Set Last Node to 50% Width is disabled, and ensure that Table Style Nodes is disabled. By Default, node Grid Layout allows up to columns of nodes in each category with a minimum node width of 330px. This means that the layout manager will responsively display up to 6 columns as long as each node is at least 330px wide. If this is not possible, a lower number of columns will be displayed. This works well under a majority of use cases, but can be configured on a global level as well as a per node level (see Advanced). How to use (Advanced): The following options can be configured from the Node Tree : Default Layout Options Default used for everything unless a more specific value is specified. Category layout defaults to having 1 column but can be configured to use this as well if desired. Maximum Columns a grid layout can contain up to this number of columns Ex: if this is set to 4 then layouts with 4, 3, 2, or 1 column may be used Minimum column width : The smallest column must be at least this large (in pixels). If that is not possible, the next lowest number of columns will be used. Once in a one column layout, this value is ignored (since a 0 column layout doesn t make much sense). Ex : a user wants a 2 column layout with the first column being 2/3 width and the second column being 1/3 width. The minimum column width is set to 330px. when the total width of the category is >= 990px a 2 column layout with the specified 2/3 1/3 column divisions will be displayed since the smallest column (1/3 the total width) will remain at least 330px wide

5 when the total width of the category is less than 990px the layout will reduce to a lower number of columns until a layout that obeys the specified minimum width is found or only one column is allowed (in this case a 1 column layout will be used). Fill Last Row : specifies how to arrange any remaining nodes after as many full rows as possible have been created 4 settings are possible Divide Last row into empty spaces (default) any nodes that are left will be given an equal portion of the last row Ex : a user has 11 nodes and specified a maximum column of 3. Assuming the columns meet the criteria set by minimum column width to layout in 3 columns the first 3 rows will each contain 3 nodes leaving 2 remaining nodes with this setting, the two remaining nodes would equally divide the last row and each have 50% width Don t Fill will continue to follow the specified layout and leave empty spaces if there are not enough nodes to fill all columns of the last row Ex : a user has 11 nodes and specified a maximum column of 3. Assuming the columns meet the criteria set by minimum column width to layout in 3 columns the first 3 rows will each contain 3 nodes leaving 2 remaining nodes with this setting, the two remaining nodes would follow the column widths specified in the first two columns of the last row and the final column of the last row would be empty Divide Last row according to lower number of columns any nodes that are left will be given a portion of the last row based on the custom widths for that many columns Ex : a user has 11 nodes and specified a maximum column of 3. Assuming the columns meet the criteria set by minimum column width to layout in 3 columns the first 3 rows will each contain 3 nodes leaving 2 remaining nodes with this setting, the two remaining nodes would follow the custom column widths specified for a 2 column layout. If no custom widths are specified, the columns are divided equally. Make remaining nodes full width on their own row any remaining nodes are each placed on their own row and given full width Ex : a user has 11 nodes and specified a maximum column of 3. Assuming the columns meet the criteria set by minimum column width to layout in 3 columns the first 3 rows will each contain 3 nodes leaving 2 remaining nodes with this setting, the two remaining nodes would form 2 additional rows, each with 100% width

6 Column Widths Specifies how to divide column widths 2 settings are possible Divide columns equally (default) columns are always an equal portion of the row this should be used in almost all cases unless an extremely custom look is desired Ex : a user specified Maximum Columns of 4 if the Minimum Column width allows 4 columns, each column will have an equal width (100% / 4) meaning each column will be 25% width if the Minimum Column width allows 3 columns, each column will have an equal width (100% / 3) meaning each column will be 33.3% width if the Minimum Column width allows 2 columns, each column will have an equal width (100% / 2) meaning each column will be 50% width if the Minimum Column width allows 1 column, each column will have an equal width (100% / 1) meaning each column will be 100% width Divide columns using custom widths Allows a user to specify the widths for all levels from 2 columns to Maximum Columns Widths at each number of columns are proportional to other values entered If no value is entered for a number of columns, that level will default to being equally divided Ex : A user has set Maximum Columns to be 4 and is using custom widths for 2 column layout the user wants 2/3 1/3 division since values are proportional the following are just a few of the values that would give the desired layout Column 1: 2 Column 2: 1 Column 1: 66% Column 2: 33% for 3 column layout the user wants 1/3 1/3 1/3 division since values are proportional the following are just a few of the values that would give the desired layout Leaving widths blank (since the default is equal widths) Column 1: 1

7 Column 2: 1 Column 3: 1 Column 1: 33% Column 2: 33% Column 3: 33% for 4 column layout the user wants 1/3 1/6 1/6 1/3 division since values are proportional the following are just a few of the values that would give the desired layout Column 1: 2 Column 2: 1 Column 3: 1 Column 4: 2 Column 1: 33.33% Column 2: 16.67% Column 3: 16.67% Column 4: 33.33% Category Layout Options Category nodes follow the same general structure as the Default Layout Options if a value is not specified in the category layout options, a value from the default layout options will be used Ex : if the Maximum Columns is not specified, the Default Layout s Maximum Columns will be used A default of 1 for Maximum Columns is set to force categories to not be in multiple columns Layout Options Layout options can be specified for individual categories and will default to using the Default Layout Options unless Use Default Options is set to No If not using the default options, options can be specified similarly to how they are set in the Default Layout Options. If a value isn t set, a value from the Default Layout Options will be used Layout options only apply to direct children of the category (nested children more than one level deep will use the default layout unless a more specific layout is specified). Node Separators Node Separators allow the layout of the node grid to change at any point (such as in the middle of a category).

8 All nodes within a parent will use the layout specified by the Node Separator if they are ordered after the Node Separator inside their parent options can be specified similarly to how they are set in the Default Layout Options. If a value isn t set, a value from the Default Layout Options will be used Node Element Queries Depending on the size of nodes, classes are added that specify the node s size to allow for styling of a node based on its size within the grid layout. The widths these sizes are added can be specified under [UI.X] Forum Nodes Additional classes may be added in the template uix_nodelayout_sizelisteners_js By default, the following classes are able to be added at specified sizes audentio_nodelayout_xs audentio_nodelayout_sm audentio_nodelayout_md audentio_nodelayout_lg audentio_nodelayout_xl