Platinum sponsors
The Advanced section of the manual presumes a basic knowledge of TYPO3, HTML, CSS, and TypoScript. Please see the tutorials, how-tos, and manuals available on the Web-Empowered Church and the TYPO3 websites for more information.
Internet Links: Use the following links to access advanced teaching materials:
Web-Empowered Church for Users: www.webempoweredchurch.com
Web-Empowered Church for Developers: www.webempoweredchurch.org
TYPO3 for Users: www.typo3.com
TYPO3 for Developers: www.typo3.org
Using advanced display modifications, you can completely change the look and feel of the Staff Directory extension on your website. There are several methods you can use to modify the Staff Directory's display including customizing the template, modifying the CSS, and changing TypoScript properties.
Arguably, the most powerful tool for modifying the look of the Staff Directory extension is by customizing the template file. The following contains a thumbnail sketch of how to customize this file.
Caution: Customizing the Staff Directory Template is not a task for the uninitiated. A knowledge of basic HTML and CSS are essential to make successful modifications. Poor coding can render the template unusable.
There are three steps to modifying the Staff Directory Template file.
Obtain the Template file.
Upload the modified file.
Modify the file.
Although there are a variety of methods to access the Staff Directory Template file, the following directions are among the easiest.
Refer to Illustration 13. Using the Extension Manager Module (1), select Loaded Extensions from the dro
Illustration 13: Obtaining the Template File 1
pdown menu (2).
Scroll down the list and click on WEC Staff Directory (3).
Refer to Illustration 14. Select Edit Files from the dropdown menu (4) and click on the pi1.wecstaffdirectory. t
Illustration 14: Obtaining the Template File 2
mpl file name (5).
When the popup box asks you what to do with the file, click Save (6) and save the file to your local computer.
If you would prefer to modify the template on your local computer before uploading the file,reverse steps 2 and 3.
To upload the file so that you can modify it within TYPO3, begin by accessing the Constant Editor and selecting the WEC_STAFFDIRECTORY plugin (see the Basic Display Modifications and Illustration 12 if needed).
Select the Template File checkbox and update the form.
The Browse button will appear next to the Template File field. Browse your local computer for the Staff Directory Template file that you downloaded in Step 1 and select it.
Click the Update button. The file will be uploaded and will be displayed immediately in the website's Frontend.
If you will be modifying the template in TYPO3, as suggested in Step 2, you can access the file through the Template Module (again, see Illustration 12 for how to access the Template Module and the location of the Staff Directory Plugin).
Refer to Illustration 15.
Illustration 15: Accessing the Template File within TYPO3
Select Info/Modify from the dropdown menu on the far left (1).
The Staff Directory Template File will be available as a Resource. Click on the Edit icon to the left of Resources (2).
Refer to Illustration 16.
Illustration 16: Accessing the Template File within TYPO3 (2)
Click on the Edit icon associated with the Staff Directory Template file (3) to edit the template file.
Modify the template file using standard HTML and the Staff Directory Markers (defined below).
When you have completed the modifications, click the Update button to save your work. The results will be displayed immediately in the Frontend.
Tip: We recommend editing only the Staff_List_Custom layout on your first couple of modification attempts in order to preserve the default layouts as models.
Technical Stuff: How the Template Works. As you view the template in your HTML editor, you will see what looks like a “nearly” standard HTML file. The file is wrapped in <html>, <head>, and <body> tags like most web pages. However, the template uses markers to direct TYPO3 to reference and render only relevant portions of the file (for instance, only the Brief Layout, etc.). Each marker is itself wrapped in triple hash marks such as ###BRIEF###. Each of the markers are defined at the top of the template itself for your convenience (see also the table below).
TEMPLATE MARKERS | DESCRIPTION |
###TEMPLATE_STAFF_LIST### -- the main staff directory | |
###TITLE### | The title of the page given in the Flexform. |
###SORT_MENU### | The sort menu, if available, where can choose how to sort the staff listing. |
###STAFF_DROPDOWN_MENU### | If want to see all the staff and access the staff easily. This is not included in default template (only on staff page). |
###STAFF_LISTING_CONTENT### | This is the content for the staff listing and includes all staff. It is made up of a ###STAFF_LIST_xyz### for each staff member on the page. |
###DEPARTMENT_DROPDOWN_MENU### | This will allow you to just see a given department for a staff listing. If you select “All” then you will see all departments again (which is default). |
###SHOW_LISTING_HEADER### | This section allows you to define a header for listing view. This only works with listByLine since that view has variable columns. You need to set the show list header under Display tab of the Flexform. |
###STAFF_LIST_LINE### | The template for one staff displayed in the listing. This is a line-by-line version and is the default. It includes a photo, name, phone, email, and position title. Note that to access all the values, you have to set them in the FlexForm. |
###STAFF_LIST_COLUMN### | The template for one staff if you want columns. The default setup is for 2 columns. If you would like more than two columns, you can use the STAFF_LIST_LINE and set the staffInfoWidth in the constants to either 22%, 31%, 48% (or about there depending on your template) for 4 across, 3 across, or 2 across. This sub-template uses floats and divs for the column display. |
###STAFF_LIST_BRIEF### | This is similar to the line version but has less padding and no photo. |
###STAFF_LIST_VERBOSE### | This is a verbose version of the staff including the regular values plus biography and/or news. Consider using this if you have fewer staff (usually less than 10) and want them to show most of their info on one page. |
###PAGELINK_START### | This is for where you want a link to the staff page. This is the start of the link – you must put the _END## tag in also for the link to work. You can put this between the name, photo or any element that you want to link to the staff page. |
###PAGELINK_END### | This is the ending tag for the link to the staff page. |
###SHOW_nnn### ###nnn### | The ###SHOW_... allows the ability for you to turn on or off the option in the FlexForm. If the field is turned off, then it will not be shown at all. Note that these are required to be in the template, and not all of the fields are in the template.The ###nnn### is the actual label and corresponds to all the fields. The following are all the fields:###NAME### ###NAME_TITLE### ###TITLE### (same as NAME_TITLE) ###GENDER######POSITION_TITLE######POSITION_DESCRIPTION######DEPARTMENT### ###TEAM######START_DATE######BIOGRAPHY### ###NEWS######PHOTO_MAIN######PHOTO_SMALL######PHOTO1###...###PHOTO2###...###PHOTO9######MISC######CELLPHONE######FAX### ###ADDRESS### ###COUNTRY### |
###NAME_LINK### | Allows you to have the name with it linked to the single view. This is basically a short form of ###PAGELINK_START### ###NAME### ###PAGELINK_END### |
###PHOTO_SMALL_LINK######PHOTO_LINK### | Allows you to have the photo or small photo linked to the single view. This is basically a short form of ###PAGELINK_START### ###PHOTO_SMALL### ###PAGELINK_END### |
###EMAIL_LINK######EMAIL_ICON### | The link is if you want it to display text using TYPO3 configuration, i.e., user@example.com and where you click on it, the user will go to their mail program with that email address filled in for the to: field.The icon will show a graphic icon only, and when you click on it then you will go to the mail program. |
###TELEPHONE_OR_CELL######CELL_OR_TELEPHONE### | If you have some staff with telephone and others with cellphone, you may want to just display one contact number. This alllows you to display that. If a staff person has both, then the telephone takes preference for TELEPHONE_OR_CELL, and the cellphone takes preference for CELL_OR_TELEPHONE. Note that to add this, you must modify the existing template. You can replace the ###TELEPHONE### with either of these. |
###SHOW_ADD_BTN### | For allowing the admin to add a new staff person from the Frontend. This is only shown if it is set in the Flexform. You can move this to the top of the listing – the default is at the bottom of the listing. |
###PAGING_PREV### | This is the previous button if paging is enabled and there is a previous page to go to. |
###PAGING_NEXT### | This is the next button if paging is enabled and there is a next page to go to. |
###SHOW_EDIT_BTN### | For editing of the staff page, this will show up if either the logged-in Front-End user is an administrator or is the staff member who is linked to the given staff page. |
###SHOW_ADD_BTN### | For adding a new staff record, this will show up if either the logged-in Front-End user is an administrator or is a staff member if the Flexform 'staff_can_add' is set. |
###SHOW_DELETE_BTN### | For deleting a staff record, this will show up if either the logged-in Front-End user is an administrator or is a staff member if the Flexform 'staff_can_delete' is set. |
###TEMPLATE_STAFF_SINGLE### -- the personal staff page | |
###BACK_TO_STAFFLIST_BTN### | This is a link that will take you back to the staff listing. |
###STAFF_DROPDOWN_MENU### | This is each staff listed in a drop-down menu. Upon selecting a staff member, you will see the staff page for that staff member. This allows quick and easy access to other staff members from the staff page. |
###nnn_LABEL### | The label for the field. So ###NAME_LABEL### will be the “Name” or whatever is defined in the LOCALLANG. Each field has a label associated with it. |
###nnn### | The field value. See above for the fields available for nnn. |
###SHOW_nnn### | This is wrapped around each display of a value so that fields can be turned on or off in the FlexForm for the staff page. |
###TEMPLATE_STAFF_RANDOM### -- the random staff page | |
###nnn_LABEL### | The label for the field. So ###NAME_LABEL### will be the “Name” or whatever is defined in the LOCALLANG. Each field has a label associated with it. |
###nnn### | The field value. See above for the fields available for nnn. |
###SHOW_nnn### | This is wrapped around each display of a value so that fields can be turned on or off in the FlexForm for the staff page. |
###TEMPLATE_EDITFORM### -- the form for editing staff page/info | |
###FORMTITLE### | The title of the form for editing the staff page. Note this was changed from ###FORM_TITLE### in v0.9.6 because of naming conflict. |
###ACTION_URL### | The URL to go to when submit edit form. This is filled in automatically. |
###HIDDEN_VARS### | Hidden vars in the form that are needed by the extension. |
###SAVE_BUTTON### | The Save button for the form. You can change the display value in the LOCALLANG.XML file. |
###CANCEL_BUTTON### | The Cancel button for the form. You can change the display value in the LOCALLANG.XML file. |
###nnn_LABEL### | The label for the field value that is used to display on the left side of the edit form for each field. It describes the field. See the fields available above for nnn. |
###VALUE_nnn### | The value of the field that is filled in if it has been set. |
###SHOW_nnn### | This is wrapped around each display of a value so that fields can be turned on or off in the FlexForm for the staff page. |
