Templates Customization
From AMember Pro Manual
The appearance of aMember is totally template based, which means it is easy to customize it to match the rest of your site.
Contents |
Finding the Templates
The templates which determine the appearance of the front end (that is the parts visible to users) are located in the folder amember/templates/. Templates which determine the appearance of the Admin Control Panel are located in amember/templates/admin/ folder.
Customizing the CSS
The CSS files inside amember/templates/css' folder determines the font style and size of the text on script pages and the background colors of tables and table cells. It can be edited to make the styles match your own site.
You can do that the following way:
- Copy amember/templates/css/amember.css to amember/templates/css/site.css. site.css file will contain your site-specific styles, and will not be overwritten during upgrade. Then just edit this file manually, or using your favorite CSS editor. You may change everything, we will just describe most interesting classes here:
- body, th, td
- change font and font size for all pages and tables in aMember
- input, textarea
- change look&feel of input boxes
- vedit
- represents a vertical table class - for example: signup form, login form, user renewal form
- hedit
- represents a horisontal table class - for example: payments history on amember/member.php page
- errmsg
- represents error message displaying on user-side pages
- receipt
- represents payment receipt displaying on amember/thanks.php page
- newsletters
- represents newsletters listing on amember/member.php page
Customizing Header and Footer Files
For many people customizing the header and footer files will be all that is required, since this can make the pages immediately look like the rest of your site. You may use any HTML you wish in these files, but be careful to ensure that you URLS and paths are all valid from the aMember directory. If you are inexperienced at creating header and footer files please see here for a detailed description of How to Create Custom Headers and Footers.
Customizing Other Script Pages
Each page in the aMember user interface has a corresponding template page which you can edit. For example the file /amember/signup.php has the corresponding template /amember/templates/signup.html
Editing these pages is straightforward but as they each contain PHP and/or Smarty code essential for the functioning of the script it is important to be careful when you make your changes. Please DO NOT CHANGE TEXT INSIDE { ... } brackets.