XF 2.1 Questions about custom styling practices

[alternadiv]

I’ve been messing around with creating heavily modified styles on my test board just to practice learning HTML/CSS.

I have a few questions for those that make styles often.

1. If you are creating a fully custom style and not just changing basic properties, is it worth it to add CSS in the extra CSS boxes of the style properties pages? Or is it easier to manage if you don’t add anything there and put all CSS in your CSS templates?
2. I’m assuming extra.less is usually not used for much when creating a fully custom style. So, is it more common to create new CSS and HTML templates for your style so everything is easier to manage, or do you edit the default XF templates and then deal with outdated templates in the future?
3. If creating new CSS and HTML templates, I believe you would call your custom CSS template at the very top of the main default XF CSS template, yes? But how do you do the same for a custom HTML template? A lot of edits would be to PAGE_CONTAINER; how can you make those edits in your own template and have PAGE_CONTAINER apply them?
4. What tools does turning on design mode give you?

 

[alternadiv]

Any advice on this?

 

[Paul B]

1. If you can do it using SPs then use them - no point in using the extra.less template if you don't have to. It makes it easier to identify the components you have customised.

2. You can't create your own templates to replace the core ones. If what you want to achieve can't be done with CSS then you would need to edit the templates directly. An alternative approach is to use template modifications but that's really aimed at developers, so not something you would typically use when styling your own site.

3. As above, you don't create your own templates to replace the core ones.

4. https://xenforo.com/xf2-docs/dev/designing-styles/