Themes

Overview

In Second Site, a Theme determines the look of the site. Second Site includes more than a dozen 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 Section. When you choose a Theme from the Styles.Theme pull-down menu, Second Site updates the properties in the Theme Section. The default values for those style 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, Second Site 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 list of Themes Supplied with Second Site. 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 Second Site 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.

Second Site provides a mechanism to display the proper attribution via the Styles.Theme Credit property. 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 Second Site framework.

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

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 Input (-i) folder for your site. If the replacement file has the same name as the Theme file, the file in the Input (-i) 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 Second Site to use the image.

Adding a Graphic File

Some Themes have button images for User Items. If you create a User Item for which the Theme does not have a button image, you can supply your own. Put the graphic file in the Input (-i) folder. Depending on the name of the file, you may have to adjust the Button Image property of the User Item.

Replacing a Graphic File

Some Themes include a surnameindex.jpg file for the "Surname Index" button. If you put a file named surnameindex.jpg, surnameindex.gif, or surnameindex.png in the Input (-i) folder, Second Site will use that file in place of the Theme version. If your file is named surnames.jpg and you do not want to change it, you can edit the Surname Index User Item and select "surnames" from the Button Image pull-down menu.

If you add a file to the Input (-i) folder when Second Site is running and your SDF file is open, the file may not appear in a visible image pull-down menu. To refresh the image menu when editing a User Item, close and re-open the User Item editor window. To refresh the image menu when editing stylesheet properties, switch to a different section and then back.

More Graphic File Information

See the Graphic Files page for more information about how Second Site handles graphic files.

Custom Themes

A Theme is a combination of a Theme stylesheet script (Theme.sss) and optional graphic files. Those files are stored in a Theme folder. Users can make their own Themes by creating the necessary files and storing them in the Themes subfolder of the User Data Folder.

Theme Stylesheet Script

The Theme stylesheet script adds stylesheet properties to the Theme Section. There are a set of required properties; the value of those properties are used by the System stylesheet. In addition, Theme designers may include extra properties that apply to the current Theme only.

Theme Graphic Files

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

Themes Supplied with Second Site

• 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 with Leaves Theme is the same as Simple Blue except that it incorporates a "blue leaves" image in the header and footer.

  The Simple Blue and Simple Blue with Leaves Themes are 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. The Plain Theme includes some extra background images you can select via Theme properties to set a background image for the page or for the content area, etc.
• Second Site includes multiple 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 all include images for the menu buttons and a left-hand border image. The menu buttons will only appear if the Styles.Button Images property is set to "Use Available Images." The left-hand border image will only appear on pages with the layout set to "1 Col FL Border" or "1 Col LC Border".

• The Contented1, Contented4 and Contented5 Themes are based on open source designs from Contented Designs. They say, "Our goal was to keep the design clean and simple so website visitors could focus on the content."

  To match the original design more closely, Contented5 features a menubar that is visually integrated with the heading when the Default Layout.Menu Script is set to Standard. That reduces the width available to both the menubar contents and the heading contents, and so it may not work well with some sites.

• 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. A top menu will work best, particularly the Standard and Panels menu styles. Other menu styles won't work as well.
• 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: it includes images for the menu buttons and a left-hand border image. The menu buttons will only appear if the Styles.Button Images property is set to "Use Available Images." The left-hand border image will only appear on pages with the layout set to "1 Col Border".

Creating a Theme

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

You can add custom Themes to Second Site. The best way to start is to copy one of the Themes supplied with the program.

Theme files are stored together in a single folder. The folder name is the Theme name. That folder must be a subfolder of the Themes folder in the User Data Folder.

For example, let's assume you want to make a new Theme called "My Theme". If you created a folder named "c:\UDF" and set that folder as your User Data Folder, the folder tree is:

• c:\UDF
  • Themes
    • My Theme
      • Theme.sss

The folder must contain the Theme script (Theme.sss) as shown. The script statements in the Theme.sss file create properties in the Second Site user interface and are also used to create the CSS files that determine the look of the site. Use an existing Theme.sss file as an example if you create your own.

Theme ThumbNail Image

Second Site's Themes include a thumbnail image that is stored in the Help\ThemeGallery subfolder under the program folder. The thumbnail image appears under the Theme pulldown menu in the Style section. Custom Theme developers who create a thumbnail image for their Theme should place it in the ThemeGallery subfolder of their User Data Folder. The image should be a JPG or GIF file, 250 pixels wide by 200 pixels high.

For example, if the UDF folder is c:\UDF, and the Theme is named "My Theme", a JPG thumbnail image would be c:\UDF\ThemeGallery\MyTheme.jpg.

For technical reasons, Second Site removes spaces and punctuation characters from the Theme name to form the name of the thumbnail image. So, for example, the thumbnail image for "John's Theme" would be c:\UDF\ThemeGallery\JohnsTheme.jpg not c:\UDF\ThemeGallery\John's Theme.jpg

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