Creating templates

Content

1. Introduction
2. The parts of the template
    2.1 Title of your site
    2.2 Location
    2.3 Section menu
    2.4 Submenu
    2.5 Page content
    2.6 Logoff link
    2.7 Last news link
    2.8 Automatically show when your site was updated
    2.9 Category template

1. Introduction

When a you want to change or create a new template you must have a fair knowledge of HTML and know how to integrate PHP code into HTML

The templates are located in ../starnet/themes/ directory. You can create a directory of your choice and all the template files have to be copied in this directory. The template directory name will automatically show up in the S@S management. The file main.inc.php contains a mix of HTML and PHP, where the PHP scripts take care of creating the menubars and filling the page content. The filename main.inc.php is fixed because it is called by the cms.
The standard template is a basic example which can be used as a starting point.

(top)

The parts of the template

We will now treat the different parts of the template.

(top)

2.1 Title of your site

This will print your site name in your browser:


template_title.jpg

<title><?PHP print "$sitename - $pagetitle"; ?></title>

2.2 Location:

This will print a line with the current site location:

[ ]
template_location.jpg

<?PHP
$query = "select name from $table_sections where id = '$section'";
$result = mysql_query($query);
$sectionname = mysql_result($result,0);
unset($query);
unset($result);
print "locatie: $sectionname -> $pagetitle";
?>

2.3 Section menu

This will create the menu items for the section menu:


