Palview4 Manual  *   The Palview Pages  *   The Palview Developers Forum  *   Home  *   Palamede

Palview and Cascading Stylesheets CSS

Palview allows you to take control over much of the formatting of the Html files that it generates from your games. Some of these formatting details are provided through the many INI Options that Palview understands. But many other details are controlled through the CSS file that you use with the Html. CSS stands for Cascading Stylesheet.



Palview Cascading Stylesheets Index


Cascading Stylesheet Basics A quick tutorial

CSS for the Game

CSS for the Crosstable

CSS for the Magazine

CSS for the Index



Cascading Stylesheet Basics

First and foremost it should be noted that we cannot possibly explain all the details of Cascading Stylesheets, nor would we want to spend that kind of time here. Because of this, we highly recommend that you visit the World Wide Web Consortium at www.w3.org to obtain a copy of their Recommendations for CSS1 and CSS2. They can be located here: Cascading Style Sheets, level 1 (CSS1) and CSS2. You will find these to be invaluable reference material for the pages you create with Palview.

Our objective here is to familiarize you with the very basics of CSS and to describe the actual CSS classes that Palview uses when it generates an Html file. It is through these classes that you can change the appearance of your Html page.

A CSS stylesheet allows us to specify the styles to be used in formatting our Html page. Since this stylesheet is a separate file, we can keep and maintain all the formatting details there so that we won't have to constantly edit the Html file itself to change its appearance. The stylesheet file itself is just a simple text file with the extension .css, so we can easily load the file into any simple word processor for editing. Notepad alone is adequate for editing a CSS file.

A CSS file is simply a set of CSS rules. A CSS rule has two parts: a selector and a declaration. Consider the following rule:

 BODY {background-color: floralwhite;}

In the above CSS rule, BODY is the selector and {background-color: floralwhite;} is the declaration. The declaration itself consists of two parts called the property and the value. In our declaration example the property is background-color and the value is floralwhite. Notice that the property ends with a colon and that the value ends with a semicolon.

Notice that the selector, BODY, is also an Html tag. This is how the formatting indicated within the CSS file is actually associated with the Html document itself. In its simplest expression, the matching selector within the Html document is formatted in accordance with the matching rule's declaration. In our example above, the BODY of the page will be displayed with a background color of floralwhite.

You can create a CSS rule for just about any Html tag that you can think of. For example, you might create a CSS rule like the following for all your Html paragraphs:

P {text-indent: 1em;
   text-align: justify;
   font-family: "Times New Roman", "Courier New", serif;
   font-size: 12pt;
   color: black;}

In this example we can see that a number of declarations can be provided within the same rule. All the declarations are contained within the curly brackets. Of particular interest is the font-family property. In this property we can see that a number of font names are included as the value. Naturally, you cannot tell what fonts may be installed on the computer that attempts to read your Html file. So the font-family property allows you to specify a list of fonts that the browser should try to use. The browser will look for each of these fonts in the order that they appear in the list. So in our example the browser will first look to see if the Times New Roman font is installed on the computer. Then it will move on to look for the next font in the list, Courier New, etc. The first font that the browser finds will be the one used to format the paragraph. Notice the serif at the end of the list. If none of the fonts in the list are found on the computer, then the browser will select a serif font of its own choosing.

The rest of the declarations in the above rule are reasonably clear to understand. In fact, the above rule was used to format the paragraph you are reading now. Notice that this paragraph is indented, justified, and the text is black. The size of the text is set by the font-size property which in our example is set to a value of 12pt or 12 points.

The above rule has one possible drawback. What if you want to have a paragraph in your Html file that has a different style of formatting? Since the above rule is invoked for all the paragraphs in your Html file, this presents a problem. But it can be solved quite easily in CSS by using a named form of a selector called a class.

You can provide a class name as a selector for any CSS rule. The name itself usually consists of a string of letters prefixed with a period as in the following example:

.boldpara {text-indent: 1em;
           text-align: justify;
           font-family: "Times New Roman", "Courier New", serif;
           font-size: 12pt;
           color: black;
           font-weight: bold;}

You can then use the class inside your Html file like this:

<P class='boldpara'>This paragraph will appear in bold.</P>

Notice that the class name in the CSS file is prefixed with a period, but when used in the Html file this period is not used.

Palview uses a number of classes to display various parts of the PGN games that it converts to an Html file. Many of these class names are used in particular to display the information about the game that appears within the PGN tags. For example, Palview uses the class peco for displaying the ECO tag information. It uses pplay for the player's names White and Black. Other classes include, pelo, ptitle, pevent, popen, and panno. There are a number of others as well, but you will learn more about them in the other sections of this manual.

One aspect of CSS that is important to remember when editing or creating a CSS file is the concept of Inheritance. Some elements in Html can appear within other elements. For example, we can make a section of text within an Html paragraph appear in Italics by surrounding the text with the Html Italic tag as in the following example:

<P>The scariest thing that I've ever read is the play
<I>Who's Afraid of Virginia Woolfe?</I>
by Edward Albee.</P>

The simple Html example above illustrates the concept of Inheritance. Anyone who is at all familiar with Html will know that the text between the <I> and </I> tags will appear in Italics, like Who's Afraid of Virginia Woolfe? but that the other display aspects of the title will be unchanged from that of the rest of the paragraph. In other words, the play's title will Inherit the rest of the style rules from the paragraph in which it occurs. If the paragraph was using a font-size of 12pt, then the title would also be 12pt. If the paragraph uses the Times New Roman font, then the title will use the same font. The only thing that changes is that the title appears in Italics.

We could easily emulate the Html Italic tag by creating our own CSS rule:

.ital {font-style:italic;}

Now we could use the Html SPAN element and our new ital class to reproduce the same effect as the simple Html <I> tag:

<P>The scariest thing that I've ever read is the play
<SPAN class='ital'>Who's Afraid of Virginia Woolfe?</SPAN>
by Edward Albee.</P>

