JISCMail

Web Customisation

JISCMail - Templating

This is a guide to templating which is how list owners can change the look and feel of their list's homepage.

For this tutorial, the list example will be the JISCMail's OWNERS-ANNOUNCE list. At the time of the page being written it looked like:

OWNERS-ANNOUNCE

Your pages in your list in made by a compilation of modules and therefore if you wanted to change for example the logo in the top left hand corner, you would edit the Module BODY-GLOBAL-HEADER.

Your pages will also have a style which is a file that contains a set of rules for the pages to format. This is in CSS format (CSS is defined in the Glossary)

To edit a style/module, make sure you are on the list that you would like to edit and then go to the menu bar at the top of the page (under the titlebar)
List Management>Customization>Web Templates

Then, type in the name of the stylesheet/module you would like to edit and click search.

That module should now be displayed in a text box ready to edit.

Your list will have a style which is in CSS. By changing the style of the site you can completely change the look of your list's homepage (see example below). The Most major differences that can be made with CSS would be colours, fonts and backgrounds

The main stylesheet to edit is STYLESHEET-GLOBAL

You can also move the modules around as shown in the example above, the login details don't appear in the top right, instead they appear just below the menu bar on the right.

Here is two brief tables explaining how the modules work and what various parts of the modules mean.


Substitution	Description
`&DATE`	Date in the format: dd mmm yyyy
`&TIME`	Time in the format: hh:mm:ss
`&WEEKDAY`	Day in the format: Mon, Tue, Wed, Thu, Fri, Sat, Sun
`&ISODATE`	Returns today's date in ISO format. i.e. yyyy-mm-dd
`&OSTYPE`	The operating system under which LISTSERV is running
`&LISTNAME`	List Name
`&TITLE`	List Title
For more Substitutions, go to: LSoft Manuals
Most Common Commands

Command	Description
`.BB cond`	Start of a conditional Block (see also .EB, .ELSE and .QU)
`.EB`	End of a conditional Block (see also .BB, .ELSE and .QU)
`.ELSE`	Conditional ELSE (see also .BB, .EB and .QU)
`.IM name`	Inserts another template
`.QU`	Quit conditional block (see also .BB, .EB and .ELSE)
`.QUIF`	Similar to .QU however is a one line condition i.e. .QUIF &DATE = 25 DEC 2009 This would quit the loop if it was Christmas day in 2009
`.SJ`	Sets subject for messages
`.SM`	Sends a copy of message by email if outputting by web interface

An example of using the conditional blocks would be: `.BB &x = 10` put a statement here `.ELSE` another statement here `.EB`
For more commands, go to: LSoft Manuals

Modules

Please find the most major modules listed below. If you would like more information about a module, just hover your cursor over the module and more information will appear underneath.

BODY-GLOBAL-LOGGEDIN :


      +BB &+LOGGED_IN; &+IS_ADMIN; &+IS_OWNER; &+IS_MOD;
      <table cellpadding="2" cellspacing="0" border="0">
      <tr>
      <td class="userRole">

      <a href="#SKIPNAVLINKS"><img src="&+BLANK;" alt="&+T-SKIPNAVLINKS;"
        width="1" height="1" border="0"></a>
      &+T-LOGGEDIN; &+EMAIL-ADDRESS;

Displays email address of user


    +BB &+IS_ADMIN; &+IS_OWNER; &+IS_MOD;
     (
    +EB
    +BB &+IS_ADMIN;
    &+T-ADMINISTRATOR;
    +EB
    +BB &+IS_OWNER;
    +BB &+IS_ADMIN;
     -
    +EB

    &+T-OWNER;
    +EB
    +BB &+IS_MOD;
    +BB &+IS_ADMIN; &+IS_OWNER;
     -
    +EB
    &+T-MODERATOR;
    +EB
    +BB &+IS_ADMIN; &+IS_OWNER; &+IS_MOD;
     )
    +EB

Displays user's attibutes (i.e. Owner, Moderator, etc..)


    </td>
    </tr>
    </table>

    +EB

