How to create a custom template ( SITE DESIGN module )

tiggerific @ June 20, 2008

Creating a Custom Template

Your Template File

The HTML layout file you create for your template must be called “template.html”. This file will be uploaded to your templates folder. This will be the file that is modified from the MemberSpeed Admin area when you choose Click Here to Change Page Template.

The Backup Template

As a security feature MemberSpeed also allows you to include a template “backup” which enables you to quickly revert back to the original template if you make a mistake while editing the template in the MemberSpeed Admin panel.

To create your template backup, save a copy of your finished “template.html” file and name it “backup.html”. The two files will contain exactly the same content and will both be uploaded to the same folder. If you make changes to your template by using the Modify Template option in the MemberSpeed Admin panel, the changes will be saved to the “template.html” file.

Note: When editing a template on the “Modify Template” pages in the MemberSpeed Admin panel, click Save Content Back To Original to revert your template to the one called “backup.html”. This allows you to quickly restore any changes back to your original if needed.

Your CSS File

The CSS file you create for your template should be called “css.css”. This file will need to be uploaded to your templates folder. This will be the file that is modified from the MemberSpeed Admin area when you choose Click Here to Change Site CSS File .

Similar to the HTML files, MemberSpeed allows you to keep an original backup of your CSS file.
To create your CSS backup, save a copy of your finished “css.css” file and name it “css1.css”. The two files will contain exactly the same content and will both be uploaded to the same folder. If you make changes to your Style Sheet by using the Modify Template option in the MemberSpeed Admin panel, the changes will be saved to the “css.css” file.

Note: When editing a stylesheet on the “Modify Template” pages in the MemberSpeed Admin panel, click Save Content Back To Original to revert your Style Sheet to the one called “css.css”. This allows you to quickly restore any changes back to your original if needed.

Your Template Preview

MemberSpeed allows you to view a thumbnail image of the template when you view the list of templates under “Templates Design”:

You can create your own thumbnail for your new template by creating your own image.

• The thumbnail image must be saved with the name “thumb.jpg”
• Do not make the image larger than 111 px wide by 82 px high
• The “thumb.jpg” file must be uploaded to the /images subfolder of your template directory (see uploading instructions)

Designing Your Custom Template

A MemberSpeed template (template.html) is simply a regular HTML file that you would create for any website. The only difference is that where you want MemberSpeed content to appear, you replace your static text with a MemberSpeed Variable (or tag).

For example, if you want to have the name of your site shown in the header, instead of putting the text directly in your template, you would put the __SITE_NAME__ variable in it’s place. If you change the name of your site later in your MemberSpeed admin area, it will automatically update the text that appears in that position.

So my advice is to simply create a HTML web page as you would like it to appear, and then go through and replace your static text, links and so on with the variables MemberSpeed makes available.

MemberSpeed Template Variables

You can view samples of these variables in use by viewing the built-in templates that are supplied with MemberSpeed. Please also note that all variables are case-sensitive.

Reminder: All Tags starts with double underscores “_”. All tags end with double underscores “_”.