Many of Palview's classes are SPANed into the Html file. As a result, these particular class elements inherit the style rules of the parent element. Only those declarations that are specifically included in the particular class will be different from the parent.

As an example consider the following Palview CSS class that is used to format the ECO code of a game:

.peco {font-family:Verdana,sans-serif; font-size:10pt; font-style:italic;
       text-align:right; font-weight:bold;}

If the ECO code were written directly into a paragraph, it would appear in the Html as:

<P>The ECO code of this game was <SPAN class='peco'>B45</SPAN></P>

If we assume that the paragraph was using 12pt, then the ECO code above, B45, would appear in the smaller 10pt test size. Because we have provided a specific value for the text-size in the .peco class, it will be used instead of the parent elements text-size. But notice that no text color has been specified in the .peco class. In this case the color of the ECO code, B45, will inherit whatever color the parent paragraph is using.

This should provide you with enough detail about CSS to be able to edit any of the existing CSS files that come with Palview. We highly recommend that you obtain a copy of the Cascading Style Sheets, level 1 (CSS1) and CSS2 documents for your own reference.



CSS for the Game

In this section we will explain Palview's CSS support for the actual game. We will be using the htmltype = normal page for this discussion, but the ideas developed here apply to the other page types in most instances. There are three general sections to the Html file of a game. These parts are the board, infobox, and the moves. We will tackle each of these in turn, but we will first examine the global CSS selector that influences the entire page. This is the BODY selector.

The BODY selector allows you to set various style properties for the entire page. Typically this will be used to set a background image or color to the page, or to set left and right margins, etc. Palview does not actually write any BODY selector at all, this is up to you to include in your CSS file if you want to do so. For example, you could use the following to set the background color of your page to an off-white to reduce the glare from an all white page:

 BODY {background-color:floralwhite;}

Alternatively, you could choose a background image for your page instead using this:

 BODY {background-image: url(backgrnd.jpg);}

The reason why the BODY selector is being discussed here at all is to illustrate an important point about CSS and Html TABLEs. Essentially, all your TABLEs will have an invisible background unless you provide one. This means that you can see through your TABLE at whatever lies underneath it. In some cases this may be just what you want, but in most cases this is undesirable. For this reason, Palview inserts a CSS class name into the outer Html TABLE that contains the entire game, including the board, infobox, and the moves. This outer table CSS class is named pgob for Palview Game Outer Border. In the screen capture below the double green border that encloses the entire game, including the board, is the TABLE that contains the pgob class.

An example of the pgob class is:

.pgob {border-style:double; border-color:black; border-width:3px;}

The Html code that Palview produces for the pgob TABLE can change depending upon the values of padding, tablewidth, and pcsize, but it will generally look like the following.

<CENTER>
<TABLE class='pgob' CELLPADDING='10' WIDTH='90%'>
<TR><TD WIDTH='290'><BR><CENTER>
   ... the board goes here ...
</CENTER></TD><TD VALIGN='TOP'>
   ... the infobox and moves go here ...
</TD></TR>
</TABLE>
</CENTER>

The important point of the pgob class is to provide the ability to set a background color and border for each game. In this following example, we have set the background color to floralwhite with a single thin line border:

.pgob {border-style:solid; border-color:darkgreen; border-width:1px;
       background-color:floralwhite;}

There are a few peculiarities in dealing with the Netscape 4 browser and its CSS support. Please see the section below on Palview's CSS and Netscape 4.

The Board and CSS

The next section of the game CSS that we want to discuss is the board, including the board caption. The two classes that are of interest to us here are the pgbb, which controls the border around the actual chess board, and the pt, which controls the caption line under the board.

The pgbb class, short for Palview Game Board Border, allows us to place a variety of borders around our chess board. Here is the CSS that was used for the above chess board:

.pgbb {border-style:double; border-color:black; border-width:3px;}

A number of interesting border effects can be achieved using the pgbb class. For example, you can add a bit of space between the board and the border itself by adding a padding declaration to the class. You can also experiment with the width of the border to achieve some surprising results. Below is an example pgbb class and the resulting border as rendered by IE5 and NS6.

.pgbb {border-style:double; border-color:black; border-width:4px;
       padding:3;}

Internet Explorer 5.0

Netscape 6.2

There are a number of border styles defined by CSS1 that you can use with the pgbb class. Please see the Cascading Style Sheets, level 1 (CSS1) for more information on those styles. Also note that there are a few peculiarities in dealing with the Netscape 4 browser and its CSS support, especially in regard to borders. Please see the section below on Palview's CSS and Netscape 4.

The next CSS class that we want to examine is the pt class. It is used to provide the formatting of the caption line under the board itself. In our very first picture, you can see that the caption line under the board shows the last move played in the game, namely, 17. Rxe6! Palview writes the following Html under the chess board's TABLE to create the caption:

<P class='pt' ID='it0'>&nbsp;</P>

In our first example we used the following pt class:

.pt {text-align:center; font-family:Arial,Verdana,serif; font-size:12pt;
     font-weight:bold; color:black; white-space:pre;}

Most of the declarations above are common sense choices, such as bold, color, font-size, etc. And of course we have centered the text in the caption with the text-align:center; declaration. The most interesting declaration above is the white-space:pre;. If this is not included in the pt class, the board caption will 'collapse' whenever you write an empty line, which is exactly what happens at the start of the game (since no move has been played yet.) While it is not a disaster if this does happen, it is somewhat undesirable. Because of this, you should always include this in the pt class.

You should note that Netscape 4 cannot write the moves of the game into the board caption. While this does not affect the ability of any of your NS4 visitors from being able to play out the moves of the game, the page that NS4 renders does not look very nice. (Users with IE or NS6 will not be affected at all.) You may want to use the ns4comp INI option to get Palview to create pages that are as compatible with NS4 as we can make them. If you use ns4comp, Palview will replace the Html for the board caption with an Html FORM textbox instead. See the ns4comp INI option for more information.

The Infobox and CSS

