Thank you for your purchase! Here we have compiled a list of the most common and some uncommon features and settings for your reference. If you need something specifically explained please feel free to get in touch.

This product is powered by the XenForo theme framework, UI.X. You can learn more about this product and a lot of specific settings, customization options, and information here.

This is how you can utilize some of the defaults we added into Material for customizing the node for adding things like images and colors. You always utilize the node grid as well which is covered on the UI.X documentation. Add main class First lets navigate to Application > View Node Tree > scroll to the node > Node Options > Style Options Next, you'll want to add the following class that will append To .nodeInfo to turn it into metro styling: isMetro. This will be need for all nodes requiring that they have an image or a different color. https://media.audent.io/media/file/1854/isMetroScreenshot_Material_Theme.png Add a color For color, add one of these classes: metro-orange metro-pink metro-indigo metro-cyan metro-brown metro-blueGrey metro-red metro-blue metro-green metro-teal metro-purple metro-deepPurple Add an image For an image add the following class next to the one where you set isMetro: metro-image Next, you can go and tab over to Styling. To add a background image add the url to the background image CSS property. https://media.audent.io/media/file/1555/Screen_Shot_2017-01-19_at_3.11.00_PM.png

https://media.audent.io/media/file/1671/MaterialOptions.png Ripple Effect Material allow's your buttons to show a ripple effect with a user clicks on them. This can be enabled or disabled in the Style Properties selection. To navigate there go to your Administrative Panel -> Appereance -> Styles -> Material. You will see the check box which will say "Ripple Button Effect". Welcome Block Offset This allow's you Welcome Block to go behind the page wrapper. When setting a offset which is done in an amount of pixels, that offset pulls the background down by that amount, and also scoots the content up by that amount. To be able to set offset, the numbers can range from negetive to positive number of pixels which will edit the offset of the Welcome Block. Not compatible when Content Wrapper style property is set to No Wrapper. If you are unsure about this setting, please go to Appearance -> Styles -> Material -> [UI.X] Global Settings. Then look for the drop down menu that says "Content Wrapper and set it any of the other settings which is not "No Wrapper". Material Without Wrapper https://media.audent.io/media/file/1688/MaterialThemeWithoutWrapper.png Material With Wrapper https://media.audent.io/media/file/1689/Materialwithwrapper.png Material Canvas Navigation Use the combined navigation/visitor tabs menu for either off-canvas or on-canvas navigation. Only works when one canvas panel is disabled and the other is set to custom template Metro Node Styling This add's a card like styling to the nodes in the node list, please note that that it may overwrite some other Node style properties. Title Bar Icons This setting allows icons to be used/seen on the main title bar. Jump to Top Link in Header Add a ^ symbol beside the search icon on the main Title Bar, which scrolls you up to the top of the webpage automatically. Top Control floating Footer Changes the Top Control call to action to a persistent footer button. Change Top Control to Icons Changes the top control to an icon if one is available.

https://media.audent.io/media/file/1671/MaterialOptions.png Material supports the intergration or add-on known as Quick Thread. Instead of having a "Create Thread" button off to the side of the screen we have included a create thread bubble. Click this bubble allows you to do a Quick Thread just like when you use it on a different theme. Changing Quick Thread Button Styles There are two different style of buttons that we have included in the Material Theme. One includes the icon like style which can be set up through the Material Options. Navigate to Appearance -> Styles -> Style Properties -> Material. To set it to icon, be sure these options are check off Top Control floating Footer Button & Change Top Control To Icons. The other style is done by unchecking Change Top Control To Icons. https://media.audent.io/media/file/1693/MaterialQuickThreadIcon.png https://media.audent.io/media/file/1694/MaterialQuickThreadButtonBox.png https://media.audent.io/media/file/1692/MaterialQuickThreadNewThreadPopUp.png The images above are based off one of our popular products at ThemeHouse. This product is known as the Quick Thread add-on, please click here for more information on purchasing it.

Material

Getting Started with Material