OBJECT-GLOBAL-USERMODE :


      <table cellpadding="2" cellspacing="0" border="0">
      <tr>
      <td class="userRole">
      +BB &+LOGGED_IN;
      
      
      +BB &+LEVEL-BASIC;
      <a href="&+SCRIPT;?PREF&+OPTXY;">&+T-BASIC;</a>

      +EB

States "Basic Mode" if in basic mode.

      +BB &+LEVEL-EXPERT;
      <a href="&+SCRIPT;?PREF&+OPTXY;">&+T-EXPERT;</a>
      +EB

States "Expert Mode" if in expert mode.

      +BB &+LEVEL-TUTORIAL;

      <a href="&+SCRIPT;?PREF&+OPTXY;">&+T-TUTORIAL;</a>
      +EB

States "Tutorial Mode" if in tutorial mode.


      +BB &+IS_ADMIN;&+LIST_OWNER;
      +IM OBJECT-GLOBAL-EDITMODE

Shows link to go into edit mode



      +EB
      +EB
      </td>
      </tr>
      </table>

BODY-GLOBAL-HEADER :


    <table width="100%" cellpadding="0" cellspacing="0" border="0" class="titleBorderTop">
    <colgroup>
    <col width="*">
    <col width="275">

    </colgroup>
    <tr>
    <td><a href="http://www.jiscmail.ac.uk"><img src="/images/main.jpg" />
      alt="JISCmail Logo" title="JISCmail - National Academic Mailing List Service"
      border="0"></a></td>

Change this highlighted text to change the logo on the list pages.


    <td align="right">
    +IM OBJECT-GLOBAL-HELP

Remove this to get rid of the help button. Else you could just move it.



    </td>
    </tr>
    </table>

OBJECT-GLOBAL-LISTSELECTOR-LISTSELECT :


      <td valign="top" align="left">
      <p>
      <LABEL FOR="&+T-SELLIST;"><b>&+T-SELLIST;:</b></label><br>

      <select name="&+WA-FUNCTION;" id="&+T-SELLIST;"
      +BB ^&+NOJAVASCRIPT;
       OnChange="subform();">
      +ELSE
      >
      +EB
      <option value="">&+T-SELLIST;
      &+SELECTION-MENU;
      </select>
      
      +IM OBJECT-GLOBAL-LISTSELECTOR-NAVBAR

This is the navigational bar that is shown under the title. To change the contents of the bar goto the module OBJECT-GLOBAL-LISTSELECTOR-NAVBAR



      </p>
      </td>

BODY-GLOBAL-PAGETITLE :


      <br>
      <table width="100%" cellpadding="5" cellspacing="0">
      <tr>

      +BB ^&+PREF(UNCLUTTER);
      +BB &+TITLEICON;
      
      <td width="64"><img src="&+TITLEICON;" alt="&+PAGE-TITLE;" title="&+PAGE-TITLE;"></td>

This is where the icon is displayed


      +EB
      +EB
      <td width="100%" nowrap>
      <h2>&+PAGE-TITLE;
      +BB &+LISTNAME;
      +BB ^&+SUPPRESS-LISTNAME;
       (&+LISTNAME;)
      +EB
      +EB

      </h2>
      </td>
      +BB &+LISTNAME;
      +BB ^&+EQU(&+LISTNAME;,SITE);
      +BB ^&+SUPPRESS-HOME;
      <td align="right" valign="bottom" nowrap><p><a href="&+SCRIPT;?A0=&+LNAME;&+OPTXY;">
        &+LISTNAME; &+T-HOME;</a></p></td>

The is where the text for the pagetitle is displayed


      +EB
      +EB
      +EB
      </tr>
      </table>

OBJECT-A0-LISTADDR :


      +SE TITLE &+TITLE;
      +BB &+LIST-ADDRESS;
      <h2>&+LIST-ADDRESS;</h2>

If there isn't a list name to display, the list address is shown



      +ELSE
      <h2>&+LISTNAME;@&+MYHOST;</h2>

If there is a list name to display LISTNAME@jiscmail.ac.uk is displayed

+EB