The next section of the game CSS that we want to discuss is the Infobox. This uses a number of CSS classes to display all the relevant game information in a nice tidy box while giving you as much control over the actual formatting as possible. The game information itself is taken from the PGN Tags associated with each individual game. Here is an example of an infobox:

The first thing to note about the game infobox section is that it is all contained in a named Html division:

<DIV class='pgi'>
...
</DIV>

This is done to allow us to alter the padding of the entire division to 'squeeze' all the game information into a tighter box. This is done using the following CSS class:

DIV.pgi P  {margin: 0px; padding:1pt;}

The very first class that we will discuss is the pgib or Palview Game Infobox Border. This class is just like the other border classes we have discussed above, except that it provides a separate border for the infobox itself. Here is an example of the CSS class:

.pgib {border-style:ridge; border-color:green; border-width:2px;
       background-color:white;}

One of the more useful features of the pgib class is the ability to provide a background color for just the infobox itself. This allows you to use an off-white background color for the entire game TABLE, using the pgob class, and then set the infobox background to white as shown above.

The first line in our infobox example above shows the Opening name and the ECO code of the game. These values are either taken from the PGN Tags Opening, Variation, Subvariation, and ECO, or may be supplied by the p3eco program if used. Sometimes the line just doesn't exist at all because no values for the information exists at all. But if the values are present, Palview will use the two classes, popen and peco when writing them into the Html file. Here is an example of the Html itself:

<TABLE WIDTH='100%' BORDER=0 CELLPADDING=0><TR><TD ALIGN='left'>
<SPAN class='popen' TITLE="Taimanov : American Attack">Sicilian</SPAN>
</TD><TD ALIGN='right'><SPAN class='peco'>B45</SPAN></TD></TR></TABLE>

In the example above we have SPANed the two classes themselves. You can also see that we have used the INI option tooltipopening to reduce the size of the infobox. Users can hover over the Opening name itself, Sicilian, and they will be shown the Variation and Subvariation of the line in a tooltip. (This is highly recommended!)

Our CSS classes for the above Opening and ECO Tag values are:

.popen {font-family:Verdana,sans-serif; font-size:10pt; font-style:italic;
        text-align:left; font-weight:bold;}

.peco {font-family:Verdana,sans-serif; font-size:10pt; font-style:italic;
       text-align:right; font-weight:bold;}

The next section of the infobox lists the player's themselves along with their Country, Title, and Elo. The names themselves are taken from the PGN Tags, White and Black, while the other information is provided by the PGN Tags WhiteCountry, WhiteTitle, WhiteElo, BlackCountry, BlackTItle, and BlackElo. (This information can also be provided through the use of the INI option player.) Here is an example of the Html for this section of the infobox:

<P class='pplay'>
<IMG SRC='../flag/ind.gif' Border='1' TITLE="India"> Anand V.
<SPAN class='ptitle'> GM</SPAN>
<SPAN class='pelo'> (2771)</SPAN>
<BR>
<IMG SRC='../flag/hun.gif' Border='1' TITLE="Hungary"> Leko P.
<SPAN class='ptitle'> GM</SPAN>
<SPAN class='pelo'> (2701)</SPAN>
</P>

As you can clearly see above, the player's names use the CSS class pplay, the Titles use the class ptitle, and the Elo ratings use pelo. Here are the CSS classes themselves:

.pplay {font-family:Verdana,Arial,sans-serif; font-size:11pt; font-weight:bold;
        color:black; font-style:italic;}

.ptitle {font-family:Verdana,Arial,sans-serif; font-size:12pt; font-style:italic;
         font-weight:normal; color:black;}

.pelo {font-family:Verdana,Arial,sans-serif; font-size:10pt; color:black;}

The last piece of information displayed in the infobox is the name of the event itself and where it was played and on what date. All this information is pieced together from the three PGN Tags: Event, Site, and Date. You will also notice that the round the game was played in will be written in round brackets if the round is provided in the Round Tag. Here is the Html:

<P class='pevent'>Dortmund (4)
<BR>
Germany, 1999</P>

All the above information about where the game was played is displayed using the single CSS class pevent:

.pevent {text-align:center; font-family:Verdana,Arial,sans-serif; font-size:11pt;
         font-style:italic;}

The Moves and CSS

The next section to deal with is the game moves. The first thing to note about the game moves section is that it is all contained in a named Html division:

<DIV class='pgm'>
...
</DIV>

This is done for two reasons. The first is to isolate our control over the appearance of links, the actual moves, to this section of the document alone so that we don't alter the way links outside of the move section appear. The second reason is to allow us to alter the padding of the entire division to 'squeeze' more of the moves onto the screen. This is done using the following CSS class:

DIV.pgm P  {margin: 0px; padding:1pt;}

Note that this does not have much of an affect unless you are using the linebreaks = on INI option setting. The entire point of the above CSS class is to be able to reduce the spacing between lines, or Html paragraphs in our case. You can see the difference in the line spacing below.

{margin: 0px; padding:0pt;} {margin: 0px; padding:2pt;}

In the above two examples, you will notice that the very first paragraph appears before any of the moves in the game and is all in italics. Any PGN comment that appears before the first move in a game is treated as a special introduction comment and is given its own CSS class pintro. This allows you to provide special formatting to your game's introduction to set it apart from the rest of the game commentary. In our example above we chose to go with italic, a common introduction format. The pintro class is:

.pintro {text-indent:1em; text-align:justify; font-family:Verdana,Arial,sans-serif;
         font-size:10pt; font-style:italic; font-weight:normal;}

The introduction comments themselves will be written to the Html file as:

<P class='pintro'>The following game and annotations is from the book,
'Great Short Games of the Chessmasters', by Fred Reinfeld.</P>

After any introductory comments, we arrive at the first actual move of the game. All the game moves are placed in an Html paragraph using the pm class, short for Palview Moves. Here is an example of the pm class:

.pm {text-indent:0em; text-align:justify; font-family:Verdana,Arial,sans-serif;
     font-size:10pt; font-weight:bold; color:black;}

