XF 2.2 How to develop my own style?

[ENGN]

Hello. Just yesterday I purchased a XenForo license, and you can consider that I am greener than green. I have a website designed with Bootstrap 5 and JavaScript scripts without jQuery. I installed the engine locally and started to figure out how to correctly insert corrections into templates, studied the syntax and so on. In short, I devoted a lot of time to this, and it’s still not clear to me ... I really want to repeat the design of my site on the forum so that they are similar to each other, but I don’t understand how to start and how to make my own adjustments to existing or new templates so as not to break the main structure of the engine and its JS scripts. Maybe there are some manuals or documentation on creating your own templates? I would love to hear the opinion and experience of experienced developers

Thank you in advance!

 

[Russ]

Hello, welcome to XenForo!

There is a bit of a learning curve with XenForo style system but it's a pleasure to work with.

Custom styles consist of:

• Style properties
• HTML templates
• LESS (CSS) templates

Style properties control various aspects of the overall design. You can change the color palette/basic colors inside style properties. There are other various things that style properties can help with, such as changing the navigation bar background color or font size for example. Style properties do not cover everything (nor should they).

HTML templates are pretty self-explanatory. The PAGE_CONTAINER contains the bulk of the pages code. Depending on the complexity of changes you want to make, you may need to edit this to change the header/footer. Custom JS can be loaded here as well in the head/body section.

LESS (CSS) templates comprise all the CSS used around the forums. XenForo provides you with the template extra.less to place any custom CSS. Ideally all your custom CSS should go here. You can edit other .less templates directly if you want to change quite a bit.

The more templates you edit, the higher likelihood of having templates you'll need to "update" when XenForo pushes out updates. Updating outdated templates is usually done automatically using the merge template function.

If you're adding a bunch of custom HTML, I sometimes like to create custom templates and include them where you want the code located using:

<xf:include template="custom_navigation" />

Cleans up the templates quite a bit.

As for integrating a style with any sort of the Bootstrap code. Are you wanting the navigation bar to match and want to integrate all the custom CSS for it? If so, just use the style properties / extra.less template to get the matching results.

 

[ENGN]

Thank you very much, @Russ, for your detailed answer. With your permission, I'll ask you a few questions

As for integrating a style with any sort of the Bootstrap code. Are you wanting the navigation bar to match and want to integrate all the custom CSS for it? If so, just use the style properties / extra.less template to get the matching results.

I studied the styles of other developers, including yours, and in most cases, extra.less is not touched. I think this is to leave room for the end user to edit. Right? I cite this, and would like to do the same, in case of some minor CSS edits

If I do want to change most of the design of the default template, do I just need to be prepared to update those templates when updating the engine itself?

 

[Russ]

I studied the styles of other developers, including yours, and in most cases, extra.less is not touched. I think this is to leave room for the end user to edit. Right? I cite this, and would like to do the same, in case of some minor CSS edits

Usually this is the case, yes. If the style is just for you, use extra.less but if there are plans to release it, ideally leave that for the end user.

If I do want to change most of the design of the default template, do I just need to be prepared to update those templates when updating the engine itself?

Updating styles become a bit of a pain when you don't keep up with the XF updates. If you wait years to upgrade your style, it could get a little messy. As long as you keep up with the XF updates using the merge system is usually really easy to work with.