Theme Section

Overview

In GedSite, a Theme determines the look of the site. GedSite includes several Themes from which to choose (see the Theme Gallery), and you can modify Theme properties to make changes to those Themes.

Theme properties are visible in the Theme subsections. When you choose a Theme from the Theme pull-down menu, GedSite updates the properties in those subsections. The default values for the Theme properties are determined by the Theme Designer, but you can alter them if you wish.

Theme properties are saved on a per-Theme basis. If you modify a Theme property, the modification will only apply to the current Theme. If you change to a new Theme, GedSite will use the default value for that Theme unless you change it in the new Theme, too.

Most users will choose a Theme from the selection included with GedSite. Some users may choose to modify the Theme by adjusting properties in the Theme Section. In addition, specific Theme settings that are not visible in the Theme Section can be altered via the User Styles Section.

Theme Credit

Many of the Themes supplied with GedSite are based on web site designs made available via open source licensing agreements or other agreements I made with the designers. In all cases, credit must be given to the original designer or design firm on every page that uses the design, is based on the design, or uses graphics from the design.

GedSite provides a mechanism to display the proper attribution via the Theme.Credit section. When you choose a Theme, that property is automatically set to the correct text.

Do not change the Theme Credit unless you:

• (A) completely remove or replace all the graphic files supplied with the original Theme, and
• (B) change the look of the site via the stylesheet properties such that the original design is no longer present.

If there is any doubt, leave the credit in place. You may amend the Theme Credit text to say that your site design was "based on" a design by the original designer. In fact, many of the existing Theme Credit values use that language because I made changes to the design to make it work with the GedSite framework.

If you change the Theme Credit text and remove the attribution of the graphic designer, you may be in violation of the GedSite license agreement and your license may be revoked.

If the Theme Credit textbox is empty immediately after you have chosen the Theme, then there is no credit requirement. This is the case with the Plain Theme.

Adding and Replacing Theme Graphic Files

Some Themes include graphic files. You can accept those graphic files as is, or substitute your own. You can also add graphic files to augment the Theme.

To use your own graphics, put graphic files in the st subfolder of the Input (-i) folder for your site. If the replacement file has the same name as the Theme file, the file in the st folder will replace the version supplied with the Theme. If the file has a different name, you may have to adjust an image-related property to instruct GedSite to use the image.

Themes Supplied with GedSite

• The Simple Blue Theme is the default Theme for new sites. It uses a dark blue header and footer. The content areas are white.

  The Simple Blue Theme is based on an open source design by growldesign.

• The Plain Theme is deliberately uncluttered and is intended as a base from which you modify color properties and supply graphics to create a custom look.
• GedSite includes the following Themes that feature graphics supplied by Carla's Graphic Designs:
  • Carla's A New Adventure
  • Carla's Family History
  • Carla's Family Tree
  • Carla's Old Ships
  • Carla's Settlers

  Carla's Themes include images for menu buttons, but GedSite does not support graphic buttons automatically at this time.

  Unlike the other Themes supplied with GedSite, Carla's Themes are not open source. Her terms of use stipulate that you may not modify the graphics supplied with Carla's Themes, and you may not add your own graphic elements. Please see Carla's Graphic Designs page.

• The Contented1 Theme is based on a design from Contented Designs. They say, "Our goal was to keep the design clean and simple so website visitors could focus on the content."
• The Dark with Orange Theme features white text on a dark background, with orange borders and other orange highlights.
• The Gray Day Theme features dark accents on a gray background. It uses CSS3 features, including gradients, some of which are not supported in IE9 and previous. The basic design was inspired by an Open Source template by ARaynorDesign.
• The Mint Swirl Theme is a bold green Theme with swirl flourishes. Mint Swirl is based on an open source design by growldesign.
• The nonzero - brown Theme is based on an open source design by nodethirtythree design. The page header features dark brown stripes.
• The nonzero - red Theme is the same as nonzero - brown, described above, except with dark red stripes and other complementary accents.
• The Puzzle Piece Theme features a "missing piece" graphic image in the header and footer, based on an open source design by Jeremy D.
• The Ships Theme is similar to the Themes based on graphics from Carla's Graphic Designs.

Creating a Theme

Note This is an advanced topic. Most users will not create custom Themes.

You can add custom Themes to GedSite. The best way to start is to copy one of the Themes supplied with the program and modify it.

A Theme is a combination of a Theme property file (Theme.xml) and other optional files. Theme files are stored together in a single folder. The folder name is the Theme name. Custom Theme folders must be stored under the Themes subfolder of the GedSite folder under the "My Documents" folder.

For example, if you want to make a new Theme called "My Theme", the diagram below shows the folder names and the required theme.xml file:

• Documents\GedSite
  • Themes
    • My Theme
      • theme.xml

Theme Property File

The Theme folder must include a file named "theme.xml". That file defines the default values for all the Theme properties. So, for example, one of the Theme properties is the header-background-color property in the Theme.Colors, Backgrounds section. The theme.xml file defines the default value for that property when the user selects the Theme. The Simple Blue Theme's theme.xml file defines that property like this:

<p k="theme-backcolor.header-background-color" dv="#49515c" />

The p element above includes two attributes, k and dv.

The k attribute is for the key value. The key is a combination of a section code, such as "theme-backcolor", and a property ID, such as "header-background-color", separated by a period.

The dv attribute defines the default value for the property.

Custom Properties

The theme.xml file may also define custom properties. In addition to the k and dv attributes, a custom property must also include name and type attributes.

For custom Theme properties, the Theme designer chooses the key values, but the keys MUST begin with "theme-property." and must not contain any further periods.

The name attribute defines the name of the property that is visible in the GedSite program. Choose names that are the same as a CSS parameter, possibly with a prefix or suffix.

The type attribute must be "text", "number", or "color".

For properties where the value must be limited to a number, use type="number".

For properties where the value must be limited to a color value, use type="color".

For all other properties, use type="text".

Here is an example custom property definition. This is the container-border-width custom property for the Simple Blue Theme:

<p k="theme-properties.container-border-width" name="container-border-width" type="number" dv="4" />

Theme CSS File

The optional Theme CSS file theme.css is used to set custom stylesheet rules. The contents of the theme.css file are inserted into the gs-site.css file essentially as-is.^{Note 1}

A theme.css file is useful when a Theme includes static CSS: CSS that does not respond to settings in the GedSite file. To produce CSS that changes in response to property settings, use a Theme Script.

Theme Script File

The optional Theme script theme.cs is used to set custom stylesheet rules. The custom rules may be based on custom properties, or they may be hard-wired rules chosen by the Theme designer.

Theme scripts are implemented using C# methods that GedSite compiles. Use one of the Theme scripts supplied by GedSite as a model for creating your own.

Theme Graphic Files

Themes may include graphic files. Those files are copied to the Output (-o) folder when GedSite executes (A) the Make CSS command or (B) the Make Site command.

Theme ThumbNail Image

GedSite's Themes include a thumbnail image that is stored in the Theme folder. The file must be named "theme.gif", "theme.png", or "theme.jpg". The thumbnail image appears under the Theme pulldown menu. The Theme thumbnail image is optional, but if you create one, the image should be 250 pixels wide by 200 pixels high.

Thumbnail images for Custom Themes are optional and do not affect the generated site.