Documentation Style

Site tools have Documentation Style where you can load articles from one or many categories.

 If you create a Documentation with different articles, it is very handy to use it, because it shows those articles in one page with nice Documentation Style

Check the demo below

Team module documentation

Creating custom field

First step is to create custom field which is needed to add social icons for each team member. If is not needed to have social media, skip this step.

In joomla backend go in Content - Fields.

Click in "New" green button.

On title write Social.

1 - In "Type" select "Text field".

2- In "Filter" select "Safe HTML".

 

Click in "Option" tab and in "Label" select "Hide".

Click "Save and close"

Creating Categories

1- Go in Content - Categories

2- Click in "New" green button.

Create a Category named "Team" and in that category add subcategories with professions of team members. In demo we uses CEO, Manager, Worker.

Creating Articles

Once the categories are created, go in Content - Articles and click in "New" green button.

1- Write the name

2- Select the category for that team member which corresponds to the profession.

3- Write text info, biography etc

4- Click in "Images and Links" tab add the photo.

If is created "Custom field" continue with step 5. otherwise skip it

5- Click in "Fields" tab and there add the code for social links.

Add the code below with the changes needed, by adding or deleting social media icons.

<ul class="social">
<li><a href="#" target="_self"><span class="fa fa-facebook"></span></a></li>
<li><a href="#" target="_self"><span class="fa fa-twitter"></span></a></li>
<li><a href="#" target="_self"><span class="fa fa-instagram"></span></a></li>
<li><a href="#" target="_self"><span class="fa fa-youtube-play"></span></a></li>
<li><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it."><span class="fa fa-envelope"></span></a></li>
</ul>

Changes can be done by deleting or adding the lines

<li><a .....</a></li>

 Also can be changed social icons. Example no need to have instagram but digg, change fa fa-instagram to fa fa-digg

Don't forget to change the links href="#" with the correct ones which correspond to every social media.

Load Articles in module

In Extension - Modules click in Team Module. Select a position which exits in template and put it in the menu items you want to show.

Click in "Team Manager" tab and in source Select - Articles.

In select Category select all categories created for team members.

Put "Child Category Articles" = Include.

If in previous steps, is created Social media for team members put "Custom fields" = Yes. For the rest put the setting of your choice.

Create custom items

In "Team Manager" tab, in source Select - Custom Items.

In all fields put all the info of the person such as photo, name, main title etc. Use "Add" button to add as many team members needed.

If needed to have social media put "Social Network" - yes. Use also there, "Add" button to add social media. In "Social Icon" select one from the existed icons and add a valid URL link which correspond to that social media.

General settings

In "Style" select the one which is better for the website style.

If any issues with social media icon not showing, use Font Awesome. 

Select version "Standard" to show team members in wall style or "Slider" to have it as carousel slideshow. Put the rest of the settings as preferred.