The moves themselves will be written to the Html file as:

<P class='pm'>1. e4 e5 2. Nf3 Nf6 ... </P>

The next part of the moves section to examine is the comments and variations. Palview writes comments into the pc and pc2 classes, depending upon the depth of any variation moves within the comment. We will leave the discussion about variation depth for later, at the moment we want to discuss comments themselves. Here is the actual pc and pc2 classes:

.pc, .pc2 {text-indent:1em; text-align:justify; font-family:Verdana,Arial,sans-serif;
           font-size:10pt; font-weight:normal; color:black;}

The classes are actually combined by separating their names with a comma. We want the actual text of the comments to appear to be the same regardless of variation depth, but we could just have easily separated the two classes so that we could apply a different style to each.

These comments will be written to the Html as a P paragraph if linebreaks = on is used, or they will be written as a SPAN if linebreaks = off. Here is the Html:

linebreaks = on
<P class='pc'>Black meets the threat but weakens his K-side.</P>
linebreaks = off
<SPAN class='pc'>Black meets the threat but weakens his K-side.</SPAN>

Our next class is used specifically for figurines. This is the class pf, short for Palview Figurine. The use of this class is dependant upon a number of factors. First, you must set the INI option figurines = on. The next step is to insure that your stylesheet contains a pf class that uses at least one of the Alpine Figurine fonts. Here is an example of just such a class:

.pf {font-family:LinaresFigurine,ZurichFigurine,HastingsFigurine,Verdana;
     font-style:normal;}

While the use of the Alpine family of Figurine fonts is quite easy, there are a few technical points that need to be understood by webmasters who wish to use them in conjunction with Palview. We have written a separate section to deal specifically with the Alpine Figurine fonts called: Palview and Figurines. Please see that section for a more detailed discussion of this topic.

Most webmasters will want to use a pf class that does not contain any reference to a Figurine font. In that case, you would certainly want to set the figurines = off. Then the pf class itself can be removed from the CSS file since it will never be used.

The next CSS class that we want to discuss is called panno for Palview Annotator. If an annotator's name is provided in the PGN Annotator Tag, his name will be formatted and displayed within square brackets at the end of the game. This can be seen below:

The panno CSS class will be used by Palview for the annotator's name. Here is an example of the Html and the CSS class itself:

<SPAN class='panno'>[Reinfeld]</SPAN>
.panno {font-family:Verdana,Arial,sans-serif; font-size:12pt; font-style:italic;
        font-weight:bold; color:black;}

If you take another look at the above diagram, you will notice a pair of clock times: (1:25:32 / 1:12:46). These refer to the clock times for White and Black during a Live game broadcast. Sometimes this time is an Estimated Game Time, i.e. the amount of time taken by each player for all their moves, or it may refer to the Digital Clock Time, i.e. the actual times on the digital clock. This clock time is given the CSS class pclock. Here is an example of the Html and the CSS class itself:

<SPAN class='pclock' TITLE='Digital Clock Time'>(1:25:32 / 1:12:46) </SPAN>
.pclock {font-family:Verdana,Arial,sans-serif; font-size:10pt; color:black;}

Naturally, the pclock class will only be used for Live broadcast games, so you can safely delete the class from your stylesheet if you are not going to be using Palview for Live games. For more information on this topic, please see the section Palview and Live Game Broadcasts.

The most challenging aspect of Palview's CSS support deals with the actual linked moves of the game itself. In order to replay the moves, Palview places them inside a special hypertext link that contains a JavaScript function call. Here is an example of the Html of the first few moves in a typical game:

<P class='pm'>
1. <A HREF='javascript:Mv(0,1)'>d4</A> <A HREF='javascript:Mv(0,2)'>d5</A> 
2. <A HREF='javascript:Mv(0,3)'>Nf3</A> <A HREF='javascript:Mv(0,4)'>Nf6</A> 

Now, because these are links, your browser would try to display them just like any other link, usually using either blue or purple and underlining. Clearly this is undesirable. But we can control the way the browser displays these special move links using a CSS class or two. We could write specific class names directly into each move's link to control them, but this would ultimately make for a larger Html file. So what we do is take advantage of the fact that all our moves appear only in the pgm division. This means that we can prefix our CSS class to specify that only links within the pgm DIV are to be affected by the class. We can also take advantage of the fact that all our moves appear in one of the classes pm, pc, or pc2. The moves that appear in the pm class are always our actual game moves - not variations. So we use the following classes to control the game moves themselves:

DIV.pgm A {color:black; text-decoration:none;}
DIV.pgm A:hover {color:red;}

In both classes the prefix DIV.pgm is used to isolate the scope to the pgm division only. The A that follows is used in CSS to indicate an anchor or link. Essentially, the first class says, "All the anchors (moves) in the pgm division should be displayed in black with no underline". The second class says, "Whenever the mouse hovers over an anchor (move) in the pgm division, make it red".

Note that only the color and text-decoration needs to be supplied for the normal game moves. All the other properties will be inherited from the pm class, since this is where the moves appear. So the type of font, the font-size, text-align, indent, etc. are all taken from that class.

Now we have to deal with linked variation moves. These too appear only in the pgm division and only in the comment classes pc or pc2. But sometimes these two classes can be written to the Html as P paragraphs, or as SPANs. This depends upon the setting of the linebreaks INI option. If we choose linebreaks = on, then Separate P paragraphs are written for the pc class. In this case we need the following CSS classes to control the variation move links:

DIV.pgm .pc A {color:green;}
DIV.pgm .pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}

Notice that we don't need to specify text-decoration:none; in any of the above classes since they will all inherit that property from the above DIV.pgm A class. Also note that we have placed a SPAN in front of the pc2 class. The pc2 class is always SPANed in the Html file and represents variation moves at a depth of two which we are using italic for in our example.

If you are going to use linebreaks = off, then all the pc classes (comments) will be SPANed in the Html file, so you will need to use the following classes instead:

