Tips and Tricks for Help Editors

Table of Contents

Editing

Firefox tabs can help copy code from one help file to another. Open the two files in two separate tabs.
Bookmarking KGS help pages eases the editing process.
For major editing use a sandbox.
Use the Templates to give the help pages a uniform look and feel.
Every time you save edits (by pushing the Update Help Page button) give the edit a meaningful name (in the Description of this Edit dialog box). If it is a minor edit, the name "minor" will do. "Minor edits" are those edits that are not important enough to waste the time of other help editors reading about them in Recent Changes. For saves that are continuations of, or corrections to, a single edit, cycle through a sequence of single-character save-names. For example: . - ' . - ' . - ' . - ' . - ' . - ' . For a series of minor edits done within a few days of each other, it is not necessary to repeat the name "minor". Just cycle through the single character save-names.
Looking in the change log for the name of the last save can help you avoid losing edits.

Coding

To view the source code behind an area of a help page, select the area with the cursor, right click on it, click on "View Source".
More tips and tricks can be found in Code Examples.

HTML Cheat Sheet

Some useful HTML Entities

< < --------------- less than (left angle-bracket)
> > -------------- greater than (right angle-bracket)¹
& & ------------ ampersand
× × ----------- times sign
• • ------------- bullet (as in • • • • • • • • • )^•
– – ----------- en dash (as in "–>")²
— — ---------- em dash (as in "—>")
| | ------ a normal space
| |   ------------ non-breaking space
| |   ----------- thin space. Thin spaces are dangerous.³
| |    ---- two non-breaking spaces
| |    -- two thin spaces

All HTML Entities

Some useful HTML tags

line breaks -------- <br/>
horizontal rule ---- <hr/>
big text ----------- <big>, </big>
small text --------- <small>, </small>

All HTML tags

HTML Tutorial Home Page

CSS Cheat Sheet

The KGS help pages use inline styles. This means that they use a style attribute followed by a CSS property after a relevant tag. For example, relative positioning,
<p style="position:relative; left:25px; line-height:175%;"> The KGS help pages use ... </p>,
was used to indent this paragraph. The "line-height" property increased the space between the lines. The "text-indent" property indented the first line.

Relative positioning is used in the Coban Main Window to help set off the subsections from the sections.

Some Useful CSS Properties

list-style-type
- Changes the symbol used for the bullet in an unordered list.
  - This sub-list uses solid circles for bullets.
    - This one uses open circles.
  - Template for solid circles: <ul style="list-style-type:disc;"> </ul>
- The Site Map shows how to use solid and open circles in deeply nested lists.
- Possible values for the list-style-type property in unordered lists are: disc, circle, square, none, and inherit.
  - Squares are the default value for third and higher level lists.
  - Squares create a clumsy appearance.
  - You can remove the bullet with "none" or continue using the same bullet in a sublist with "inherit".
  - You can create a custom bullets; this is done using images.
- Changes the number style in an ordered list.
  1. This sub-list uses letters instead of numbers.
  2. Template: <ol style="list-style-type:lower-alpha;"> </ol>
line-height changes the line spacing in a paragraph.
- The first paragraph of this cheat sheet uses the line-height property to increase the space between lines.
- Template for a blank half-line: <p style="margin-top:0; margin-bottom:0; line-height:.5"><br></p>
- A commented blank half-line template
positioning
- The first paragraph of this cheat sheet uses relative positioning to set off the phrase "The KGS help pages use ...".
- Template: <p style="position:relative; left:25px;"> indented text </p>
text-indent indents the first line in a paragraph.
- The first paragraph also uses the text-indent property. Resize your browser window to get the full effect.
- Template: <p style="text-indent:25px;"> paragraph with indented first line </p>
text-align
- The text-align property can be used to center a paragraph, a subtitle, and other "text" tags.
- Template: <h4 style="text-align:center"> centered section title </h4>
Color: <span style="color:Red;"> </span>
- background-color: <span style="background-color:yellow;"> </span>
- highlight blue text: <span style="color:blue; background-color:PaleGoldenRod;"> </span>
- dark olive green: <span style="color:DarkOliveGreen;"> </span>
- all color names
  - highlighting a link: <span style="text-decoration:underline; background-color:PaleGoldenRod;"> </span>
  - Use hex values for a broader spectrum of colors.
float: <div style="float:left; margin-right:25px;"> </div>
clear: <div style="clear:both;"> </div>

CSS Tutorial Home Page

All CSS properties

KGS Classes

The KGS classes provide a convenient shorthand for some of the CSS properties.
The KGS class definitions are found in the KGS style sheet.
The next section shows how the KGS "grid" class can be used.

