- Joined
- Jan 1, 2001
- Messages
- 60,101
XenFans.com Article: XenForo Style System
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog
The styling of XenForo is unique in its own way. The style system is quite different than that of other forum software but has some similarities. The displaying of the style is the same, through this system the admin controls how their XenForo looks, feels, and reacts.
Each style can be custom made to reflect how the owner wants their site to appear to users. The left navigation is similar to the more appeasing image buttons but not as fancy.
Below is a break down of what each page pertains to.
Lets break this down for those new to XenForo.
When viewing the admin area (admin.php), you have links in a left side navigation as well as a header navigation (refer to image above this paragraph). To access to the style system you will see Appearance in the header navigation. Upon clicking that; a new page displays with 6 options, we will only look at 4 of the 6 options (For further advanced learning, you may refer to XenForo: Style System Advanced).
Let us take a look at the Color Palette (refer to the image above this paragraph). To access the Color Palette, you will see an image of an artists palette with multiple colors. The is the first image in the first row of the Appearance page. Once the palette page loads you will see many boxes with different colors in each box. Don't freak out, this is normal.
Each color represents a certain aspect of your site. For example, @contentBackground refers to the background of the forums not the page background itself. Each part refers to a specific part of your site (For a more in depth description including images please refer to XenForo: Color Palette Detailed). By playing with each color; you will eventually find the color combination that suits your need.
Taking notice of the multi color slide bar with the Invert button below the slide bar (refer to the image above this paragraph). This allows for sliding of the bar and change colors at once making for an eye teasing experience. There are slide bars down the right side that controls each section of color palettes. The slide bar will change the colors for only that section allowing for more color combinations.
Clicking on each color box will bring up a color picker (refer to the image above this paragraph). Allowing for selection of a single color just for that particular aspect. Such as clicking the box for @dimmedTextColor brings up the color picker as shown in the image below this paragraph. Moving the circle or inputing your own hex code/RGB code changes the color but will not change on the page until you click "Okay." After clicking "Okay" and the color changing, it is not officially saved until you click "Update Style Properties" at the bottom of the page. After clicking, the page will reload allowing more editing if the changes are not satisfactory.
Back to the top of the Color Palette page (refer to the image above this paragraph), there is a drop down next to "Style:" and "Property Group:". The "Style:" drop down allows you to choose the style for editing of the style properties. The "Property Group:" drop down allows selection of the group of color palettes to edit. Each group has its own set of color palettes that controls areas of your site through a visible aid instead of editing via CSS files.
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog
In this two part article we will be diving into the features of the modern forum product XenForo that allows you to customize your community to your liking, making it unique and recognizable for your audience.
The styling of XenForo is unique in its own way. The style system is quite different than that of other forum software but has some similarities. The displaying of the style is the same, through this system the admin controls how their XenForo looks, feels, and reacts.
Each style can be custom made to reflect how the owner wants their site to appear to users. The left navigation is similar to the more appeasing image buttons but not as fancy.
Below is a break down of what each page pertains to.
Lets break this down for those new to XenForo.
When viewing the admin area (admin.php), you have links in a left side navigation as well as a header navigation (refer to image above this paragraph). To access to the style system you will see Appearance in the header navigation. Upon clicking that; a new page displays with 6 options, we will only look at 4 of the 6 options (For further advanced learning, you may refer to XenForo: Style System Advanced).
Let us take a look at the Color Palette (refer to the image above this paragraph). To access the Color Palette, you will see an image of an artists palette with multiple colors. The is the first image in the first row of the Appearance page. Once the palette page loads you will see many boxes with different colors in each box. Don't freak out, this is normal.
Each color represents a certain aspect of your site. For example, @contentBackground refers to the background of the forums not the page background itself. Each part refers to a specific part of your site (For a more in depth description including images please refer to XenForo: Color Palette Detailed). By playing with each color; you will eventually find the color combination that suits your need.
Taking notice of the multi color slide bar with the Invert button below the slide bar (refer to the image above this paragraph). This allows for sliding of the bar and change colors at once making for an eye teasing experience. There are slide bars down the right side that controls each section of color palettes. The slide bar will change the colors for only that section allowing for more color combinations.
Clicking on each color box will bring up a color picker (refer to the image above this paragraph). Allowing for selection of a single color just for that particular aspect. Such as clicking the box for @dimmedTextColor brings up the color picker as shown in the image below this paragraph. Moving the circle or inputing your own hex code/RGB code changes the color but will not change on the page until you click "Okay." After clicking "Okay" and the color changing, it is not officially saved until you click "Update Style Properties" at the bottom of the page. After clicking, the page will reload allowing more editing if the changes are not satisfactory.
Back to the top of the Color Palette page (refer to the image above this paragraph), there is a drop down next to "Style:" and "Property Group:". The "Style:" drop down allows you to choose the style for editing of the style properties. The "Property Group:" drop down allows selection of the group of color palettes to edit. Each group has its own set of color palettes that controls areas of your site through a visible aid instead of editing via CSS files.
In "Part 2" we will look at the Templates and Styles pages.
Stay tuned for the next part of this detailed guide.