DIV.pgm SPAN.pc A {color:green;}
DIV.pgm SPAN.pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}

Rather than have to deal with this decision, you could decide to use the following classes that will combine both eventualities together so that it won't matter whether you choose to use linebreaks on or off:

DIV.pgm .pc A, DIV.pgm SPAN.pc A {color:green;}
DIV.pgm .pc A:hover, DIV.pgm SPAN.pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}

Using the above three lines you can avoid any worries about the linebreaks setting.

The only other housekeeping that remains to be taken care of deals with the display of variation moves when using the htmltype = static page type. Here Palview uses the following two classes:

DIV.pgm .pc EM {color:green; font-style:normal;}
DIV.pgm .pc2 EM {font-style:italic;}

Palview's CSS and Netscape 4

Because Netscape 4 cannot understand CSS border declarations, we created the ns4comp INI option to allow you to create pages that will have a basic border inserted directly into the Html. But this has consequences in regard to the game Html and CSS. When ns4comp is set, Palview will insert Html BORDER attributes directly into the outer Html TABLE and the Html TABLE that surrounds the board itself. These TABLEs have the CSS class names pgob and pgbb. What you will see is something like this:

<TABLE class='pgob' CELLSPACING='0' BORDER BORDERCOLOR='green'>
<TR><TD>
... 
</TD></TR></TABLE>

We insert the BORDER attributes directly into the TABLEs themselves. You can see that we have set the BORDERCOLOR to 'green'. You can set this color yourself using the bordercolor INI option. The single BORDER attribute simply directs the browser to create a single border.

What you must keep in mind if you use the ns4comp = on setting, is that all the border declarations must be removed from the CSS file you use with your page. Because Netscape 4 does not understand these border declarations it will ignore them, but other browsers, such as Internet Explorer and Netscape 6, do understand them so those browsers will actually draw two borders -- the border defined by the CSS and the border that is written directly into the TABLEs above.

For the game CSS, these border declarations will be located in the pgob and pgbb classes:

.pgob {border-style:solid; border-color:green; border-width:2px;
background-color:white;}
.pgbb {border-style:double; border-color:darkgreen; border-width:3px;}

You must remove all the border-xxx declarations, border-style:solid; border-color:green; border-width:2px;, from the above classes when using ns4comp = on.



CSS for the Crosstable

The crosstable's CSS is considerably less complex than that of the game. The Html of the crosstable file begins with:

<HTML>
<HEAD>
<TITLE>Dortmund</TITLE>
<LINK REL='stylesheet' HREF='../p3cross.css'>
</HEAD>
<BODY>
<A NAME='pcross_Dortmund'></A>
<DIV class='pgc'>
<TABLE class='pgcb' CELLSPACING='0'>

In the above example, from Dortmund 99, we can see that the Html page TITLE tag value is taken from the Event Tag of the PGN file. Here, the value is Dortmund. The LINK underneath the TITLE tag links to the stylesheet used for the crosstable that is provided using the crosstablecss INI option. In this instance, we have used a relative url for the stylesheet so that we can keep all the Dortmund files in their own unique folder while still accessing the site-wide p3cross.css file which will be kept one folder above the Dortmund folder. (For more information on setting up the server space, see the section Setting Up the Webspace). In our above example, we would have used the command:

crosstablecss = "../p3cross.css"

After the BODY tag, you will see a named anchor, pcross_Dortmund. This may be used to locate a particular event's crosstable using a hypertext link.

Following the named anchor we have an Html DIV, or division, that has the class name pgc. All the crosstables are written inside a pgc DIV. This allows us to set CSS properties and values to the Division. Immediately after the pgc DIV we have the start of the crosstable TABLE itself. This is always given the class name pgcb. These two classes will allow us to alter the appearance of the entire crosstable, but we will examine these global CSS effects after examining the rows of the crosstable itself. At this point we have arrived at the top of the crosstable.

Every crosstable has the same three characteristics: a Title row, a Round row, and one or more Player rows. Consider the following crosstable from Dortmund 99:

The Title row shows the name of the event, in this case Dortmund, Germany 1999 and sometimes the Category of the event shown here as XIX. The name of the event is formed from the three PGN tags Event, Site, and Date, in that order. The Category is calculated by the program, if possible, or the field is left empty. The Html for our Title row is:

<TR><TD COLSPAN='15' class='pevent' ALIGN='left'>Dortmund, Germany 1999</TD>
<TD COLSPAN='2' ALIGN='right'>XIX</TD></TR>

Our CSS class pevent is as follows:

.pevent {font-family:"Georgia",serif; font-size:12pt;}

You can use the above pevent class to manipulate the appearance of the Event name in the Title row of the crosstable. You could choose to make the Event darkgreen and bold by adding the declarations:

font-weight:bold; color:darkgreen;

The next row in our crosstable is the Round row. This special row is used primarily to provide the numbers for the rounds in the event and the total column's = sign, but it also acts as a nice break between the Title row and the rest of the crosstable. The Html for our Round row is:

<TR class='crow'>
<TD>&nbsp;</TD><TD>&nbsp;</TD>
<TD>&nbsp;</TD><TD>&nbsp;</TD>

<TD>&nbsp;</TD>
<TD>1<TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
<TD>&nbsp;</TD><TD>=</TD>

<TD>&nbsp;</TD><TD>&nbsp;</TD>
</TR>

The code has been split up here just for the sake of clarity. Notice that the actual table row itself, TR, has its own CSS class, namely crow. This allows us to alter the appearance of the entire Round row itself. For example, we have given the row a green background color to act as a divider between the Title row and the Player rows.

Our CSS class crow is as follows:

.crow {font-size:8pt; background-color:palegreen;}

You can alter the crow class to make all the text in the row bold, or you can select a particular font that is different from the rest of the crosstable. Whatever looks good to you.

After the <TR class='crow'>, you will notice four empty columns. These correspond to the columns for the player, title, country, and elo. While the Html could have been written as a single:

