Creating custom style: guide to beginners, best practices, tips and tricks
So, I've been making styles for XenForo for over 2 years now and have some experience to share with you, my beloved style makers.
Requirements for readers:
First of all you should learn how the forum works if you already didn't do that. Just explore all the pages that XenForo has, take part in the community.
Only then you can visit Have You Seen section to understand some of the basic tools that XenForo provides for developers. (yes, you are a developer from now)
I suggest you to watch:
Now when you know some of the basic stuff you can already create your style.
Do I need to create a photoshop mockup first?
No, if you know how your design will look like you don't need to do extra job. But if you have a good design idea and don't have time to code it, it's better to create a mini-mockup that features this idea. To sum up: recreating XenForo design in photoshop is a very time consuming process and in 90% of cases the best choice is just start coding your design.
Creating your first style
Create an empty style with no parent styles. If your style has any parent styles that may increase a chance of getting a bug, because your new style may inherit some of the properties from the parent style and the won't be exported in the final xml file.
Use /styles/default/*your_style*/ folder for your style, unless if you want to replace most of XenForo graphics with your own files.
Using style properties
Style properties will help you to customize your style, use them if possible, instead use templates. You also may wish to create your own properties. When creating a style property place your style prefix before the name of new property, that way it'll be easier to distinguish them from default properties.
To add your own graphics use @imagePath/*your_style*/ path.
Colour scheme
All colours in the colour scheme differ by hue and brightness. Colours go from darkest to the lightest. Primary and Secondary groups divide colours by hue. Try to follow these rules when creating your own colour properties or modifying XenForo default colours.
How to properly include and orgainze your css
It is best to contain all your css edits in a separate template (CSS template container). It is not any different from any other CSS templates, it is just used to collect all your custom CSS into single template. I usually call it *style_name*.css. For example if my style is called 'MyStyle' then the template name will be mystyle.css.
But it is hard to use only one template for all edits and that's why you should include other custom templates in this template-container. In addition I suggest you to use XenForo-related names for your templates. For example if you want to modify something in sidebar you should create template mystyle_sidebar.css, that will be loaded in our mystyle.css with this simple code:
Template: mystyle.css
Content: <xen:include template="mystyle_sidebar.css" />
Remember this code by heart.
So in result we will have a structure like this: (you can use your own structure, this is just my suggestion)
mystyle.css
mystyle_sidebar.css
mystyle_public.css
mystyle_new_block.css
mystyle_extra.css
Did you notice mystyle_extra.css? Always include this template at the end of your css. It should be used by other people who want to add or change something in your code without modifying your original templates.
Finally, we need to load our code into XenForo. I use xen:require for that and require my templates from template ad_above_content. So I add this code to the template:
My choice is simple to explain: ad templates change rarely and ad_above_content is included almost everywhere. You could choose your own template to include your code.
Update: you may use PAGE_CONTAINER template and paste <xen:require css="mystyle.css" /> there if you plan to modify PAGE_CONTAINER with other stuff.
Modifying XenForo default css
Changing default css is the most common thing when making a custom style. To change the behaviour of the selector just simply clarify it.
For example we have #headerMover #headerProxy selector but we want to owerwrite it.
We create mystyle_public.css and add there:
And then include that template into mystyle.css
You may use html, body elements as extend-selectors, other classes, id's, elements (but please only use elements with '>' selector, otherwise site load may decrease).
I wish you success.
So, I've been making styles for XenForo for over 2 years now and have some experience to share with you, my beloved style makers.
Requirements for readers:
- You need a basic understanding of html and css. Internet has a lot of resources devoted to this topic.
- Desire to study.
First of all you should learn how the forum works if you already didn't do that. Just explore all the pages that XenForo has, take part in the community.
Only then you can visit Have You Seen section to understand some of the basic tools that XenForo provides for developers. (yes, you are a developer from now)
I suggest you to watch:
Now when you know some of the basic stuff you can already create your style.
Do I need to create a photoshop mockup first?
No, if you know how your design will look like you don't need to do extra job. But if you have a good design idea and don't have time to code it, it's better to create a mini-mockup that features this idea. To sum up: recreating XenForo design in photoshop is a very time consuming process and in 90% of cases the best choice is just start coding your design.
Creating your first style
Create an empty style with no parent styles. If your style has any parent styles that may increase a chance of getting a bug, because your new style may inherit some of the properties from the parent style and the won't be exported in the final xml file.
Use /styles/default/*your_style*/ folder for your style, unless if you want to replace most of XenForo graphics with your own files.
Using style properties
Style properties will help you to customize your style, use them if possible, instead use templates. You also may wish to create your own properties. When creating a style property place your style prefix before the name of new property, that way it'll be easier to distinguish them from default properties.
To add your own graphics use @imagePath/*your_style*/ path.
Colour scheme
All colours in the colour scheme differ by hue and brightness. Colours go from darkest to the lightest. Primary and Secondary groups divide colours by hue. Try to follow these rules when creating your own colour properties or modifying XenForo default colours.
How to properly include and orgainze your css
It is best to contain all your css edits in a separate template (CSS template container). It is not any different from any other CSS templates, it is just used to collect all your custom CSS into single template. I usually call it *style_name*.css. For example if my style is called 'MyStyle' then the template name will be mystyle.css.
But it is hard to use only one template for all edits and that's why you should include other custom templates in this template-container. In addition I suggest you to use XenForo-related names for your templates. For example if you want to modify something in sidebar you should create template mystyle_sidebar.css, that will be loaded in our mystyle.css with this simple code:
Template: mystyle.css
Content: <xen:include template="mystyle_sidebar.css" />
Remember this code by heart.
So in result we will have a structure like this: (you can use your own structure, this is just my suggestion)
mystyle.css
mystyle_sidebar.css
mystyle_public.css
mystyle_new_block.css
mystyle_extra.css
Did you notice mystyle_extra.css? Always include this template at the end of your css. It should be used by other people who want to add or change something in your code without modifying your original templates.
Finally, we need to load our code into XenForo. I use xen:require for that and require my templates from template ad_above_content. So I add this code to the template:
Kod:
<xen:require css="mystyle.css" />My choice is simple to explain: ad templates change rarely and ad_above_content is included almost everywhere. You could choose your own template to include your code.
Update: you may use PAGE_CONTAINER template and paste <xen:require css="mystyle.css" /> there if you plan to modify PAGE_CONTAINER with other stuff.
Modifying XenForo default css
Changing default css is the most common thing when making a custom style. To change the behaviour of the selector just simply clarify it.
For example we have #headerMover #headerProxy selector but we want to owerwrite it.
We create mystyle_public.css and add there:
Kod:
body #headerMover #headerProxy
{
*things we want to add or overwrite*
}And then include that template into mystyle.css
You may use html, body elements as extend-selectors, other classes, id's, elements (but please only use elements with '>' selector, otherwise site load may decrease).
I wish you success.