How to setup and configure TLP Team Pro for Joomla

Step by Step Documentation how to setup and configure TLP Team Component, Module and plugins for Joomla 3.x.x

Step 1: First download the TLP Team Pro from you purchase email download link or login from top menu then go to purchase history.

1) Installation

2) Setup & Configuration

2.1) First go to Components menu -> TLP Team PRO


2.2) Now First from top right click options to configure.


2.3) In the Configuration page you will get 3 tabs General Settings, List Page Fields & Detail Page Fields you can control all style and fields from here.


General Settings

2.3.1) First field in for image path set where you want to save your images.

2.3.2) Set Small image Width and Height this size used in table layout by default it is set 200 x 250 px but you can set as your own.

2.3.3) Set Medium image Width and Height this size used in List page by default it is set 400 x 500 px but you can set as your own.

2.3.4) Set Large image Width and Height this size used in detail page by default it is set 600 x 700 px but you can set as your own.

2.3.5) Enable Font Awesome: If your template has font awesome css included then please select hide this file used for all icon.

2.3.6) Bootstrap Version: If you theme has default Bootstrap 3 then you can select Version 3 otherwise sue Own Grid system (noted: Own Grid is copy of Bootstrap 3)

2.3.7) Item to Item Margin: You can set Item to Item Margin “Bootstrap Default 30 px ” or no Margin.

2.3.8) Short Description Limit: To make layout proper fit specially for overlay layout you need to set the character limit.

2.3.9) Layout: Set you default layout you can overwrite it from menu params/ module params if you don’t select ant Layout from menu params/ module params then this default layout will work.

2.3.10) Display No: You can set how many member will show per row as Bootstrap Grid it can be 1,2,3,4 and 5.

2.3.11) Image Style: You can set Profile image style Square or Rounded. Noted: all layout don’t supported Rounded style.

2.3.12) Primary Color: You can set you primary color then layout main color will be this color. Overlay Item Padding: You can overlay item top padding ti fit your layout properly. Overlay Color: Set overlay background color which color you want. Overlay Opacity: You can set overlay background opacity it is %. Name Font Size: You can set the text size of name. it is px just enter integer number like 15,18,20… Name Font Color: You can set your name font color from here. Name Text Align: You can set text align Left/ Right/ Center from here. Position Font Size: You can Position font size. it is px just enter integer number like 15,18,20… Position Font Color: You can set Position font color from here. Position Text Align: You can set Position text align from here like Left/ Right/ Center. Short Bio Font Color: You can set short bio font color from here. Short Bio Text Align: You can set short bio text align from here like Left/ right/ Center. Social Icon Background color: You can set social icon background color or keep empy for no background color. Social Icon Color: You can set social icon color from here.

2.3.18) Link Detail Page: If you want to detail page link then select “Show” otherwise select “Hide” to set no link to detail page.

2.3.19) Link Type: If detail Page link is “Show” then this setting will work like you can set how you want the detail page as a popup view or only normal link

3. List View page Fields Control

From this settings you can select which fields will show in list view page just select “Show” to enable that field and “Hide” to disable the field.


4. Detail Page Field Control

From this settings you can select which fields will show in detail page just select “Show” to enable that field and “Hide” to disable the field.

5) Add Team Member

To add team member two items are related Department and Skills, You need to add that but if you don’t want to use it then no need to add

5.1) First go to Components => TLP Team Pro


5.2) Click add new button to add new team member


5.3) Now you will get form to add team member here name and position are required field others fields are optional.

For Department dropdown it will come from department menu.

You can add 5 skills here the skill drop down come from skill menu.

For social icons or others fields if no value then keep blank.


6) Add Department(Category)

6.1)First Select Teams-Department go to Components Menu => TLP Team Pro => Teams – Department


6.2) Then click New button to add new Department


6.3) New Department form add the title then click save


6.4) List View and Edit from the title click you can edit the department.


7) Add New Skill

7.1) Select Skills go to components => TLP Team PRO => Skills




7.2) Then Click New


8) Make Menu link

8.1)Now go to Menus=> then select your menu item => Add new


8.2) From the popup select TLP Team Pro => Teams

8.3) Then you can add your menu name it will look like this


8.4) From menu parameters you can select Department. Layout and all others style settings it will override the global settings. If don’t want to change then it will get from global settings.


8.5) You can control list page fields from here also it will override the globabl setting



8.6) Now front end Look will like this

We selected layout01 ie Grid view with all fields


9) Enable Module

9.1) First go to Modules then select TLP-Team Pro

Then select module position and set published then see the module settings set all settings one by one then click save



9.2) You can set all text color, size, alignment etc ie all global settings here if you set the value then it will override the Global setting otherwise it will get from Global settings.


9.3) You can control all files from here also if “Use Global” then it will get from global settings.


10) Module with Carousel Slider

Please follow all points of (9) Enable a Module then do this step

10.1) First select “Carousel Slider” Layout from layout dropdown



10.2) Then set the Carousel settings


11) Search Plugin

Go to Extensions => plugins then filter search plugin get “plg_search_tlpteam” enable it (by default it is enabled)

If this plugin is enabled then in Joomla default search the team member name will show


12) Content Plugin

Go to Extensions => Plugins then filter content plugin get “plg_content_tlpteam” enable it

Then in Joomla Article you can call a specific member with this syntax {tlpteam id=1,2,3} you can call only one or more as you want.