# Customize Built-in Profile Contribution and Event
Registration Screens
<divclass="panelMacro">
Use extensions instead!
The methods on this page are of historical interest and may be helpful in understanding legacy code, but overriding templates and php files is strongly discouraged for any new customisations. These approaches need attention whenever you upgrade and will cause a range of problems from subtle to major if you forget about them.
As CiviCRM evolves, the recommended ways of customizing it change. The current preferred method is to Create an Extension to implement Hooks and use the API. If you can't find a way to use existing hooks to accomplish what you want, discuss it on StackExchange or Chat. It may be appropriate to add a new hook to core.
(It is possible to override templates and php in an extension, but you face the same problems when it comes to upgrading - don't do it!)
</div>
As of 1.7, you can create customized versions of the standard CiviCRM
forms and pages for your site. This gives you a lot of power to modify
the CiviCRM user interfaces without requiring advanced programming
skills - the templates use HTML plus a fairly simple scripting language.
It also means you won't lose your customizations when you upgrade
(although it is possible that changes in the core code could affect your
templates - and testing after upgrades is essential).
### First Time Configuration
- Create a new directory under your webroot (or anywhere readable
by www-data) where you will place your custom template files.
- EX: */var/www/civicrm_custom*
- EX: */var/www/media/civicrm/customtpl/*
- Login to CiviCRM with administer CiviCRM permissions and navigate to
**Administer CiviCRM » Global Settings » Directories** (in newer
versions this is Administer » System settings » Directories)
- Enter the full path to your custom templates directory in the
**Custom Templates** field and save your changes.
### Create a Custom Screen
These steps are for any "built-in" screen (e.g. the **Contact Summary**
screen). Creating a custom **Profile** form or page are covered in the
next section.
- Navigate to the screen you want to customize and use your browser to
**View Source**.
- Search for ".tpl" in the source. You will find a comment line which
gives you the path and name of the template used for the screen you
The process for customizing Profiles / Contribution / Event Registration
is the same as above EXCEPT that you have the flexibility to create
different screen "versions" for each of your configured Profile /
Contribution / Event Registration Pages. The structure for contribution
and event registration pages is similar to that of profile explained
here. You do this by creating an extra directory layer in your custom
directory tree that references the Profile's **ID**.
<divclass="panelMacro">
!!! tip{width="16" height="16"} If you want a custom version of the **Profile View** screen for a Profile whose ID is 2...and your basic install and custom directory setup are the same as shown above - then your custom template copy should be saved to:
!!! tip{width="16" height="16"} If you want a custom version of the Profile Create/Edit screen for a Profile whose ID is 2...and your basic install and custom directory setup are the same as shown above - then your custom template copy should be saved to:
Profile ID's are listed in the Administer CiviCRM » CiviCRM Profiles
table (ID column).
<divclass="panelMacro">
!!! tip{width="16" height="16"} If you want a custom version of the **Register** screen for an **Event** whose ID is 2...and your basic install and custom directory setup are the same as shown above - then your custom template copy should be saved to:
If you are making customizations for specific contribution forms based on the ID, you will need to also customize the Main.tpl file to call your custom MembershipBlock.tpl file.
In Main.tpl in your custom template directory find:
insuring that you are using the correct path for your custom form id.
</div>
#### Referencing Individual Fields in Profile Pages
Profile view and edit pages consist of several template files working
together. The View.tpl (detail view pages) and Edit.tpl (edit pages)
each reference a corresponding Dynamic.tpl file, which cycles through
the fields found in the profile and displays them in a table. The layout
is very basic--- one column is used for the field label, the other
column for the field value or form field. Often, when customizing
profile pages, you may want to reference specific fields and layout them
out in a customized display. To do so you would work with the
View.tpl/Edit.tpl files and insert smarty tokens for the profile fields
array. The profile fields array is structured as follows:
- $profileFields_ProfileID => Field Name => label/value
So you would insert the following token into the template file to
reference the First Name label and field value in Profile 3:
- {$profileFields_3.first_name.label}:
{$profileFields_3.first_name.value}
Custom fields in your profile are referenced using the custom ID value,
e.g. {$profileFields_3.custom_38.value}.
To customize fields displayed within Drupal profiles, edit Dynamic.tpl
and use $profileFields => Field Name => label/value (e.g.
{$profileFields.first_name.value} - without the profile ID) to
reference individual profile fields.
<divclass="panelMacro">
!!! tip{width="16" height="16"} With debugging turned on, use the Smarty Debug url string to view the Smarty variables available for inclusion on any given page. Simply add "&smartyDebug=1" at the end of your page url.
</div>
### Changing Show/Hide Default on Collapsible Fieldsets
In the words of Dave Greenberg "This is a bit tricky because the
collapse vs. expand states are controlled via showBlocks and hideBlocks
arrays that are passed into a jscript function by the PHP code." So I
will show you how to do this using an example.
If you want to make a fieldset that is by default collapsible or hidden
on a CiviCRM Contact View screen, you would need to follow all the above
instructions to first get the correct custom template and put it in the
proper location. Let's assume you want to edit the
CRM/Contact/Page/View/Tabbed.tpl screen, which is the default contact
view. You would copy that into your custom template location. Then you
will need to determine the name of the fieldset that you want to change
the default state of. Let's say I want to collapse the "Communications
Preferences" fieldset by default. Look in the file for that section, so
in this case I find the line that has the following:
