- Compatible XF Versions
- 1.3
- 1.4
- 1.5
Stylium Framework User Guide
Overviewtop
Stylium Framework is a style control system. Cleverly hidden behind the style, it will be installed automatically when you install Brivium premium styles. It provides an intuitive user interface with separate sections and clear descriptions for each parameter.
You could get Stylium Framework when you install Brivium premium styles.
So there are two ways to try it out: purchase a Brivium premium styles or more simply, try it in our Demo Switcher.
In this guide, you could found:
1. Installation and Upgrade Stylium Frameworktop
1. Installation and Upgrade Stylium Framework:
1.1.To install a Stylium Framework's Style:
1.2.To upgrade Stylium Framework:
We will frequently upgrade and update the newest version of Stylium and child styles and send through your email our announcements or you could download directly from our website and repeat 4 Steps above similarity to upgrade a Stylium Framework, except for Step 3 and Step 4 which will be replaced by the next instructions:
2. How to change General elements?top
In order to change general elements, you need:
Avatar Styles
This settings allow you to change style of member's avatars. You could choose Default Style (square shape) or Circle (round shape).
[Broken External Image]:http://brivium.com/data/docs/pic4.jpg
Custom Favicon
You could add an image by URL format (Size 16px x 16px PNG/GIF). It will represent your website's favicon.
Page Style
This settings allows you to choose style layout by 4 options: Wide, Boxed with Cover, Boxed 1 and Boxed 2
Boxed Max Page Width
Allows you to customize the maximum width of boxes on page. Our default width is 1170px.
This controls the height of the breadcrumb. Default XenForo uses 24px.
Global Border Radius
This controls the radius of border. Default XenForo uses 2px.
Global Big Border Radius
This controls the radius of big border. Default XenForo uses 4px.
[Broken External Image]:http://brivium.com/data/docs/pic5.jpg
3. How to change Styler elements?top
In order to change Styler elements, you need:
Title Font Selectors: This settings define elements that title font setting applies to. And you need enter element’s name into text box to use this control.
Similarly with other control, you need entering element’s name to the fields next to the title of control. Below is control list that you can defined.
After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
4. How to change Header & Navigation elements?top
In order to change Header & Navigation elements, you can:
Enable Login Handle in Overlay:
If checking, this control will disable the normal XenForo login handle drop down and enable a overlay for logging in. When you prefer a overlay for logging in style than the normal XenForo login, you should use this control to do it.
Enable Navigation Bar Login:
With this control, your forum can display Log in or Sign up as navigation link. Tick if you wish it.
Replace Home Tab as Icon:
Now, websites usually replace Home tab as an Icon. You can also do it for your forum. With this control, you need only tick in this checked box, your Home tab will be replace with a icon.
Display Navigation Drop-down Arrows:
If this control is checked, navigation tabs' arrows will be visible on your site.
Enable Mini Avatar in Visitor Tabs:
With this control, you can seting to display a Mini Avatar next to a username in the visitor tabs. To do it, you need tick in this checked box.
Navigation with Logo:
If this check box is checked, a logo image is next to the navigation and removes the default logo block.
Enable Sub-Navigation:
With this control, you can remove the selected sub-navigation tab links and move it into a dropdown. Tick if you wish.
Enable Sticky Navitgation:
This control allow you seting to your navigation will sticks with you as you scroll.
Enable Sticky Moderator Bar:
Similarly, if you choose this control, your Moderator Bar will sticks with you as you scroll.
Moreover, you can also change height of Sticky Navigation and Sticky Moderator Bar by using Sticky Navigation Height control and Sticky Moderator Bar Height control. Enter a fit value that you feel glad to do.
Finally, you must click to “Update Style Properties” button to apply for your XenForo or click “Undo Changes" to cancel.
5. How to change Nodes elements?top
In order to change Nodes elements, you can:
Node Style
It allows you to choose selected displaying style for forums. There are two styles that you can choose: Default style and Dual column style. With default style, nodes in your forum will display in one column. And with dual column style, nodes in your forum will display in two column.
Enable Node Last Post
This control allows you to enable/disable the node last post in the nodes. Cheking or unchecking to do it.
Enable Node Controls
You can also enable or disable the node controls for nodes by ticking in this check box.
Enable Category Description Tooltip
If you choose this check box. It will disable the tooltip for the category description on hover. Otherwise, it will display below the title of node.
Enable Collapsible Category
This control allows you to customize a query toggle to collapse your category. Let’s check if you wish.
Category Collapse Speed
This line allows you to control the category collapse speed. Enter a value in the text field.
More over, you also can define font Awesome icon that will be displayed with category collapse trigger class control and category expand trigger class.
You need only enter a value into next text field.
Finally, After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selection.
6. How to change Sidebar?
In order to change Sidebar elements, you can:
Enable Sidebar
Tick in this checked box if you want to enable/disable the sidebar at the front- end.
Display Sidebar Icons
This control allows to display a icon next to the sidebar heading.
Change Sidebar to Left
In the default theme, the sidebar is showed in the right side of the web. And you can change it by tick in check box “Change Sidebar to Left” in this panel
Responsive Sidebar
With this control, you can change width of the sidebar in responsive. There are three width that you can choose is: Wide Width: 0 - Medium Width: 1 - Default: 2
Pick one of three that you feel it fits to your site!
Enable Collapsible Sidebar
This control allows you to set a query toggle to collapse your sidebar. Tick in check box if you wish.
Enable Collapsible Sidebar Block
You can control a query toggle to collapse your sidebar block with this control.
Sidebar Collapse Speed
You could also change the sidebar collapse speed by changing value in the next text field.
After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
7. How to change Footer and Social elements?
When manually setting footer elements, you need:
Enable Advanced Footer
This control allows you display or hire advanced footer for adding descriptions and menus. Tick in the checked box if you want to display full footer.
Number footer column
Footer is divided into four collumns (Default of XenForo system). However, you can change this by enable or disable these collumns. Especially, we can uncheck this checked box “Enable Footer First Column” to disable all of content in the first collumn. Moreover, you can also change other properties of first column footer. For example:
Display Debug Informations
Display debug informations to specific usergroups ID separated by ','. Example: 3,4
“Go To Top” Button
When you scroll upward the bottom, a “Go to top” button will be displayed on the right of the screen.
Enable Go To Top Button
Check or uncheck in this check box to Display or hire “Go to Top” button on the right of the screen when scroll upward the bottom of the site.
Go to Top Style
This control allows you to define Style used in the "Go to Top" button. And you may use HTML to do it.
Scroll Speed
With this control, you can also set scroll speed effect when the button is clicked. Let’s enter a number if you wish to next text field.
Button Visibility
This control allows some changes when the "Go to Top" button is visible. Enter a height value that you wish.
RSS Icon
The final control is on the footer that you can change into “Enable RSS Icon”. This control allows you to display or hide the RSS icon in the footer by checking or unchecking the control.
Social Media
Enable Social Media: Tick in this check box if you want to show the footer. The system allows you to link to:
After you selected, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
8. How to change Setting controls?
To change Settings control, you need:
Overviewtop
Stylium Framework is a style control system. Cleverly hidden behind the style, it will be installed automatically when you install Brivium premium styles. It provides an intuitive user interface with separate sections and clear descriptions for each parameter.
You could get Stylium Framework when you install Brivium premium styles.
So there are two ways to try it out: purchase a Brivium premium styles or more simply, try it in our Demo Switcher.
In this guide, you could found:
- How to install and upgrade a Stylium Framework?
- How to optimize their tools? Including in:
- Change General Elements
- Change Styler Elements
- Change Header and Navigation Elements
- Change Nodes Element
- Change Sidebar
- Change Footer
- Change Setting Controls
1. Installation and Upgrade Stylium Frameworktop
1. Installation and Upgrade Stylium Framework:
1.1.To install a Stylium Framework's Style:
- Step 1: To download a Stylium Framework, you must purchase one of our premium styles on our website (http://brivium.com/xenforo-styles/?type=paid). After completing payment, we could provide you a link to download it and you can start download immediately. The file you receive is a ZIP file.
- Step 2: And then, Extract zip file contained style files. Inside the downloaded folder, there are two main folders, including in /Upload and /XML. In the next step, you should open the /Upload file and copy all of folders and files inside into your root XenForo directory based on an https docs, overriding any existing files on that.
- Step 3: After uploading all files, you could open your XenForo in browser, login into admin control panel. Look at Home menu, on the left side of screen, you could see "Add-ons", you could click on "Install Add-on" and a new page appears. Browse the first file named INSTALL_FIRST_addon-Brivium_StyliumFramework.xml (Inside the XML file in the folder).
Step 4: And then, please choose Appearance tab, then click at "Import a Style" and a "Import a Style" window appears. Browse INSTALL_SECOND_style-NameOfStyle.xml, for example INSTALL_SECOND_style-Aluminium.xml. At “Import as”, please click on "Child of style" and choose “Stylium Framework”. In the following step, you click on Import and wait until that the system completes setting progress
Step 5: Lastly, after you installed Stylium Framework and child style, you have not completed yet. To apply on your XenForo, you have to probably change the default style and customize style. Click on Appearance > Styles > and you find Stylium Framework and click on that to choose this Style.
1.2.To upgrade Stylium Framework:
We will frequently upgrade and update the newest version of Stylium and child styles and send through your email our announcements or you could download directly from our website and repeat 4 Steps above similarity to upgrade a Stylium Framework, except for Step 3 and Step 4 which will be replaced by the next instructions:
- Step 1 and Step 2: Do the same thing as you did as mentioned above.
- Step 3: After uploading all files, you could open your XenForo in browser, login into admin control panel. Look at Home menu, on the left side of screen, you could see "Add-ons", you could click on "List Add-ons" and a new page appears. Navigate into "Controls" button of Brivium - Stylium Framework add-on and click on "Upgrade Add-on". Browse the first file named INSTALL_FIRST_addon-Brivium_StyliumFramework.xml (Inside the XML file in the folder).
Step 4: And then, please choose Appearance tab, then click at "Import a Style" and a "Import a Style" window appears. Browse INSTALL_SECOND_style-NameOfStyle.xml, for example INSTALL_SECOND_style-Aluminium.xml. At “Import as”, please click on "Overwrite style" and choose “NameOfStyle”, for example Aluminium. In the following step, you click on Import and wait until that the system completes setting progress.
2. How to change General elements?top
In order to change general elements, you need:
- Login into the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] General
Avatar Styles
This settings allow you to change style of member's avatars. You could choose Default Style (square shape) or Circle (round shape).
[Broken External Image]:http://brivium.com/data/docs/pic4.jpg
Custom Favicon
You could add an image by URL format (Size 16px x 16px PNG/GIF). It will represent your website's favicon.
Page Style
This settings allows you to choose style layout by 4 options: Wide, Boxed with Cover, Boxed 1 and Boxed 2
Boxed Max Page Width
Allows you to customize the maximum width of boxes on page. Our default width is 1170px.
- Enable Title on Forum Index & Portal: Allows you to enable/disable the title bar on Forum Index & Portal.
- Enable Breadcrumb on Forum Index: Allows you to enable/disable the breadcrumb on Forum Index.
- Enable Bottom Breadcrumb: Allows you to enable/disable the bottom breadcrumb.
This controls the height of the breadcrumb. Default XenForo uses 24px.
Global Border Radius
This controls the radius of border. Default XenForo uses 2px.
Global Big Border Radius
This controls the radius of big border. Default XenForo uses 4px.
[Broken External Image]:http://brivium.com/data/docs/pic5.jpg
3. How to change Styler elements?top
In order to change Styler elements, you need:
- Log in to the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] Styler
Title Font Selectors: This settings define elements that title font setting applies to. And you need enter element’s name into text box to use this control.
Similarly with other control, you need entering element’s name to the fields next to the title of control. Below is control list that you can defined.
- Body Background Color Selectors: this control allows you to select elements that body background color applies to.
- Primary Color Selectors: Selects elements that primary color applies to.
- Primary Color Background Selectors: Selects elements that primary color applies to.
- Primary Color Border Selectors: Selects elements that primary color applies to.
- Primary Color Border Top Selectors: Selects elements that primary color applies to.
- Secondary Color Selectors: Selects elements that secondary color applies to.
- Secondary Color Background Selectors: Selects elements that secondary color applies to.
- Secondary Color Border Selectors: Selects elements that secondary color applies to.
- Secondary Color Border Top Selectors: Selects elements that secondary color applies to.
- Tertiary Color Selectors: Selects elements that tertiary color applies to.
- Tertiary Color Background Selectors: Selects elements that tertiary color applies to.
- Tertiary Color Border Selectors: Selects elements that tertiary color applies to.
- Tertiary Color Border Top Selectors: Selects elements that tertiary color applies to.
After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
4. How to change Header & Navigation elements?top
In order to change Header & Navigation elements, you can:
- Log in to the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] Header & Navigation
Enable Login Handle in Overlay:
If checking, this control will disable the normal XenForo login handle drop down and enable a overlay for logging in. When you prefer a overlay for logging in style than the normal XenForo login, you should use this control to do it.
Enable Navigation Bar Login:
With this control, your forum can display Log in or Sign up as navigation link. Tick if you wish it.
Replace Home Tab as Icon:
Now, websites usually replace Home tab as an Icon. You can also do it for your forum. With this control, you need only tick in this checked box, your Home tab will be replace with a icon.
Display Navigation Drop-down Arrows:
If this control is checked, navigation tabs' arrows will be visible on your site.
Enable Mini Avatar in Visitor Tabs:
With this control, you can seting to display a Mini Avatar next to a username in the visitor tabs. To do it, you need tick in this checked box.
Navigation with Logo:
If this check box is checked, a logo image is next to the navigation and removes the default logo block.
Enable Sub-Navigation:
With this control, you can remove the selected sub-navigation tab links and move it into a dropdown. Tick if you wish.
Enable Sticky Navitgation:
This control allow you seting to your navigation will sticks with you as you scroll.
Enable Sticky Moderator Bar:
Similarly, if you choose this control, your Moderator Bar will sticks with you as you scroll.
Moreover, you can also change height of Sticky Navigation and Sticky Moderator Bar by using Sticky Navigation Height control and Sticky Moderator Bar Height control. Enter a fit value that you feel glad to do.
Finally, you must click to “Update Style Properties” button to apply for your XenForo or click “Undo Changes" to cancel.
5. How to change Nodes elements?top
In order to change Nodes elements, you can:
- Log in to the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] Nodes
Node Style
It allows you to choose selected displaying style for forums. There are two styles that you can choose: Default style and Dual column style. With default style, nodes in your forum will display in one column. And with dual column style, nodes in your forum will display in two column.
Enable Node Last Post
This control allows you to enable/disable the node last post in the nodes. Cheking or unchecking to do it.
Enable Node Controls
You can also enable or disable the node controls for nodes by ticking in this check box.
Enable Category Description Tooltip
If you choose this check box. It will disable the tooltip for the category description on hover. Otherwise, it will display below the title of node.
Enable Collapsible Category
This control allows you to customize a query toggle to collapse your category. Let’s check if you wish.
Category Collapse Speed
This line allows you to control the category collapse speed. Enter a value in the text field.
More over, you also can define font Awesome icon that will be displayed with category collapse trigger class control and category expand trigger class.
You need only enter a value into next text field.
Finally, After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selection.
6. How to change Sidebar?
In order to change Sidebar elements, you can:
- Log in to the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] Sidebar
Enable Sidebar
Tick in this checked box if you want to enable/disable the sidebar at the front- end.
Display Sidebar Icons
This control allows to display a icon next to the sidebar heading.
Change Sidebar to Left
In the default theme, the sidebar is showed in the right side of the web. And you can change it by tick in check box “Change Sidebar to Left” in this panel
Responsive Sidebar
With this control, you can change width of the sidebar in responsive. There are three width that you can choose is: Wide Width: 0 - Medium Width: 1 - Default: 2
Pick one of three that you feel it fits to your site!
Enable Collapsible Sidebar
This control allows you to set a query toggle to collapse your sidebar. Tick in check box if you wish.
Enable Collapsible Sidebar Block
You can control a query toggle to collapse your sidebar block with this control.
Sidebar Collapse Speed
You could also change the sidebar collapse speed by changing value in the next text field.
After you modify, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
7. How to change Footer and Social elements?
When manually setting footer elements, you need:
- Log in to the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, Select ╔ [Stylium] Footer
- Settings: To customize the main functions.
- Other: To customize color.
Enable Advanced Footer
This control allows you display or hire advanced footer for adding descriptions and menus. Tick in the checked box if you want to display full footer.
Number footer column
Footer is divided into four collumns (Default of XenForo system). However, you can change this by enable or disable these collumns. Especially, we can uncheck this checked box “Enable Footer First Column” to disable all of content in the first collumn. Moreover, you can also change other properties of first column footer. For example:
- Footer First Column Title: Enter your optional value to change title of first column.
- Footer First Column Icon: Enter your optional value to change icon of the first column.
- Footer First Column Content: Enter your content, if you want to change the first column content
Display Debug Informations
Display debug informations to specific usergroups ID separated by ','. Example: 3,4
“Go To Top” Button
When you scroll upward the bottom, a “Go to top” button will be displayed on the right of the screen.
Enable Go To Top Button
Check or uncheck in this check box to Display or hire “Go to Top” button on the right of the screen when scroll upward the bottom of the site.
Go to Top Style
This control allows you to define Style used in the "Go to Top" button. And you may use HTML to do it.
Scroll Speed
With this control, you can also set scroll speed effect when the button is clicked. Let’s enter a number if you wish to next text field.
Button Visibility
This control allows some changes when the "Go to Top" button is visible. Enter a height value that you wish.
RSS Icon
The final control is on the footer that you can change into “Enable RSS Icon”. This control allows you to display or hide the RSS icon in the footer by checking or unchecking the control.
Social Media
Enable Social Media: Tick in this check box if you want to show the footer. The system allows you to link to:
- Facebook Link: Facebook Link on Footer (Example: http://facebook.com/briviumllc)
- Twitter Link: Twitter Link on Footer (Example: http://twitter.com/briviumllc)
- Youtube Link: Youtube Link on Footer (Example: http://www.youtube.com/user/brivium)
- Google + Link: Google Plus Link on Footer (Example: http://plus.google.com/ BriviumLLC)
- Dribbble Link: Dribbble Link on Footer (Example: http://dribbble.com/brivium)
- Flickr Link: Flickr Link on Footer (Example: http://www.flickr.com/photos/brivium)
- Linkedin Link: Linkedin Link on Footer (Example: http://linkedin.com/in/brivium)
- Pinterest Link: Pinterest Link on Footer (Example: http://www.pinterest.com/brivium)
- Vimeo Link: Vimeo Link on Footer (Example: https://vimeo.com/brivium)
- Deviant Art Link: Twitter Link on Footer (Example: http://briviumllc.deviantart.com)
- RSS Link: RSS Link on Footer (Example: http://brivium.com/index.php?forums/-/index.rss)
- Email: Email on Footer in text field (Example: [email protected])
After you selected, you must click “Update Properties Style” button to finish or click “Undo Change” button to cancel all of your selections.
8. How to change Setting controls?
To change Settings control, you need:
- Login into the Admin Control Panel.
- Select the Appearance tab.
- Click on the Style Properties icon.
- From the list of Style Property groups, select ╔ [Stylium] Setting
- Change Your Layout Style
- Change Title Font
- Change Your Color Skin
- Change Patterns for Boxed Version
- Tick in check box “Enable Layout Change” to enable layout selector in Stylium Setting Panel at the frontend.
- Tick in check box “Enable Background Patterns” to enable body pattern background chooser in Stylium Setting Panel at the frontend.
- Tick in check box “Enable Title Font” to enable title font chooser in Stylium Setting Panel at the frontend.
- You can also select default font for font style selector by selecting a font in combobox Title Font.
- Tick in check box “Enable Background Images” to enable body images background chooser in Stylium Setting Panel at the frontend.
- A textbox Body Background Image Source allow you to import a path to your background image folder. The path is related to your XenForo root directory, including in patternx.png (x from 1 to 10). bkgdy.jpg( y from 1 to 5).
- Tick in the checked box “Enable Color Picker” to enable color picker in Stylium Setting Panel at the frontend.
- Primary Color
- Secondary Color
- Tertiary Color
- Body Background Color
- Body Background Size
- Body Background Image
- Body Background Repeat
- Body Background Position
- In Body Background Size textbox, you can import one of these values: auto|length|cover|contain|initial|inherit (pick one). They are Css3 properties that can be defined.
- The Body Background Image textbox will save a path to your background image which you import. This path is related to your XenForo root directory.
- Body Background Repeat: In this parameter, The background-repeat property sets if/how a background image has repeated. There are six values for you pick up, they are repeat|repeat-x|repeat-y|no-repeat|initial|inherit.
- The final is Body Background Position parameter, the background-position property can be set at the starting position of a background image.
You could choose the color you want!
After you change parameters, you must click “Update Style Properties” to update.
NOTE:
If Stylium Setting Panel at the frontend is turned on at the frontend (Default), you could change parameter layouts but you would not need go to Administrator.
