Developer manual: Design and templates

What is a template?

In phpMySport, the PHP development is separated from the HTML design. Thus, the application can be personalized according to the colors and layout desired by the user. This is possible thanks to a "template" system. There are a set of files containing PHP code and other "template" files which are related to HTML pages containing template code. Having loaded a web page, the application then reads the HTML files and replaces the template code with the corresponding PHP variable values.

The different designs are situated in the "template" directory. Each design is composed of a directory of HTML files, ordered by module. An initial design is provided with phpMySport, named the "defaut" template.

Here are the details of the template code.

The template code

Three types of information can be displayed on a page: static information like text, cyclic information as in lists and option information.

Three template codes are thus required. Each is associated with a PHP variable type: text (string) for static data, tables (array) for lists and a boolean of options.

The gathering of information for display is held in a single and unique variable: $page. This is a two-dimensional table that contains the set of text, tables and booleans needed by a page.

A PHP function is used in the "index.php" file to set this $page variable and the template file defined to create the final HTML code seen by the user.

Basic code

The basic code is used to display a PHP variable of type "text".

The name of the variable is placed within a pair of "{" and "}" symbols.

Template code (HTML file)	PHP code (PHP file)	Displayed on the screen
{my_text}	$page['my_text'] = "My text"	My text

List code

Lists are used to display a PHP variable of "array" type. The key word "LOOP" is used to signify that a variable corresponds to a set. All the HTML code held within "LOOP" and "END LOOP" will be repeated as many times as the table has lines.

Template code	PHP code	Displayed on the screen
<!-- LOOP my_list --> {name} {firstname}<br> <!-- END LOOP my_list -->	$page['my_list']=array( array('name'=>"Durant",'firstname'=>"Martin"), array('name'=>"Dupond",'firstname'=>"Marie"));	Durant Martin Dupond Marie

Template code

PHP code

Displayed on the screen

{name} {firstname}<br>

$page['my_list']=array(
array('name'=>"Durant",'firstname'=>"Martin"),
array('name'=>"Dupond",'firstname'=>"Marie"));

Durant Martin
Dupond Marie

Option code

The option code is used for boolean variables or more precisely "true / false" values. If the variable is empty, then the HTML code within the two "OPTION" tags will not be visible. Otherwise it will be displayed.

Template code	PHP code	Displayed on the screen
<!-- OPTION var1 --> {text1} <!-- END OPTION var1 --> <!-- OPTION var2 --> {text2} <!-- END OPTION var2 -->	$page['text1']="Text 1"; $page['text2']="Text 2"; $page['var1']=""; $page['var2']="1";	Text 2

Template code

PHP code

Displayed on the screen

{text1}

{text2}

$page['text1']="Text 1";
$page['text2']="Text 2";

$page['var1']="";
$page['var2']="1";

Text 2

Creating your own design

To personalize the design of phpMySport and display it in your club’s colors, you will need to create your own template. This is relatively quick, but it is preferable to already have an understanding of the CSS and HTML languages. Here are the different steps to follow:

Open the repository where the phpMySport files are held (with the aid of you FTP client if necessary).
Open the "template" repository situated in the root of your site. A subdirectory named "défaut" will be present. The latter contains the default phpMySport design. To avoid any risk of damaging the scripts, it is strongly recommended that you do not delete or modify this directory or the files that it contains!
Copy and paste the "defaut" directory. Rename it (text without spaces) to a name of your choice (eg: "mondesign") and place this in the "template" directory. From now on, this will contain two subdirectories: "defaut" and "mondesign".
Open the directory that you have just copied. There you will find many folders as well as a number of HTML files. Rest assured, it is not necessary to modify all of these to change the design of your site! Only two elements are important:
- The "/tpl_image/" directory: this contains all the images which comprise the graphical interface for the site.
- The "/tpl_image/styles.css" file: this contains all the information to format and display page text, menus, headings, tables, etc
To modify the design, you will need to integrate your own images and modify the content of the CSS file.
Here is an example if you wish to insert your own logo in place of the phpMySport one:
- Place the image corresponding to your logo (in .jpg, .gif, .png or other format) in the "/tpl_image/" folder of the repository that you copied ("mondesign")
- Open the " /tpl_image/styles.css" CSS file
- Replace the following line:
  div#header { height:90px; width:100%; margin:0 auto; padding:0; }
- With:
  
  div#header { height: 90px; width:100%; margin:0 auto; padding:0; background:url(mon_logo.jpg) no-repeat; }
  #header img { display:none };
- The "mon_logo.jpg" file corresponds with the image that you have placed in the "/tpl_image/" folder. If necessary, modify the height "90px" as required for your image.
You can of course personalize the other elements of the interface: menu, title, page footer, font colors, height and color of text, titles, etc.
To change the design from the default and apply the modification that you have made:
- Go to the administration area, heading "site configuration"
- In the corresponding list displayed, choose the design that you created and select the choice
- The new design of your site will now display.

Please do not hesitate to make known your artistic qualities and share your graphic endeavors with other phpMySport users. To do this, please send your images and personalized CSS files to us!

Newsletter