Team module documentation

Loading team members from articles.

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 and go to other step "Creating Categories".

1. In joomla backend go in Content - Fields.
2. 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 in code mode, with the changes needed, by adding or deleting social media icons.

<ul class="social">
<li><a href="#" target="_self"><span class="fab fa-facebook"></span></a></li>
<li><a href="#" target="_self"><span class="fa-brands fa-x-twitter"></span></a></li>
<li><a href="#" target="_self"><span class="fab fa-instagram"></span></a></li>
<li><a href="#" target="_self"><span class="fa-brands fa-tiktok"></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 fab fa-instagram to fab 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.

Social icon fixes in template

In one of the template css files, add the code below

ul.social {
    display: inline
}

ul.social li {
    display: inline-block
}
ul.social li a {
    color: #7b7b7b;
    font-size: 16px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px; 
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid transparent;
    transition: background-color .4s ease-in-out
}

With this code, is possible to have the social icons for team members in the articles inline, with nice look.