<TD COLSPAN='4'>&nbsp;</TD>

We chose to write it with individual empty columns so that anyone who wished to could edit the crosstable Html file to include headings, such as in the following example:

The second section of Html code in our Round row example above, gives us an empty column, for spacing, followed by the numbered columns for each round, another empty column, and ending with the total's column, indicated by the = sign.

The last section of Html from our Round row example, consists of another empty column for spacing and a final column for the performance elo score. These two columns will only be written if a performance elo value is actually supplied to the program using the player INI option. (For more details on this, see the topic Using Palview for Tournament Coverage.)

All the subsequent rows in our crosstable are Player rows. Here is the Html of the top Player row, Leko, from our Dortmund example:

<TR>
<TD class='pplay'>Leko</TD>
<TD class='ptitle'>GM</TD>
<TD><IMG SRC='../flag/hun.gif' Border='1' TITLE='Hungary'></TD>
<TD class='pelo'>2701</TD>

<TD>&nbsp;</TD>
<TD>x</TD>
<TD><A HREF='g3.htm' TITLE="Leko - Kramnik r1 (26) C42"></A></TD>
...
<TD><A HREF='g18.htm' TITLE="Leko - Timman r5 (27) C42">1</A></TD>

<TD>&nbsp;</TD>
<TD>5</TD>
<TD>&nbsp;</TD>
<TD class='pelo'>2863</TD>
</TR>

This is sufficiently complex enough for us to deal with the Player row in basically three parts. The first part is the player information section of the row which starts the row. The first column in the row is the player's name.

<TD class='pplay'>Leko</TD>

The actual text of the name is controlled by the INI option crossnamepattern, but we are interested in the formatting of the name here. This formatting is determined by the pplay class:

.pplay {font-family:"Century Schoolbook",serif; font-size:12pt;
font-weight:bold; color:black; text-align:left;}

The next three columns in our example are optional and their inclusion is determined by the INI option crosstags. But we have included them here in our manual example. The first of these three columns is the player title.

<TD class='ptitle'>GM</TD>

The formatting here is provided by our ptitle class:

.ptitle {font-family:"Century Schoolbook",serif; font-size:12pt;
font-style:italic; font-weight:normal; color:black;}

The next column is the player country.

<TD><IMG SRC='../flag/hun.gif' Border='1' TITLE='Hungary'></TD>

In our example we have chosen to use flags = on to illustrate the Html code you can expect to see when using the flag images in the crosstable. But if you choose not to use the flags, then Palview will write the country's FIDE code as follows:

<TD>HUN</TD>

The last of the optional columns is the player elo.

<TD class='pelo'>2701</TD>

The formatting here is provided by our pelo class:

.pelo {font-family:"Georgia",serif; font-size:10pt; color:black;}

After the optional player elo column we have a single empty column, for spacing, and then follows the next part of the Player row, the actual round by round game results.

<TD>x</TD>
<TD><A HREF='g3.htm' TITLE="Leko - Kramnik r1 (26) C42"></A></TD>
...
<TD><A HREF='g18.htm' TITLE="Leko - Timman r5 (27) C42">1</A></TD>

Since this is the very first row of a Round Robin crosstable, the very first column contains the 'x'. You can also see above that we have used the tooltipcross INI option as well to get Palview to insert tooltips into the actual links to the games. You can see these tooltips above in the TITLE of each anchor.

The look of the round by round part of the Player row is controlled by a number of CSS classes together that have a more global scope, so discussion of this will be left for a short moment while we discuss the last part of the Player row, the total score and performance elo.

<TD>&nbsp;</TD>
<TD>5</TD>
<TD>&nbsp;</TD>
<TD class='pelo'>2863</TD>
</TR>

As you can see above, we have an empty column for spacing, followed by the player's total score. If we have included performance elo information to Plaview3, then we will get the two extra columns. The first of these is empty, and the second, the last in the row, contains the performance elo which is controlled by the pelo class, just like the player elo column.

This next section deals with those CSS classes that have a more global scope and how they influence the appearance of the crosstable. These two classes are the pgc and pgcb. Consider the following CSS declarations:

DIV.pgc A:link {color:black; text-decoration:none;}
DIV.pgc A:visited {color:gray; text-decoration:none;}
DIV.pgc A:hover {color:red; text-decoration:none;}

These first three declarations deal exclusively with the way that the links to the games will behave. These links are actually the individual game scores. Notice that all three use the property and value text-decoration:none to suppress any underlining by the browser. The first controls how an unvisited link will appear. We are using the color black for this. The second declaration, DIV.pgc A:visited, controls how a visited link will appear. Normally your browser will change the color of a clicked link to purple, but we want to use the color gray for our crosstable. The third declaration, DIV.pgc A:hover, allows us to change the color of the link whenever the mouse hovers over it. We are using the color red for this.

The next CSS declaration allows us to control the padding of all our columns in the crosstable.

DIV.pgc TD {padding-left:5; padding-right:5;}

In our example above, we have added a left and right padding of 5 pixels. If we had a very large crosstable with many columns, we might want to decrease the padding between the columns. For very small crosstables we might even want to increase the padding.

This last CSS declaration controls a great many aspects of the crosstable since it is applied to the Html TABLE itself:

.pgcb {border-style:solid; border-color:green; border-width:2px;
background-color:white; font-family:"Georgia",serif; font-size:12pt;
text-align:center; color: black;}

All the border properties, border-style, border-color, and border-width, are applied to the entire crosstable. The font-family is used to select a font for all the text in the crosstable that doesn't have its own CSS class applied to it. So, for instance, all our game scores use this font. The same goes for the font-size:12pt and the color:black. We also use the text-align:center to center all our game scores in their respective columns.

One note about using a background-image for the crosstable. This can be done by adding the following CSS declaration to the .pgcb class above where crossbkg.jpg is the name of the image to use for the background:

background-image:url(crossbkg.jpg);

If you decide to use a background image in your crosstable, you must add this next CSS declaration to your crosstable stylesheet:

