Creating your own template


Need to know

The pages viewed by the end user can be customised to use the same design as the host site. This is achieved by taking a blank template and adding some tokens to the HTML code where the chunks of information from the portal will be insterted.

Once the templates are modified they need to be uploaded to a sub folder of your portal directory, typically this would be tpl/yourDesignName and this path added to the project design input field.



Need to do

Once you have the design create your HTML template in the same way. Usually all you will need is:

  • An HTML/PHP file called page.php
  • A CSS File (optional)
  • Some images (optional)

After this use the portal template tags to fill the appropriate gaps you have left in your template.

In more depth

The implementation of a template for portal use needs to be undertaken by someone with advanced HTML, CSS skills and a basic knowledge of PHP.

Although skilled designers with PHP skills will be able to create any look they wish the following basic layout will be the easiest to implement:



Your template should be called page.php and you can call whatever you require in the way of images and css to make it create the design you wish. In addition to your code you will include some special statements used to draw in the portal information. Here is an example:

<?php
    // Required to specify the size of grid in the body of your page.
    // Note this should be given as much space as possible and it
    // should only be a number (not followed by px or %)
    $gridwidth = 760;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="Beechwood, college, autism, aspergers syndrome, specialist education, special needs, south wales" name="Keywords" />
<meta content="no-cache" http-equiv="cache-control" />
<link href="tpl/beechwood/global.css" rel="stylesheet" type="text/css" />

<!--
In addition to your css you must include menus.css so that the
dropdown menu system is implemented correctly.  This line should
appear after your own css entries.
-->
<link href="menus.css" rel="stylesheet" type="text/css" />


<!--
You can use any description for the title but if you would
like to use that set for your portal automatically use the
following entry.
-->
<title><?php _e($props['projectName']); ?></title>

<!--
The following line is required to include links and
code for playing videos, uploading files etc...
-->
<?php _e($head); ?>
</head>

<body>

<?php include("$realpath/menus.php"); ?>
<div id="wrapper">
  <div id="contentcontainer">
    <div id="headercontainer">
      <div id="header">
        <div id="logo">
        </div>
      </div>
    </div>

    <div id="rightwrap">
<!--
The main body of the page requires the following three lines
-->
<?php
include("$realpath/$tpl-article.php");
if(file_exists("$realpath/$tpl-article2.php")) include("$realpath/$tpl-article2.php");
?>

      <div style="text-align: center">
<!--
The footer requires the following line
-->
<?php include($realpath.'/footer.php'); ?></div>

    </div>
   </div>
</div>

</body>
</html>


Once you have created your template you need to upload it to a subdirectory of the tpl folder for your portal and enter it into the template name field for the portal/project.

Further help


CategorySCPPortals