A skin is a custom frontend design that works with our backend interface. Below we will explain how you can create your own skin.
The skin folder is placed outside the plugin folder in your uploads folder, this way it will not be overwritten by plugin updates.
The skin folder has four files inside:
"id" => "basic_rounded"
This is the id of the ’Skin’, it has to be unique and it must be exactly the same as the name of the folder that houses the skin.
"title" => "basic_rounded"
This is the name of the Skin as it will show in the skin interface in the Team Showcase plugin settings.
This is the grid type you want to use, you can use four different types:
"grid" => "grid"
Shows members in multiple columns.
"grid" => "carousel"
Shows members in a simple carousel.
"grid" => "table"
Shows members in a table design.
"grid" => "list"
shows members in a single column list
"columns" => 3
When using a grid or carousel you can set the default number of columns here.
"max_columns" => 3
Here you can set a maximum for the number of columns a user can set.
This is the setting for extra info panels, you can use four types
"extrainfo" => "expanded"
Show the extra info in an expanding grid
"extrainfo" => "layover"
Show the extra content in a modal layover.
"extrainfo" => "link"
Open the extra info in the post view
"settings" => [ "columns" ]
In settings we can activate settings fields, this can be useful when you want to have multiple column options.
We can activate the following options:
- columns - to select the number of columns
"fields" => [ [ "id" => "position", "label" => __("Position", "awesome-team-showcase"), "type" => "text" ],]
The fields are used to create custom fields that you can use to add extra content like phone numbers, position, email addresses etc...
A meta field has three settings:
- id - for setting the ID of the field
- label - this is the label to show next to the field add with a language tag to work with multi language.
- type - this is the field type this can be text, email, number.
The card.php is the html of the card below you can see an example of our basic card.
This is the html of the info panel below you can see an example.
The code has a couple of conditional that only show labels when the meta has content.