VARIABLE	DESCRIPTION
Page Content Variables These variables determine how and where your page content is displayed on your site.
__CONTENTS__	Place this variable in your template at the location where you want the main page content to appear. Without this variable in your template, nothing will be displayed on your pages. The __CONTENTS__ variable is automatically replaced by the required content for that page. For example, the content may be an article page, an FAQ page, the login page, etc.
__page_title__	When you configure pages in your MemberSpeed admin area, you can set the “Page Title” that should be used for each page or link. Use this variable to display the Page Title of the page that is currently displayed. It is normally formatted as a “H1″ tag and displayed above your page contents.
__VIDEO_TUTORIAL__	In the MemberSpeed Configuration, you can add video tutorials to your site for each of the various modules you have installed. Place this code in your template where you want the link to the current module’s video to be displayed. If you are not planning on using the video tutorials feature, you don’t need to include this tag.
__upper_link_instruction__	For all pages and link categories you create, you can add text that is displayed above the detail, or below the detail. For example, on a regular Navigation page, this tag will be replaced by what you enter in the “Category Upper Contents” field.
__lower_link_instruction__	As above, this tag will be replaced by what you enter in the “Category Lower Contents” field.
__PROMPT__	This tag is normally placed above your content area and is used to display any notifications or prompts to your visitors. For example, if a visitor submits a new product, a prompt will display “Thank you”.
__VARCopyrightStatement__	In MemberSpeed configuration, you can enter the text for your copyright statement. Use this variable (usually at the bottom of your template) to display the contents of your copyright text. Please note that you most also have “Yes” to display the Copyright enabled in the configuration.
__VARPowered_by__	In MemberSpeed configuration, you can enter the text for your “Powered By” statement. Use this variable (usually at the bottom of your template) to display the contents of your Powered By text. Please note that you most also have “Yes” to display the Powered By enabled in the configuration.
Member Variables These variables show information about the member or affiliate on your pages. If there is no data associated with the variable (i.e. a member is not logged in or it is not an affiliate page), then this variable will be blank.
__MEMBER_NAME__	This variable is replaced by the name of the currently logged in member. To display the member’s full name on all pages, place this variable in your template.
__MEMBERSHIP_LABEL__	When a member logs in to your site, the membership label notifies them that they are logged in and under what membership type. For example, this tag will display: Firstname Lastname , You are logged in as a Free Member
__SPONSOR__	When using the Affiliate Module, use this variable to display the Affiliate’s username on the affiliate link pages. For example, you might like to say “This opportunity proudly brought to you by __SPONSOR__”.
__SPONSOR_NAME__	Use this variable to display the affiliate member’s chosen Affiliate Name. When the affiliate signed up, they may have entered a different Affiliate Name to their login username.
____reseller_name__ or __SPONSOR_NAME__	When using the Reseller Module, use this variable to display the Reseller’s username on the reseller link pages. For example, you might like to say “This opportunity proudly brought to you by __RESELLER__”.
Menus and Links These variables are replaced with your navigation links. The menu items that appear for each variable depend upon whether you have assigned your links to the Topbar, Leftbar, Rightbar or Bottombar when setting up your links. Note that, for example, it isn’t mandatory to display __RIGHTBAR_LINKS__ on the right side of your page! You may wish to show items assigned to “Right” links beneath your Left links or beneath your content.
__LEFTBAR_LINKS__	Display all links assigned to the “Leftbar” in the location where this variable appears. Submenu items will appear here also.
__RIGHTBAR_LINKS__	Display all links assigned to the “Rightbar” in the location where this variable appears. Submenu items will appear here also.
__BOTTOM_LINKS__	Display all links assigned to the “Bottombar” in the location where this variable appears. Submenu items for Bottom links are never displayed. If you wish to use submenu items, assign them to either the Left, Right or Top bar.
__TOP_LINKS__	Display all links assigned to the “Topbar” in the location where this variable appears. Submenu items for the Topbar are displayed where the __TOP_SUB_LINKS__ variable appears (below).
__TOP_SUB_LINKS__	Display all submenu links of the currently displayed Topbar link where this variable appears. This variable will be empty if you are not viewing a “Topbar” page that contains sub-items.
Meta Tag Variables Use the Meta Tag variables to display SEO content on your web pages. The content is taken from the information you provide when you set up each of your pages. Each of the following variables should only appear between the <HEAD> and </HEAD> tags of your template.
__meta_title__	Use <title>__meta_title__</title> to change the Window title to display the text you entered for Meta Title for the current page.
__meta_keyword__	Insert the meta keywords from the current page: <meta name=”Keywords” content=”__meta_keyword__”>
__meta_description__	Insert the meta description from the current page: <meta name=”Description” content=”__meta_description__”>
__meta_category__	Insert the meta category from the current page: <meta name=”category” content=”__meta_category__”>
__search_keyword__	Insert the meta search keywords from the current page: <meta name=”Search Keywords” CONTENT=”__search_keyword__”>
__meta_robots__	Insert the meta robots from the current page: <meta name=”robots” content=”__meta_robots__”>
Global Site Variables Global variables are useful to make maintaining your template and your site layout a lot easier. The benefit of referring to your files and other information using these variables, means that you can move and copy your templates between different MemberSpeed sites without having to rewrite all the references to your domain.
__SITE_NAME__	Display the current Site Name on your page. In the MemberSpeed Configuration, System Variables settings, you can alter the text for the SITE_NAME.
__JAVASCRIPT_CODE__	Insert any required JavaScript code (such as form validation, coupon generation, etc.) into the <HEAD> tags of your site. You MUST include this variable to ensure that your MemberSpeed form pages and other content works correctly. Note that you may wish to add your own JavaScript code into your template by including it beneath this tag. For example: <HEAD> … … __JAVASCRIPT_CODE__ <script src=”mycode.js”></script> </HEAD>
__VROOT_DIR__	Use this variable whenever you need to point to a location on your MemberSpeed domain. For example: <img src=”__VROOT_DIR__/images/image.jpg”> will be replaced by: <img src=”http://yourdomain.com/images/image.jpg”>
__DESIGN_VROOT_DIR__	Similar to the above variable, this variable points to the location of the templates folder. For example: <img src=”__DESIGN_VROOT_DIR__/mytemplate/image.jpg”> will be replaced by: <img src=”http://yourdomain.com/resources/design/mytemplate/image.jpg”>
__VARTemplate__	This variable is replaced with the name of your template currently in use. For example: <img src=”__DESIGN_VROOT_DIR__/__VARTemplate__/image.jpg”> will be replaced by: <img src=”http://yourdomain.com/resources/design/mytemplate/image.jpg”>
Important regarding __VROOT_DIR__, __DESIGN_VROOT_DIR__, __VARTemplate__ variables: You may notice that these variables are also used by built-in MemberSpeed templates in the attached CSS file. How they work depends upon a few things such as the DOCTYPE you have specified for your HTML page and also using a specific method of linking to your CSS in the HTML. If you do not understand any of what I have just said… then please don’t try and use these three variables in your CSS file. Instead, make sure you use either full references to images like so: background: url(http://mydomain.com/resources/design/mytemplate/images/logo.jpg); or, use relative references to where the CSS file is located like so: background: url(images/logo.jpg);

Please note: variables that are considered ESSENTIAL to the operation of your site are highlighted in red text above.

Uploading Your Template

Now that you have finished creating all the files necessary for your template, it is time to upload them to your MemberSpeed templates folder. The files you need to upload will include the following:

template.html
backup.html
css.css
css1.css
thumb.jpg

plus any additional JavaScript files, image files or CSS files necessary to the HTML you have created.

Using FTP to Upload

Use your favourite FTP program to connect to your MemberSpeed domain .

1. Open your FTP client
2. Enter your FTP login details:
   1. Host Address: usually your domain name
   2. Port: Usually 21
   3. Username: Your FTP login username
   4. Password: Your FTP login password
3. If you don’t know any of the above details, please contact your host to get the correct information for your site.
4. Once you have connected via FTP to your site, navigate to the following directory:/pathtopublic/resources/designThe “pathtopublic” will vary depending on your hosting account. For most users, this will either by /public_html or /httpdocs. For some others, it may not be present at all. Again, check with your hosting company for the correct folder to upload your web files to.
5. With your FTP software, make a new directory in this location. Label the directory the name of your template:/pathtopublic/resources/design/mynewtemplate
6. Upload the following files to this new directory:
   1. template.html
   2. backup.html
   3. css.css
   4. css1.css
7. Create a new subdirectory beneath this one called “images”:/pathtopublic/resources/design/mynewtemplate/images
8. Upload your thumb.jpg file to this location
9. Upload any other files necessary for your template (there may not be any)

Set File Permissions

Once you have finished uploading all the required files to your new template directory, you will also need to set the PERMISSIONS of these files so that they can be edited from within your MemberSpeed control panel. In the majority of cases, you should set the permissions of the following files to 777 (World read and write access):

template.html
css.html

However, depending upon your hosting provider, you may not be “allowed” to set full read and write permissions on your files. If after completing the remaining steps below you have errors when you view your site (usually a 500 Internal Server error), then go back and change the permissions of the above two files to 755 instead.

Edit and Use your New Template

After creating your new directory, uploading your files and setting permissions as described above, log into your MemberSpeed Admin area and navigate to the Site Design / Page Management Module. Click Templates Design and your new template should be showing as the first available template in the list of templates available.

To see what your site will look like with your new template and to test for any errors, click the Preview link beneath your template.

If everything looks OK, set your site to use your new template by checking the radio button above your template, then clicking Set As Default at the bottom of the page.

As long as your permissions have been set correctly for your template files, you can also click Modify to make changes to your template.html and css.css files directly from within the MemberSpeed admin area. If you get an error when you try to save your changes, please check your file permissions as described above. Remember also, that if you make unwanted changes to your template files, use the Save Content Back To Original button to revert to your backup.html or css1.css files.

Advanced Techniques

Coming soon

• Creating an XML file
• Linking to other Style Sheets
• Using PHP in my templates

Tutorial provided by Robyn of Ezy Template and Ezy Hosts

---

Looking for professionally-designed templates for your site?
Purchase ready-made templates now at Ezy Template
Custom design options also available
http://www.ezy-template.com

Filed under: 08.Site design