Image of JISCMail logo w/ link to homepage
Email discussion lists for the UK Education and Research communities

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

list with changed style

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.

   
&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  
   
.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 :
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;
    
up arrow

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
    
up arrow

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


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

    +EB
    

OBJECT-GLOBAL-USERMODE :
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
      
up arrow

States "Basic Mode" if in basic mode.

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

States "Expert Mode" if in expert mode.

      +BB &+LEVEL-TUTORIAL;

      <a href="&+SCRIPT;?PREF&+OPTXY;">&+T-TUTORIAL;</a>
      +EB
      
arrow indicating to see above

States "Tutorial Mode" if in tutorial mode.


      +BB &+IS_ADMIN;&+LIST_OWNER;
      +IM OBJECT-GLOBAL-EDITMODE
      
arrow indicating to see above

Shows link to go into edit mode



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

  

BODY-GLOBAL-HEADER :
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>
    
arrow indicating to see above

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


    <td align="right">
    +IM OBJECT-GLOBAL-HELP
    
arrow indicating to see above

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



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

OBJECT-GLOBAL-LISTSELECTOR-LISTSELECT :

menu


      <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
      
arrow indicating to see above

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 :
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>
      
arrow indicating to see above

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>
    
arrow indicating to see above

The is where the text for the pagetitle is displayed


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

OBJECT-A0-LISTADDR :

object-a0-listaddr


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

      
arrow indicating to see above

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



      +ELSE
      <h2>&+LISTNAME;@&+MYHOST;</h2>
      
arrow indicating to see above

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



      +EB
    

OBJECT-A0-LISTTITLE :
object-a0-listtitle



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

      <tr><td><p><b>&+LIST-TITLE;</b></p></td></tr>
      
arrow indicating to see above

This is where you list title is displayed by default


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

      +EB
    
OBJECT-A0-LISTDESC :
object-a0-listdesc


+SE USE_TEXTDESC 1
      
arrow indicating to see above

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
      
arrow indicating to see above

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 :
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
      
arrow indicating to see above

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
      
arrow indicating to see above

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>

      
arrow indicating to see above

Displays phrase "Search Archives"



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

    

TOOLS-MENU-SETTING :
tools-menu-settings


+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
      
arrow indicating to see above

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.