How to use tabs to separate your add-on options

[Fuhrmann]

Fuhrmann submitted a new resource:

How to use tabs to separate your add-on options (version 1.0) - I'll teach you how to separate your add-ons options using tabs.

Objective:​

I will teach you how to tweak the add-on options page to display something like this:


View attachment 26018

I strongly recommend you to read my others tutorials to know better how XenForo works:

How to show a forum in a page
How to read and write...

Read more about this resource...

 

[Allan]

Thank you for this tutorial @Fuhrmann

One question, where put this ?

<li id="#1" class="profileContent">EXAMPLE OPTION 1<li>
<li id="#2" class="profileContent">EXAMPLE OPTION 1<li>

 

[Fuhrmann]

Thank you for this tutorial @Fuhrmann

One question, where put this ?

<li id="#1" class="profileContent">EXAMPLE OPTION 1<li>
<li id="#2" class="profileContent">EXAMPLE OPTION 1<li>

You need to create it in the admin templates section.AdminCP -> Development -> Admin Templates and click in the + Create Admin Template button:

Template Name: OptionsAsTabs
Content: The content of your template. (the content is in the tutorial)

 

[JohnSmith001]

Do you have a completed addon you can share? I'm not comfortable making one.

 

[JordanH]

Does not seem to be working for me. The tab options do not show up.

Edit:
NVM, my own stupidity. Working as intended! Awesome!!

 

[[xFv]]

Is it possible for this to be done in the Style Properties instead?