GedSite: - User Style

Overview

You may add User Styles to add CSS styles to your site. CSS styles control the appearance of the content, i.e., the colors, spacing, background images, etc.

In each User Style item, you may enter up to five rules. For each rule, you enter a CSS selector to determine which HTML elements to modify and a set of CSS parameters to specify the actual modifications.

The Edit Menu in the User Style window includes the Copy User Style and Paste User Style commands. See Copy / Paste User Style on the Edit Menu help page for usage instructions.

Properties

Title

All User Style items have a Title property. Enter a title that will remind you of the purpose or use of the User Style.

Enabled

Enabled. The default value is "0".

The Enabled checkbox controls whether or not the CSS rules in the item are processed when GedSite is making the site. If Enabled is unchecked, all the rules in the section are ignored.

Property Pairs

Each User Style includes five pairs of properties. selector-1 and parameters-1 are a pair, selector-2 and parameters-2 are a pair, etc.

The selector-N properties are for CSS selectors. Selectors are patterns used to select the elements you want to style. When an HTML element matches the selector pattern, the parameters paired with that selector are applied to the element.

It is beyond the scope of this help system to describe CSS selectors and parameters, but you can learn about them on the web. You can also ask for help on the GedSite mailing list where users with CSS expertise can help you achieve your goal.

Step by Step

Example 1: To add a User Style by manually entering the selector and parameters, follow these steps:

With your GedSite file open, go to the User Styles section. Sections are listed in a list on the left-hand side of the main window. If you do not see the User Styles section, click the small [+] next to the Styles item to open its subsections.
Click the [+] button under the list of User Styles on the right hand side of the main window. Select the only item in the sublist, which is "User Style". That will open the Add User Style window.
Enter a title that will remind you of the purpose or use of the User Style.
In the selector-1 textbox, enter the CSS "selector". A selector is a pattern that matches one or more HTML elements; for example, the selector "td" matches all TD (table data cell) elements, and the selector ".myclass" matches any element that has class="myclass".
In the parameters-1 textbox, enter the CSS parameters. For example, to assign the font-weight, enter "font-weight: bold". You may specify multiple parameters by separating them with the ";" character: "font-weight: bold; color: #ff0000"
Click [OK] to save the User Style and close the Add User Style window.
To see the effect of adding the User Style, use the Make CSS or Make Site commands in the File menu.

Example 2: To add a User Style from text sent to you in an email message:

With the email message open in your email client, select the text and copy it. The text will have this general format:
```
selector-1:
.myclass
 
parameters-1:
font-weight: bold;
```
The actual selector and parameter values will be different, and there may be multiple of them, including selector-2, etc.
With your GedSite file open, go to the User Styles section. Sections are listed in a list on the left-hand side of the main window. If you do not see the User Styles section, click the small [+] next to the Styles item to open its subsections.
Click the [+] button under the list of User Styles on the right hand side of the main window. Select the only item in the sublist, which is "User Style". That will open the Add User Style window.
Enter a title that will remind you of the purpose or use of the User Style.
Select the Paste User Style command from the Edit menu.
GedSite will paste the text into the appropriate textboxes.
Click [OK] to save the User Style and close the Add User Style window.
To see the effect of adding the User Style, use the Make CSS or Make Site commands in the File menu.