Tables

The four tables displayed below are intended to be used as templates. Each table is a simple representative of a family of tables that are obtained from the basic type by adding various style attributes. The simplest kind of table is an HTML table. The HTML family includes the other three families since all tables are obtained by adding CSS styles to an HTML table.

The tables in this section are all followed by a blank half-line.

This section is divided into five subsections, not including this introductory section. Each subsection contains one table. The first four subsections are enclosed with only one pairs of div tabs ( <div>, </div>). Only one "style='position:relative; left:25px;'" statement is then needed to indent the first four subsedtions.

HTML Tables

Tables can be built with HTML using HTML "table" tags and attributes. HTML tables are left adjusted and use double-line borders by default. The following table uses the "border" attribute in its "table" tag: <table border="1">.

**Twenty One Questions**
Animal	Vegetable	Mineral
monkey	peas	diamonds
baby hippopotamus	spinach	ruby

The Grid Class

Using the KGS "grid" class is the easiest way to get a table that looks better than a simple HTML table. The drawback of the "grid" class is that its attributes can not be over-ridden (as far as I know. dj, 1020). For example, it must be centered in the page. The following table uses the "grid" class. The table tags looks like this: <table class="grid">, </table>. In addition to the use of the "grid" class, the text in the cells is padded and centered. The tags for the data in a cell look like this <th style="padding:5px; text-align:center;">, </td>

**Twenty One Questions**
Animal	Vegetable	Mineral
monkey	peas	diamonds
baby hippopotamus	spinach	sandstone

Beyond The Grid Class

Instead of using the KGS "grid" class, the CSS table properties. The "border-collapse:collapse" attribute specifies the use of single line borders instead of double line borders. The border attribute defines the width of the borders independently for each cell. This method allows left aligned tables and tables with thicker borders for the table headers. In addition, this table is floated with a (<div style="float:left; margin-right:25px;">, </div>) block delimiter. The code for this table was used as a template for the tables in the Abbreviations and Acronyms section of the Newbie FAQ.

**Twenty One Questions**
Animal	Vegetable	Mineral
monkey	peas	diamonds
baby hippopotamus	spinach	ruby

Fixed Table Layout

The following table uses the "table-layout:fixed" attribute. When "fixed" is specified for the "table-layout", the width of each column is specified with a "width" attribute in the table header (th) tags. The following table uses "width:200px". Long tables display noticeably faster on the user's screen with the the "fixed" property than they do with the "auto" property. The column widths are computed from the width of the largest entry in the column when the "auto" is specified. "Auto" is the default value if the "table-layout" is omitted.

The "padding" attribute is not used. If it were, only the height of the cells would be affected. The width is already determined by the "width" attribute. The height of the cells may also be set via the "height" attribute. The columns do not all have to have the same width. In the example below, the do.

**Twenty One Questions**
Animal	Vegetable	Mineral
monkey	peas	diamonds
baby hippopotamus	spinach	ruby

Tabs

Borderless tables with a fixed table layout are a convenient method for simulating tabs. This syntax of this type of table is almost as simple as a Grid Class table. A line height of 115% is used in the div tabs surrounding this table to get a little space between the table rows. There is no padding in the cells. The table data uses a font size of 14 pixels.

Twenty One Questions

Animal	monkey, baby hippopotamus
Vegetable	peas, spinach
Mineral	diamonds, ruby

Guidelines for Splitting Help Pages into Multiple Pages

If a page gets too long, it may be useful to break it up into a collection of pages.
Instead of deleting the old page, put links to the new pages in the old page.
1. This will avoid breaking links to the old page.
2. There may be links to the old page that are not listed in the "List all Pages" table.
Tips for replacing the old links with new links.
1. Use "List all Pages" to find all pages that link to the old page. Replace these links with links to the new pages.
2. Link to the old page from the Archive Index. This allows it to be easily accessed for maintenance purposes.
The old Netiquette page is an example of a split page. See the link to it the in the Archive Index.

Footnotes

¹ A simple ">" (instead of ">") works too, and it makes the code easier to read!

² The en dash makes a better arrow (–>) than does the hyphen (->) at least in the Firefox browser display. The mdash can also make an arrow: —>.

³ The "thin space" is slightly smaller than the "non-breaking space". Thin spaces can mess up how browsers handle line spacing. For example, they can cause Firefox to randomly insert extra blank lines between elements. These lines can come and go when the user adjusts the width of their browser window. (as of March 1, 2011. dj)

Glossary

W3S
- W3 Schools