XF 2.0 Best practice for adding custom CSS?

[MhW]

Hi again everyone!

As per my last post, I'm beginning to dip my toes into XenForo style developmnet, beginning with the 2.0.x beta.

Note: I feel compelled to mention that I have searched, but many of the threads are old.

So in 2.0x beta I noticed there are 83 individual .less templates. I need to modify a lot of the existing CSS, and also add a lot of my own.

What is the best practice for doing both of these things? Will editing the existing .less files cause problems between version updates? Or is it recommended to create a new .less template for my style and use this to both override existing CSS and add new CSS?

Many thanks

 

[RobParker]

There's an extra.less file (extra.css in XF1) where it's recommended to add modifications. If they're substantial you might want a new child style and edit the .less templates directly in the child style. Then when you need to update the style, you update the parent and then revert any necessary changes in the child.

 

[Liam W]

A new style generally modifies the existing templates, and then when an update to XenForo is released an update to the style is also released if needed. Small style changes can normally be managed with the template merge system.

Liam

 

[MhW]

Brilliant, thank you both!

@RobParker Eventually it's my intention to release custom style(s) to the community, so have created my test style without a parent.

It's sounding like editing the existing .less files is the way to go.

 

[Steve F]

You should reserve the extra.less/css template for the end user customizations.

I usually create my own custom less/css template to add all customizations to, sometimes multiple ones depending on how extensive the style is.

While the merge system is nice it can become overwhelming at times when there are a huge number of edits. Best to include one template include with a single line than numerous edited lines to compare when updates come along.

 

[MhW]

Appreciate your input, thanks Steve!

I largely agree inasmuch as I'd love to only modify one core file. I had a quick look through your portfolio, did you achieve those front-end finishes by overriding the existing CSS in your newly included CSS template? Or were there core edits too?

 

[Steve F]

We built a style framework, essentially a parent style with its own CSS templates and style properties. So to answer we try not to edit to much of the core templates other than adding our own template calls and class names.