DIV.pgc A {text-decoration:none;}

If you don't include the above declaration, your browser will likely reinstate the use of underlines for the game links.

Crosstables and ns4comp

Because Netscape 4 cannot understand CSS border declarations, we created the ns4comp INI option to allow you to create pages that will have a basic border inserted directly into the Html. But this has consequences in regard to the crosstable Html and CSS. When ns4comp is set, Palview will wrap the the above crosstable Html code inside another Html TABLE so that it can insert Html BORDER attributes directly into this TABLE. What you will see is something like this:

<DIV class='pgc'>
<TABLE CELLSPACING='0' BORDER BORDERCOLOR='green'>
<TR><TD>

<TABLE class='pgcb' CELLSPACING='0'>
...
</TABLE>

</TD></TR></TABLE>
</DIV>

The outer TABLE wraps the inner TABLE and allows us to insert the BORDER attributes directly into the TABLE itself. You can see that we have set the BORDERCOLOR to 'green'. You can set this color yourself using the bordercolor INI option. The single BORDER attribute simply directs the browser to create a single border.

What you must keep in mind if you use the ns4comp = on setting, is that all the border declarations must be removed from the CSS file you use with your page. Because Netscape 4 does not understand these border declarations it will ignore them, but other browsers, such as Internet Explorer and Netscape 6, do understand them so those browsers will actually draw two borders -- the border defined by the CSS and the border that is written directly into the TABLE above.

For the crosstable, these border declarations will be located in the pgcb class:

.pgcb {border-style:solid; border-color:green; border-width:2px;
background-color:white; font-family:"Georgia",serif; font-size:12pt;
text-align:center; color:black;}

You must remove all the border-xxx declarations, border-style:solid; border-color:green; border-width:2px;, from the pgcb class when using ns4comp = on.



CSS for the Magazine


If you are actually generating a magazine page, the very first thing that must be done is to link a cascading stylesheet to the page itself. To do this we use the new magazinecss INI option:

magazinecss = "p4magazine.css"

But before we go on to study the magazine's CSS in detail, we should briefly discuss how a magazine page is created by the program as this has some very important implications in regard to our use of CSS. To create a magazine page, you first create an Html file of your desired page without the material that you want Palview to insert. This Html file is called a template. Within this template, you insert Html comments that instruct Palview to insert the material that you want. The placement of these insertion commands within the template determines where the material will be inserted. Usually this material would be a game or a diagram. Here is an example of a game insertion command:

<!-- palview game 1 -->

The template file will be passed to the program along with a PGN file, and usually an INI file specifically created for the magazine page. Palview first reads the INI file, then the games in the PGN file, and finally reads the Html template file twice. The first reading allows Palview to gather information about the material that you want it to insert. (It also uses pass 1 to build up a game and opening index.) In pass 2 the program writes a new Html file — named after the PGN — that contains the original content from your template file, plus the inserted content that the program generated to satisfy your insertion requests. The template file is never overwritten so your insertion requests are always preserved. This way the template can be continuously edited or updated, as you might do for a chess news site, and then passed to Palview again to recreate your magazine page.

Since this template Html file is the one you actually write and edit in order to create your magazine page, you will want to have access to your own CSS classes — the ones you create for material unknown to Palview — while you are editing the template. One example of such might be the use of the BODY {background-color: floralwhite;} to set a background color for your magazine page. Another example might be the use of a special class of your own, called .topban, to set properties for a top banner. If you were using FrontPage 2000 to edit your template for example, you would want to access you own CSS classes in the Style Menu as shown in the diagram below.

In order to be able to do this, you need to link your template file to a CSS file that contains your own CSS classes. This brings us to an important point: You should keep your own CSS classes separate from those that the program uses. One CSS file will be used to control only the Html material you create yourself — the other is for the Html inserted by Palview, such as diagrams, crosstables, etc. This allows you to link your template to your own CSS file for editing purposes.

While you could edit the magazinecss to include the CSS for your own things, it is best to keep it separate in your own CSS file, like 'myown.css'. Then you can add the LINK to your own CSS file into the template with:

<HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL='stylesheet' HREF='myown.css'>
</HEAD>
<BODY>

Please note that you do not need to add a LINK to the CSS file declared in your magazinecss INI option: the program will insert it into your final Html file if it does not find it in the template file. The program will also write the special JavaScript function that is needed to communicate to the new game viewer. Anything else that the program finds in the HEAD section of your template file will be copied as is into your final Html file, including META tags, etc.

Now that we have thoroughly discussed the need to separate your own CSS from Palview's, we can move on to discuss the specific CSS for the magazine.

The CSS for the magazine is not very complex at all, in fact you may already be aware of much of it if you are a former user of Palview. Since the new magazine gives you the ability to insert just about all of the different chess page data that Palview can generate, such as a game, crosstable, diagram, overview, and index, it will also require the CSS classes specific for each type of data you choose to insert. In effect, the CSS file used by your magazine is actually a superset of all the CSS classes that you need for whatever you decide to insert into your magazine.

What this means is that if you are going to insert an index into your magazine page, then you will need to insure that all the CSS classes used by the index are included in your magazinecss file. This is also true if you are going to insert a crosstable, in which case you need to insure that all the classes used by crosstables are included in your magazine's CSS file. The same applies if you insert static games. (See Static Game Insertion.) Finally, you must include any CSS classes that are used by inserted diagrams if you choose to insert them. (See Diagram Insertion.) There really is only one set of new classes specific to the magazine page and these are used for the game links that are used for inserted replayable games that use the new game viewer.

Mind you, the easiest thing to do — and what we strongly recommend — is simply to include all the CSS classes for all the various chess page data that Palview can insert, even if you are not using them in your current magazine page. Having the extra classes in your magazinecss file will do no harm, and you will never have to worry about whether or not you are missing any of the classes later on. In fact, the example magazinecss file that comes with Palview4, namely the p4magazine.css file, does include all the CSS classes that you would need to be able to insert anything that is possible using new magazine page.

