Home
 

LFCS website - technical information

LFCS site style

There is a simple style which should be used on all pages within the LFCS site. Think twice if you want to use a different style, as this may decrease both clarity and look of the LFCS website. Using this style is very straightforward. If you are editing raw HTML, then you can structure your document as follows (sections shown in bold are parts that you should edit). 
<!--#include virtual="/ssi/doctype.inc"-->
<title>Put your title here</title>
<!--#include virtual="/cgi-bin/metabase"-->
<!--#include virtual="/ssi/lfcsheader.inc"-->

<h1>Put your title here</h1>

Content goes here

<!-- Contact to person responsible for this page -->
<!--#set var="contact-name" value="Jan Obdrzalek" -->
<!--#set var="contact-url" 
         value="//www.inf.ed.ac.uk/people/students/Jan_Obdrzalek.html"-->

<!--#include virtual="/ssi/lfcsfooter.inc"-->

Authors using HTML editors can fetch this template. Once you have a template to start editing, the procedure is the same as if you were editing existing content.

With every page there should a contact to the person responsible for information on this page. This contact, together with the date of the last modification, is then included in the footer of each page. The contact information is held in the variables contact-name and contact-url - see the template. If you omit this section then the secretary, currently Dyane Goodchild, will be the contact person.

Colours, fonts, etc.

For the site to look uniform and to follow accessibility guidelines, please refrain from using other fonts then the default one (sans-serif). There is a colour scheme devised specifically for this page. Unless you have a very good reason to do so, please do not use any other colours then the ones in the table below. Headers are dark blue (#000033) by default.

LFCS website colour scheme
class name RGB value text link visited link
  #000000 sample sample sample
Cblue #ccddee sample sample sample
Cgray #ededed sample sample sample
Cyellow #ede8cc sample sample sample
Cdarkblue #000033 sample sample sample

I strongly suggest that you use CSS for formating. Inthat case you can apply the colour by using the attribute class="your_colour". For example this text was formated using <span class="Cblue">text<\span>. If you are after a rectangular box, use this <dvi class="Cyellow">box contents<\div>. And if you want to use your own classes, just use nesting or define the background-color and color attributes accordingly.

Project pages

You may want to (and you should!) have the pages of your project in the LFCS style. In that case you may be interested in using a different header, where "Laboratory for Foundations of Computer Science" moves to the top of the banner, and the name of the project occupies the prominent position. Like in this example.

To achieve this, you have to first prepare a banner with the name of your project. The banner must be exactly 54 pixels high, with background colour #dedede. You preferably shoul also use foreground colour #000033. It is also good idea to use a similar font to the default one (URW Bookman L, Bold). Assume your banner is named images/banner.gif, your project name is My great project and the project homepage is project.html. What you need to do now is to replace the declaration <!--#include virtual="/ssi/lfcsheader.inc"--> with the following: 

<!--#set var="custom-banner" value="images/banner.gif" -->
<!--#set var="custom-url" value="project.html" -->
<!--#set var="custom-name" value="My great project" -->
<!--#include virtual="/ssi/customheader.inc"-->

What not to do