Joomla 3.x. How to add more tabs (based on template 48543)

Hello! This tutorial is going to show you how to add more tabs in Joomla 3.x (based on template 48543).

Joomla 3.x. How to add more tabs (based on template 48543)

In order to do this, please just follow steps listed below:

1. Reach public_html directory on your server and reach template files.

2. Next open templates/themexxxx folder and look for templateDetails.xml file. Look for this part of code:

   <position> tab-1</position>
   <position> tab-2</position>
   <position> tab-3</position>
   

   After each <position>tab-3</position> please add position for tab 4 by coping code and replacing tab-3 with tab-4.

   Once you are done, click on Save button on the right top:

   

3. Next, please go back to themexxxx folder and look for template.css file in css folder.

   In that file you have to look for each tab-3 code and add the same code for tab-4 below it:

   

4. Once you are done with adding code for tab-4, we need to add font awesome icon for new tab, place this code in template.css file:

   .tabs-services .nav-tabs .num4 a:before {
     content: "\f10a";} 
     

   In that code you can replace “\f10a” with any number of icon you need. Save changes:

   

5. Next, open responsive.css file. Perform the same steps as with template.css file, look for each tab-3 code and add the same code for tab-4 below it.

6. Log into Joomla administrative section. Navigate to Content -> Category manager and create new category.

   Now we have to create a new article and assign it to the created category. Click on Content -> Article manager, click New button on the left. From the drop down on the right select created category:

   

7. Next, go toExtensions->Module manager and create new module. Module Type has to be Artciles-newsflash(Advanced). In Category tab select the category that was created and in Position tab type tab-4.

   Go to Advanced tab and set Module Class Suffix: tab-4 and add blank space before it, then click on Save button:

   

8. Navigate to Content->Article manager, click New and create new article, enter article name and on the left select Tabs on services category.

   In Content tab of article we have to put this code for loading position:

   		{loadposition tab_4}
   		

   Click on Save button:

   

9. Go to Extensions->Module manager, look for Tabs on services module in the list. In Number of Articles field set 4 instead of 3 so we can show new created tab.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to add more tabs (based on template 48543)