XF 2 Tip extra.less - lightweight (overview) Styling

[XenFrodo]

Why fill your extra.less template when you can simply create a new template for each of your changes and then insert this new template into your extra.less template in just one line. Adding all custom code into extra.less will quickly make this very messy in favor of clarity

In this method, we simply create a new template and include it in extra.less.

Let's get started:

1. For this we will go to Xenforo ACP > Appreance > Template.

2. Click on "Add Template"

Name your template. Make sure that the name you choose is unique and is not used by other templates. The name should end with .less

For reference, I will call it MyCustom.less

3. Now paste your own code into the text area and click save at the bottom

You have now created a custom template.

Now it's time to call this template in your extra.less to make it work in the forum.

4. Go to the extra.less template in the same path as before

5. Paste the following code to call your custom template in extra.less

{{ include('mycustom.less') }}

Change "mycustom.less" with the name of the template you have assigned

6. Click SAVE and you're done.

You have now learned how to create a custom template in Xenforo and incorporate it into the work style.
Share this with someone who needs it. See you soon with another useful post!

 

[Splicho]

Nice tutorial, but...

You actually don't need to include it in extra.less, because then it will always load, on all pages.
Instead of including it in extra.less, you could just include it in the template you are using your css in.

So let's say you rework entire member page, so what you do is, create a new template with css you only use on the members page.
In example:

member_view

 

[XenFrodo]

Nice tutorial, but...

You actually don't need to include it in extra.less, because then it will always load, on all pages.
Instead of including it in extra.less, you could just include it in the template you are using your css in.

So let's say you rework entire member page, so what you do is, create a new template with css you only use on the members page.
In example:

member_view

View attachment 39942

View attachment 39943

SplichoSplicho how does it look like we can expect a turorial series about creating styles with shadcn in the future if your schedule allows it?

 

[one_finger_man]

not every new pages works for some themes or not every one know how to the new pages what they use in there extra.less if it dont break any thing why fix it with a new page and if things get messed up you can all ways start over be clearing it out of your extra less thats why they made the button revise

 

[XenFrodo]

not every new pages works for some themes or not every one know how to the new pages what they use in there extra.less if it dont break any thing why fix it with a new page and if things get messed up you can all ways start over be clearing it out of your extra less thats why they made the button revise

one_finger_manI understand this approach of "finding everything under one hood", but for me personally this method is currently the cleaner one (I somehow get along better with it). But I'm still at the beginning of the journey myself (currently still testing on the local server)

I also like Splicho's point.

 

[Splicho]

I understand this approach of "finding everything under one hood", but for me personally this method is currently the cleaner one (I somehow get along better with it). But I'm still at the beginning of the journey myself (currently still testing on the local server)

I also like Splicho's point.

XenFrodoMy method is the method the devs from XenForo used/are using ^^ XD