If you look inside the p4magazine.css file, you will see that it uses CSS comments to divide the CSS classes themselves into sections. These sections include the classes that are specific to the type of inserted page data, crosstables, static games, diagrams, etc. as you can see below.

/* This section is for the game links ------------------------------------ */

/* This section is for the indices --------------------------------------- */

/* This section is for the crosstables ----------------------------------- */

/* This section is for diagrams (including those in static games) -------- */

/* This section is for static games -------------------------------------- */

The CSS for the index is covered in its own section, CSS for the Index. Crosstable CSS is covered in the section CSS for the Crosstable. Inserted static games use the same CSS as described in the section CSS for the Game.

This leaves us with only two sections that need to be described in detail here, namely inserted game links and diagrams. We will start with inserted game links.

CSS for Inserted Game Links


Game links are written to the magazine file as an Html Unordered List with a CSS class called gm. Note that multiple inserted games can appear in the same list, each with its own <LI> entry.

<UL class='gm'>
<LI> game link
<LI>  ... 
</UL>

A theoretical game link, say for game 1, is written as:

<A HREF='javascript:Gm(0)' TITLE="openingtooltip">player info game info</A>

The actual use of, or values for, the openingtooltip and player info game info fields is determined by the settings of a number of various INI options that are explained in detail in the magazine section Game Insertion. Please see that section for such details. We are only interested here in the CSS for the game links.

A true game link might look like this:

<UL class='gm'>
<LI><A HREF='javascript:Gm(1)' TITLE="QGD : Anglo-Tarrasch : Bogolyubov Variation">
Korchnoi V. GM - Kasparov G. GM 0-1 (77) [D34] r6 Candidates Match2</A>
</UL>

The CSS for the game link list is shown below.

UL.gm {list-style:url(images/parrow.gif) outside disc;}
.gm LI {padding:2;}
.gm A {color:black; background-color:#E9D9C6; text-decoration:none;
       font-weight:bold; font-size:10pt; font-family:Verdana, sans-serif;}
.gm A:hover {color:red; text-decoration:none;}

Here is how the game links appear using the above CSS:

Notice in the above UL.gm class, that a url() image is provided. This image is seen in the example above as a small black arrow. You can use any image that you want in place of the black arrow. If you decide not to use any image at all, then you might want to use a simple circle provided by the browser itself. This is the disc option as you can see in the above CSS class. Other options include: circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none. Notice that the .gm LI CSS provides a bit of breathing space between multiple game links in the same list.

The .gm A and .gm A:hover classes determine the appearance of the actual text of the game links. It allows us to set a background color, if this is desirable, along with many other properties for the text.

CSS for Inserted Diagrams


The only remaining CSS section to be described for the magazine is for inserted diagrams. Here we are simply reusing two CSS classes that were already described in the section The Board and CSS. The first class, pgbb, determines the border surrounding the diagram. The other class, pt, is used to control the optional caption text under the board. The only thing that is new to the magazine's inserted diagram is the ability to have the program automatically number the diagrams. In this case, the number of the diagram is written above the board using the same pt class. You can see an example of this below.

Note that the CSS for inserted diagrams also applies to diagrams that appear in inserted static games or for diagrams of inserted overviews. For more details about the pgbb and pt classes, please see the section The Board and CSS.



CSS for the Index


The CSS for the index inserted into a magazine is not very complex at all. All the following index CSS classes must exist in the magazine's own CSS file. This file is set with the new magazinecss INI option:

magazinecss = "p4magazine.css"

Each of the indices are placed in an Html TABLE as follows:

<TABLE  class='pgxb' CELLPADDING='10' CELLSPACING='0' ALIGN='CENTER'>
<TR><TD VALIGN='top'>

The pgxb class can be used to alter the appearance of the index TABLE itself. Here is an example of the pgxb class from the index.css file:

.pgxb {border-style:solid; border-color:black; border-width:1px; 
       padding:0; background-color:#FFFFF9; width:95%;}

After the initial TABLE declaration, the program writes the index anchor. For example, in the game index we would get:

<A NAME='pgameindex'></A>

Next, the program writes an Html division DIV declaration that is used to separate the index contents from the rest of the page (or magazine.) This DIV is applied to both the game index TABLE and the opening index TABLE.

<DIV class='pgx'>
... the index contents
</DIV>

This pgx division allows us to set CSS properties specific to the indices themselves. For example, the appearance of all the game number links within the indices are controlled by the following CSS classes:

DIV.pgx A:visited {color:blue; text-decoration:none;}
DIV.pgx A:link {color:blue; text-decoration:none;}
DIV.pgx A:hover {color:red; text-decoration:none;}

After the <DIV class='pgx'>, the program writes the index heading:

<H1>Game Index</H1>

For the opening index we write Opening Index. We control how the heading appears using this CSS class:

DIV.pgx H1 {margin: 0px; padding:0.10em; text-indent:1em;
            text-align: justify; font-size: 16pt; font-style: italic;}

The game index also writes a heading for each letter, A to Z, if any player's name begins with such a letter. We write this into the Html as:

<H2>A</H2>

This letter heading is controlled by the CSS:

DIV.pgx H2 {margin: 0px; padding:0.10em; font-size: 12pt;
            font-weight: bold;}

The actual entries into the two indices use the following Html:

<P>ALLAN - Hergott <A HREF='javascript:Gm(17)' 
TITLE="E94 1-0 (44) K.W. Oktoberfest Open">18</A></P>

... or from the opening index

<P>A10: Robatsch Defense - <A HREF='javascript:Gm(15)' 
TITLE="Hartman - Hergott 0-1 (43) Toronto Remembrance Open">16</A></P>

Finally, for the actual entries into the Game index and the opening index we use the CSS:

DIV.pgx P {margin: 0px; padding:0.10em;
           font-family: Verdana, Arial, sans-serif;
           font-size: 10pt; font-weight: normal; color: black;}