- Joined
- Jan 1, 2001
- Messages
- 60,101
XenFans.com Article: XenForo Style System (part 2)
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog
You can find part 1 here: http://xenfans.com/threads/article-xenforo-style-system.1141/
Welcome back to our exciting tutorials that focus on aspects of XenForo. This time around we are continuing from where we left off on Part 1.
To do a rewind, we covered the explanation of the left navigation, Color Palette, and Style Properties sections. This time around we are covering Templates and Styles (refer to the image above this paragraph).
Lets dive into the Templates section of the style system. Firstly click Appearance in the top navigation. From that page click "Templates", third button in the top row. The template system is a mechanic that allows for the altering of certain aspects of your site. Such as "account.css", this template controls CSS parts of the style. This is not the same as Color Palette or Style Properties but they tie into .css templates (refer to the image above this paragraph).
Opening "account.css", first template on the list, class names are found in a proper order and indention (refer to the image above this paragraph). Editing aspects of this template will change them on the member account page. Play with it, edit some things and load a member page or edit your own. The changes will immediately be noticed, no matter how much you change, there is always a way to revert back to the original. Just click "Save and Exit" below the template edit box.
The template title will now be in red. Just click back into the template, look below the edit box and there will be a new button, "Revert Template" (refer to the image above this paragraph). This button allows for reverting a template back to its original, unaltered state. This is a good use if changes are unsatisfactory and starting over is the best option.
Once the template has been reverted there is no taking it back so make sure you have copies of changes just in case. A well known practice is copying a template and moving it to notepad or another text editor. Then edit away as long as you got a backup, if you haven't made any edits then no need to copy to a text editor.
Return to the Template list page (refer to the image above this paragraph). The search box above the list and to the right can be used to find a specific template by title. Click in that and type "message". Once it has found the template, click to open that template. Once loaded there are a bunch of tabs above the template edit box. These tabs pretty much explain that all of those templates are included in the "message" template.
At the top of the edit box, there is <xen:require css="message.css" /> that is an example of how to include other templates. Removing that line will remove the tab as well once "Save all Changes" or "Save and Exit" is clicked.
To explain a bit more, look through the "message" template, pay attention to certain aspects such as <li> tags, <xen:include> tags, and <xen:if> tags. These are used to show specific information in an organized manner (refer to the image above this paragraph). Removing any of these tags can cause serious problems in the displaying of posts and/or threads so be very careful when dealing with these (For more information on these tags and other tags, please read XenForo: Custom Message Display).
Going back to the top of the edit box to the tabs, you can click on each tab and it will load that specific template on the fly so no reloading of the page. Click on "ad_message_below", when that page loads, there is only one line for this template. This is an example that templates can contain one line or many lines. There is no limit so go crazy but don't go too crazy, large templates make for confusing editing.
Scroll back to the top and click Appearance, returning to the main page of the style system. Click on "Styles", first image or button in the second row.
At the top of the page is two buttons, "+Create New Style" and "Import a Style."
"+Create New Style" allows for creating of a new style that can be named anything (refer to the image above this paragraph). This is a good way to create custom styles that can be exported later for sharing or personal use only.
"Import a Style" allows for importing of pre-built styles that are obtained from XenForo's official site. The styles section is for managing of any styles currently installed. From this page you can click on "Templates," "Style Properties," or "Export" for any style you want from the right of the style. The red "X" image is used for deleting, this happens using LightBox popup so that there is no reloading of the page until deletion is confirmed.
Lastly, clicking on the style name will load a new page where the "Parent Style" can be changed, "Title" can be edited, "Description" can be added/edited, and a checkbox for "Allow user selection." After editing or adding information, click "Save Style" and done. This page is similar to when you click "+Create New Style" (refer to the image above this paragraph).
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.
You can find part 1 here: http://xenfans.com/threads/article-xenforo-style-system.1141/
Welcome back to our exciting tutorials that focus on aspects of XenForo. This time around we are continuing from where we left off on Part 1.
To do a rewind, we covered the explanation of the left navigation, Color Palette, and Style Properties sections. This time around we are covering Templates and Styles (refer to the image above this paragraph).
Lets dive into the Templates section of the style system. Firstly click Appearance in the top navigation. From that page click "Templates", third button in the top row. The template system is a mechanic that allows for the altering of certain aspects of your site. Such as "account.css", this template controls CSS parts of the style. This is not the same as Color Palette or Style Properties but they tie into .css templates (refer to the image above this paragraph).
Opening "account.css", first template on the list, class names are found in a proper order and indention (refer to the image above this paragraph). Editing aspects of this template will change them on the member account page. Play with it, edit some things and load a member page or edit your own. The changes will immediately be noticed, no matter how much you change, there is always a way to revert back to the original. Just click "Save and Exit" below the template edit box.
The template title will now be in red. Just click back into the template, look below the edit box and there will be a new button, "Revert Template" (refer to the image above this paragraph). This button allows for reverting a template back to its original, unaltered state. This is a good use if changes are unsatisfactory and starting over is the best option.
Once the template has been reverted there is no taking it back so make sure you have copies of changes just in case. A well known practice is copying a template and moving it to notepad or another text editor. Then edit away as long as you got a backup, if you haven't made any edits then no need to copy to a text editor.
Return to the Template list page (refer to the image above this paragraph). The search box above the list and to the right can be used to find a specific template by title. Click in that and type "message". Once it has found the template, click to open that template. Once loaded there are a bunch of tabs above the template edit box. These tabs pretty much explain that all of those templates are included in the "message" template.
At the top of the edit box, there is <xen:require css="message.css" /> that is an example of how to include other templates. Removing that line will remove the tab as well once "Save all Changes" or "Save and Exit" is clicked.
To explain a bit more, look through the "message" template, pay attention to certain aspects such as <li> tags, <xen:include> tags, and <xen:if> tags. These are used to show specific information in an organized manner (refer to the image above this paragraph). Removing any of these tags can cause serious problems in the displaying of posts and/or threads so be very careful when dealing with these (For more information on these tags and other tags, please read XenForo: Custom Message Display).
Going back to the top of the edit box to the tabs, you can click on each tab and it will load that specific template on the fly so no reloading of the page. Click on "ad_message_below", when that page loads, there is only one line for this template. This is an example that templates can contain one line or many lines. There is no limit so go crazy but don't go too crazy, large templates make for confusing editing.
Scroll back to the top and click Appearance, returning to the main page of the style system. Click on "Styles", first image or button in the second row.
At the top of the page is two buttons, "+Create New Style" and "Import a Style."
"+Create New Style" allows for creating of a new style that can be named anything (refer to the image above this paragraph). This is a good way to create custom styles that can be exported later for sharing or personal use only.
"Import a Style" allows for importing of pre-built styles that are obtained from XenForo's official site. The styles section is for managing of any styles currently installed. From this page you can click on "Templates," "Style Properties," or "Export" for any style you want from the right of the style. The red "X" image is used for deleting, this happens using LightBox popup so that there is no reloading of the page until deletion is confirmed.
Lastly, clicking on the style name will load a new page where the "Parent Style" can be changed, "Title" can be edited, "Description" can be added/edited, and a checkbox for "Allow user selection." After editing or adding information, click "Save Style" and done. This page is similar to when you click "+Create New Style" (refer to the image above this paragraph).
This concludes XenForo Style System tutorial articles. As mentioned throughout Part 1 and Part 2 there are more articles with further details about specific sections. If not found, stay tuned, they will be published when ready.