template_sections.jpg

  • First example:

    <?PHP
    $query = "select id, name, frontpage from $table_sections where invisible != 'yes' ORDER BY sort"; 
    $result = mysql_query($query);
    while ($sectionmenu = mysql_fetch_array($result))
    {
    print "<td width=\"160\" height=\"18\" background=\"starnet/themes/starnet/button.gif\" 
           align=\"center\" onMouseOver=\"this.background='starnet/themes/starnet/button1.gif'\"   onMouseOut=\"this.background='starnet/themes/starnet/button.gif'\"><span class=\"buttonlink\">
    
          <a href=index.php?section=$sectionmenu[0]&page-$sectionmenu[2]>$sectionmenu[1]</a></span></td>";
    }
    >?
    

    This example assumes that the menubar is part of a table, the other html is left out to keep the example simple. The button.gif and button1.gif can of course be replaced by your own background gif's.

  • Second example:

    <?PHP
    $query1 = "select id, name, module from $table_pages where section='$section' and invisible != 'yes' ORDER BY sort";
    $result1 = mysql_query($query1);
    while ($sectionmenu = mysql_fetch_array($result1))
    {
    if(substr($sectionmenu[2],0,5) == "http:") 
    {
     print "<tr>
           <td width=\"162\" background=\"starnet/themes/dalton1/menu-button.gif\" height=\"21\"
     onMouseOver=\"this.background='starnet/themes/dalton1/menu-button1.gif';\" onMouseOut=\"this.background='starnet/themes/dalton1/menu-button.gif';\">
            <b> <a href=$sectionmenu[2] style=\"text-decoration:none; font-family:verdana; font-size:10pt; color:white\">$sectionmenu[1]</a>
    
            </b></td></tr><tr><td height=\"6\"></td></tr>";
    } else {
    print "<tr>
            <td width=\"162\" background=\"starnet/themes/dalton1/menu-button.gif\" height=\"21\"
    onMouseOver=\"this.background='starnet/themes/dalton1/menu-button1.gif';\" 
    onMouseOut=\"this.background='starnet/themes/dalton1/menu-button.gif';\"><b> 
            <a href=index.php?page=$sectionmenu[0]§ion=$section style=\"text-decoration:none; font-family:verdana; font-size:10pt; color:white\">$sectionmenu[1]</a>
    
            </b></td></tr><tr><td height=\"6\"></td></tr>";
     }
    }
    ?>
    

    This second example makes it possible to create a menu item with a link inside or outside the cms.
    For this purpose we use the module field when creating a page:

    [ ]
    template_outside_link.jpg

    Instead of specifying a module name we give a valid http address. The PHP code in the template checks for http: (lowercase) and if it finds it, it will create a menu link with this http address.
    The target="_blank" is used to open the requested link a new browser window .

    2.4 Submenu

    This creates the menu items for the pages of a section:

    [ ]
    template_pages.jpg

    <?PHP
    $query1 = "select id, name from $table_pages where section='$section' and invisible != 'yes' ORDER BY sort";
    $result1 = mysql_query($query1);
    while ($sectionmenu = mysql_fetch_array($result1))
    {
     if($sectionmenu[0] == $page)
     {
      print "<tr height=\"25\"><td width=\"20%\" align=\"right\"><img border=\"0\" src=\"starnet/themes/starnet/nblt.gif\"width=\"6\" height=\"12\"></td>";
      print "<td width=\"80%\" background=\"starnet/themes/starnet/menu-bg2.gif\"><font size=\"2\">";
      print "$sectionmenu[1]</font></td></tr>";
     }
     else
     {
      print "<tr height=\"25\"><td width=\"20%\" align=\"right\"><img border=\"0\" src=\"starnet/themes/starnet/nblt.gif\"width=\"6\" height=\"12\"></td>";
      print "<td width=\"80%\" onMouseOver=\"this.background='starnet/themes/starnet/menu-bg2.gif'\"onMouseOut=\"this.background=''\"><font size=\"2\">";
      print "<a href=index.php?page=$sectionmenu[0]§ion=$section>$sectionmenu[1]</a></font></td></tr>";
     }
    }
    
    >?
    

    This example assumes that the menubar is part of a table, the other HTML is left out to keep the example simple.

    2.5 Page content

    This will create the important part, the real contents of a page:

    [ ]
    template_content.jpg

     
    <?PHP
    $query = "select module from $table_pages where id='$page'";
    $result = mysql_query($query);
    $module = mysql_result($result,0);
    unset($query);
    unset($result);
    if($module != '')
    {
     print "<table border=\"0\" cellpadding=\"10\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\"#111111\" width=\"100%\"><tr><td width=\"100%\">";
     include("starnet/modules/$module");
     print "</td></tr></table>";
    }
    else
    {
     $query = "SELECT content FROM $table_pages WHERE id='$page'";
     $result = mysql_query($query);
     $content = mysql_result($result,0);
     unset($query);
     unset($result);
     $content = str_replace("../","",$content);
     print "<font class=\"text\" size=\"2\">$content</font>";
    }
    ?>
    
    

    The first part checks to see if an installed module is called (eg. guestbook or mailpage). If this is not the case a normal HTML content is read from the MySQL table.

    2.6 Logoff link

    This example creates a logoff link.

     
    <?PHP
    if(IsSet($HTTP_SESSION_VARS[userid]))
     {
      print "<a href=index.php?section=$section&page=$page&logout=yes><font color=\"red\">logoff</font></a>";
     }
    ?>
    

    2.7 Last news link

    This example takes the title of the last created news item and shows a link:


    template_last_news.jpg

     
    <?
    $query = "select title from sn_news_articles order by id desc limit 1";
    $result = mysql_query($query);
    $newstitle = mysql_result($result,0);
    print "<a style=\"color: red ; font-size: 10\" href=\"index.php?page=xx\">last news: <b>$newstitle</b></a>" ;
    ?>
    

    Where 'xx' is the page number where your news page is on the site.

    NOTICE: The news table: sn_news_articles can have a different prefix on your site.

    2.8 Automatically show when your site was updated

    When a page is added or changed, S@S will store the date of this action into the database.
    Use the following to show it on on the bottom of the page, e.g.:

    <?PHP
     $query = "select config_value from $table_configuration where config_key='last_update_date'";
     $result = mysql_query($query);
     $date1 = mysql_result($result,0);
     unset($query);
     unset($result);
     print "site last updated on : $date1" ;
    ?>
    

    When you have installed version 1.2.1 or above, the last update date will be stored for every page in S@S.

    <?PHP
    $query = "select unix_timestamp(lastupdate) from $table_pages where id='$page'";
     $result = mysql_query($query);
     $date = mysql_result($result,0);
     unset($query);
     unset($result);
    $query = "select config_value from $table_configuration where config_key='dateformat'";
    $result = mysql_query($query);
    $date_format = mysql_result($result,0);
    unset($query);
    unset($result);
    $date = strftime($date_format,$date);
    print "© $sitename , page last changed on $date "; 
    ?>
    this will give : "© sitename , page last changed on 01-09-2003"
    

    2.9 Category template

    (Only available in S@S version 1.2.1 and above)
    Version 1.2.1 and above has a new template called category which uses the new category field to create a popupmenu on the left side of the screen.
    When you fill in the category field it is possible to create the a popupmenu like this:

    [ ]
    template_popupmenu.jpg

    The wordings are in Dutch but you'll get the picture.

    (top)

    Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
    Last updated: 2005-05-29