OBJECT-A0-LISTTITLE :


      +SE LIST-TITLE &+TITLE;
      +BB &+LIST-TITLE;

      <tr><td><p><b>&+LIST-TITLE;</b></p></td></tr>

This is where you list title is displayed by default


      +ELSE
      <tr><td><p> <p></td></tr>

      +EB

OBJECT-A0-LISTDESC :

+SE USE_TEXTDESC 1

Remove/Comment this to display html description instead of default plain text description. To edit HTML description goto List Management>List Configuration>List Configuraion Wizard

      +SE USE_LINEBREAKS 0

Remove/Comment this if you do not want linebreaks in the text description.


      +SE LIST-TITLE &+TITLE;
      +BB &+LONGDESC;
      +BB &+USE_TEXTDESC;
      +SE LIST-DESC &+ESC(&+LONGDESC;);
      +BB &+USE_LINEBREAKS;
      +SE LIST-DESC &+BREAK(&+LIST-DESC;);
      +EB
      +ELSE
      +BB &+HTMLDESC;
      +SE LIST-DESC &+HTMLDESC;
      +ELSE
      +SE LIST-DESC &+ESC(&+LONGDESC;);
      +BB &+USE_LINEBREAKS;
      +SE LIST-DESC &+BREAK(&+LIST-DESC;);
      +EB
      +EB
      +EB
      +ELSE
      +BB &+HTMLDESC;
      +SE LIST-DESC &+HTMLDESC;
      +EB
      +EB
      +BB &+LIST-DESC;

      <tr><td><p><i>&+LIST-DESC;</i></p></td></tr>
      +EB

OBJECT-A0-TOPOPTIONS :


      <tr>
      <td width="10%" valign="top" nowrap><p><b>&+T-ARCOPTIONS;:</b></p></td>

      <td>
      <p>
      +BB &+EMAIL-ADDRESS;
      <a href="&+SCRIPT;?RESET-COOKIE&L=&+LNAME;&+OPTXY;">&+T-LOGOUT;</a>
        | <a href="&+SCRIPT;?LOGIN1&c=1&L=&+LNAME;&+OPTXY;">&+T-CHANGEPW;</a><br>

      +ELSE
      <a href="&+SCRIPT;?LOGON=A0%3d&+ENC(&+LNAME;)&L=&+LNAME;&+OPTXY;">&+T-LOGIN;</a>
        | <a href="&+SCRIPT;?GETPW1&+OPTXY;">&+T-GETPW;</a><br>

      +EB

Displays "Logout" if logged in and if logged out displays "Login | Get Password"

+BB &+EMAIL-ADDRESS;
      <a href="&+SCRIPT;?SUBED1=&+LNAME;&+OPTXY;">&+T-ARCJOIN;</a><br>
      <a href="&+SCRIPT;?P1&L=&+LNAME;&+OPTXY;">&+T-ARCPOST;</a><br>

      +ELSE
      <a href="&+SCRIPT;?SUBED1=&+LNAME;&A=1&+OPTXY;">&+T-ARCJOIN;</a><br>
      +EB

Displays phrase "Join or Leave LISTNAME" and if a member of the List it also displays "Post a new Message"


      +BB &+A1LINKS;
      <a href="&+SCRIPT;?S1=&+LNAME;&+OPTXY;">&+T-ARCSEARCH;</a>

Displays phrase "Search Archives"



      +EB
      </p>
      </td>
      +*Tools Navigation links
      <td width="400">
      +IM OBJECT-GLOBAL-NAV-TOOL-BLOCK
      </td>
      </tr>

TOOLS-MENU-SETTING :

+SE TOOL_MENU_DEPOT 1
      +SE TOOL_MENU_FILEAREA 1
      +SE TOOL_MENU_DISCUSSION 1
      +SE TOOL_MENU_PROCUREWEB 1
      +SE TOOL_MENU_SURVEY 1
      +SE TOOL_MENU_MAKE_A_MEETING 1
      +SE TOOL_MENU_JISCINFONET 1
      +SE TOOL_MENU_JISCTECHDIS 1

Each element here can easily be moved or removed. You can also add html to change the way they are displayed else just change the order that they appear in.