Step by Step Guide for Template Customization
1. Start with the general design and navigation:
The most important aspect of your membership area will probably be the navigation. When you install PM Premium 2, your default navigation will be tab-based and it will be at the top of the page. If you would like, you can change the navigation or location of it. But let's first learn how it works currently.
|
%%TEMPLATE:header%%
|
So, in the default navigation, the top navigation tabs are coming from "header" template while sub navigation tabs are coming from "header_myprofile", "header_browse" and "header_messenger" templates. This is a choice we have made when we were designing version 2, because there were too many links to put in a single navigation bar. However, each site has different goals. You may come up with a different list of pages you would like to have. You can remove any unwanted pages. You can build your own navigation. Here is the description of pages and links on each page:
| Template | Description | Links |
| header | Main Tabs |
My Profile(panel):
pm.cgi?session=%%session%% Browse: pm.cgi?action=member&temp=browse&session=%%session%% Messenger: pm.cgi?action=mail_list&session=%%session%% Member's Only(password protected directory): pm.cgi?action=approved&session=%%session%% Logout: pm.cgi?action=logout&session=%%session%% |
| header_myprofile |
"My Profile"
|
My Profile(display):
pm.cgi?action=display&login=%%login%%&session=%%session%% My Blog: pm.cgi?action=myblog&session=%%session%% My Pictures: pm.cgi?action=upload&session=%%session%% Update Info: pm.cgi?action=modify&session=%%session%% Change Password: pm.cgi?action=member&temp=change_password&session=%%session%% Delete: pm.cgi?action=delete&session=%%session%% |
| header_browse |
"Browse"
|
Search:
|
| header_messenger |
"Messenger"
|
Inbox:
pm.cgi?action=mail_list&session=%%session%% New Message: pm.cgi?action=mail_write&session=%%session%% My Favorites: pm.cgi?action=list_favorites&session=%%session%% Chat: pm.cgi?action=member&temp=chat&session=%%session%% |
First, get a pen and paper! Think about how your member area navigation should flow, and make a chart out of it. For example, our default navigation for PM Premium 2 looks like the table above.You may need all of the pages or you may want to add new pages. To add new pages, follow Adding New Pages tutorial. Next, think how your navigation will look like and function. Will it be on the top or on the left side?
Once you have made the decisions for your navigation on the paper, use your favorite HTML editor to implement it. Make a complete page with the new navigation and some dummy content. Copy the link URLs from the "link" column in the table above as your navigation links. They will not work on the dummy page, but don't worry about it. They will start working on the site. When you are done with the new navigation, open the source code of the page in a text editor or your HTML editor's "View Source" page. Copy the navigation code above the dummy body of the page and paste it into your "header" template. You can edit header template using PM Premium Admin Panel -> Templates -> Edit page. The remaining part at the bottom the dummy template should be copied into "footer" template.
2. Customize your forms with new database fields:
Registration and modification forms should be updated manually, if you have changed your database fields. In chapter 3, we have explained how to apply the change to these forms. Please see that tutorial if you have not. These forms are not updated automatically because many people prefer to change the style of them, or add javascripts. In short, you can copy your new registration/modification forms from Admin -> Database -> Fields -> Step 2. You will paste your registration form into source code of "register.html" page and modification form into "modify" template source code.
Picture upload forms will show up on the upload page automatically. If you would like to change any configuration about them, you can do so from Admin -> Preferences -> Picture Upload page. On that page, use "Define uploadable image fields" textbox to change captions for any uploadable field. You may also include upload forms seperately in your member's are. To do that, put this tag on any template: %%upload form:image1%% .
Search forms
are very highly customizable. Because of this high flexiblity, there may be a steeper learning curve. First of all, you need to understand how HTML forms work to make your own search forms. Then, you should read PM Premium search engine documentation. Search forms can also be translated into URLs. For example, this form code will create a button that lists all female members in your database:
|
<form action=search.cgi method=get>
<input type=hidden name= if_gender value= Female > <input type=submit name=submit value="Female Members"> </form> |
| <a href=search.cgi? if_gender = Female >Female Members</a> |
3. Design Your Member Welcome Page:
When a member logs in, the first page he/she will see is the welcome page. This page can be edited from "panel" template. It is called "panel" because many membership sites like to call it a "Control Panel". Whatever you call it, this is probably the most important page in your member's area. Every new member will first encounter this page when they enter your member's area for the first time. Therefore you should consider having some information for the beginners. Your frequent users as well encounter this page every time they log-in, so you should also have easy links to the pages they would want to reach.
4. Design Profile Page(s):
Every member has an informational page for other members/visitors to view. You may include any kind of user data on these pages. Fire up your favorite HTML Editor such as FrontPage or DreamWeaver, and design a profile page as you wish to. Instead of using actual data, put tags such as %%firstname%%. Once you are finished, go to Source Code section of your HTML Editor and copy the actual HTML code into your "display" and "static_display" templates. You may be wondering why there are two kinds of templates for the Profile page? "display" template is the main dynamic profile page that can be accesed from pm.cgi?action=display&login=%%login%% . On the othen hand "static_display" is the template for static web page that can be given to your users, such as http://www.yourdomain.com/profiles/%%login%% . If you do not want to provide such URLs to your users, you can just ignore static_display template and only use %%display%% tag to link profiles.
You may also make second or more profile pages. To do that, follow these instructions:
1. Go to Admin -> Templates -> Add New page.
2. Create a new "Show: public page" based page. You may call it "display2".
3. Launch it and link to it from your other templates like this:
pm.cgi?action=show&temp=display2&login=%%login%% .
