Terry's Second Site Tips

Using Icons

This page updated 25 Apr 2013

Version note: Applies to Second Site 6 & 7

Second Site allows the use of Icons in several different contexts. This article describes three totally different uses of Icons in your site. The first application is for a set of small icons that can be placed next to a person's name in the Person Pages or in Indexes, to mark various attributes of each person. The second is for a graphic that be included in the title area of each page. The third is a "shortcut icon" which appears next to the name of your site in the tab of a readers browser, in the bookmarks list, etc.

Other articles in my Second Site Section cover other topics about customizing your site.

Icons for People

This section describes how to personalize your site by adding small icons that appear in Indexes and in the Person Page to identify people by their relationship to a focus person, to mark residents of specific countries or places, participants in military events, or most anything else one might imagine. These Icons can be used much as one might use Accents within TMG. The Icons are controlled by Flags in your TMG Data Set.

My favorite application is based on my "related-by" Flag, to mark direct ancestors, siblings of ancestors, more distant cousins, and spouses. An example of how Icons can be used to in this way can be seen in the excerpt at right from the index of my family history website. The brighter single figure marks an ancestor of mine, and the smaller double figures mark siblings of ancestors. Similar icons mark the names of the subjects in their sections in the Person Pages, and the names of children when listed with their parents. The icons help my immediate family members recognize those most closely related to themselves as they browse the site.

Before you start to set up Icons, the Flags which will control them must be created in the TMG Data Set. They may be either standard TMG Flags, or custom Flags you create. My article on Creating a "Related-by" Flag describes one way you might create that sort of flag, which can be used both for Accents in TMG and Icons in a site created by Second Site.

In the following example we will use a somewhat simpler case, an Icon based on the Sex Flag to mark males and females. Once the Flag is created in TMG (this one of course already is) you set up the Icons in Second Site from the Data > Icons section. To add a new Icon, click the Add button to open the Set Flag Icon screen:

On the Set Flag Icon screen, seen to the right above, select the Flag to be used from the drop-down list. In this case we selected the Sex Flag.

The Icons may appear either before or after the person's name in any or all of three locations:

• For each person's section in the Person pages, at the name of the focus person

• At the name of each child in the listings under the father and mother's narratives

• At each name in the Person Index

The location to be used is specified with the drop-down below the Flag setting. Below that you can specify whether the Icon is to go before or after the name. In this case we have specified that the Icon will appear the on the Person Pages, before each subject's name.

In the screen shot above, the female Icon has been selected, as appears in the list in center of the Set Flag Icon screen, and now we click Add Icon... button again to add a male Icon. The Select Graphic File screen appears:

After selecting the desired icon graphic file and clicking the Open button the Add Icon screen appear (seen at the bottom above) appears. Enter the flag value you want the icon to represent, and click OK.

The Set Icon screen can set a number of different Icons based on different values of the same flag, and positioned at the same location. If other Icons based on a different Flag, or placed at a different location, are desired, close the Set Icon screen, and open another by clicking the Add button (in the main Data > Icons section) again.

A variety of Icon images are supplied, or you can use others you have or create. When you select an Icon image, a copy is placed in the "-i" (input) folder for your site, and is copied to the "-o" (output) folder when you make your site. Probably the easiest way to create a custom icon image is to copy an exiting one and edit it in a graphics program. Most any program will do, even the simple Paint program supplied with Windows.

There are two ways you can help readers understand the meaning of the icons if that meaning is not obvious from the icon itself (as it probably is in this case). One is to add text which will appear when the reader hovers the mouse over the icon, sometimes called a "tooltip" and the other is to make the icon a link to a page containing a legend. To do either, select an Icon in the Set Icon screen, making the Title Text and HRef fields active.

The "hover" text is entered in the Title Text field. Here I have entered "Female" in that field.

Adding a legend page is a bit more complex, because you must also create the page. That is done by creating a custom page in the Pages > User Items section. The page can be created easily by use of Icon Description Content Items, using the "building block method described in my article on Adding Page Content. Note the filename in the Edit Custom Page screen, which will by default be something like "ui06." You can either use that name, or make it something more understandable, like "icon-legend" as I have done here. Whichever you do, enter that file name in the HRef field as shown above to make the icon a link to that page. In addition to making the icons links to this page, you may choose to include it on the menu, and/or providing a link in the text of other pages.

A sample legend page from my own site, created using this method, is shown below:

In this case, the icons are based on my Related-by Flag, as discussed at the beginning of this section.

Setting Up a Site Icon

As described in my Overview article, Themes control the general "look" of the site – the colors and graphics used on the site. There are a variety of standard Themes that provide several distinctly different overall site styles, including in some cases fairly extensive graphics. But I prefer a fairly simple style of my own design. So I start with the Plain style, which is designed to be a simple foundation for user customization. In addition to the changes to fonts, spacing, and colors that I made as described in other articles in this series, I wanted to add my site's trademark "ReigelRidge" house on a mountain graphic.

Adding such a graphic as a Site Icon is pretty simple. The hard part may be locating or creating a suitable graphic image. Once you have obtained the image as a GIF, JPG, or PNG file, rename it to siteicon.gif, siteicon.jpg, or siteicon.png, as appropriate, and place a copy of it in the "-i" (input) folder for your site. When you make your site the graphic will appear in the title area of your site.

An image named "siteicon" will be used for all pages. If you want different icons on some pages, for example a smaller version on pages other than the main page, use the following file names instead (add .gif, .jpg, or .png as appropriate) to use icons for specific pages:

By default the icon will appear to the left of the site title and page title, with the vertical placement of the text depending on the height of the icon. I wanted the site title to be centered vertically with the icon, so I made two changes on the Stylesheets section:

The result can be seen at the top of my outline family history site.

Shortcut Icons

Shortcut Icons, also known as Favorite icons and Web site icons, are small icons that web browsers display in tabs, lists of book marks, history pages, and other contexts. For example, the screenshot below shows how my family history site appears in the tab of my browser, with my shortcut icon displayed before the name of the site. Various browsers apply the icon in different contexts, and a few do not at all.

Second Site supports the use of Shortcut Icons, and handles all the technical details. All that is required of the user is to find or create an appropriate icon image, and place it in the input folder for the site.

The challenge, of course, is to create or obtain a suitable icon. The image must be 16 by 16, 32 by 32, 48 by 48, or 64 by 64 pixels in size. It must be in the ICO format, and must have a file name of "favicon.ico" (while some browsers will accept other formats, Second Site expects the ICO format to ensure the broadest acceptance).

It may be possible to locate an acceptable icon image on the Internet, but be responsible about copyright restrictions. If you are creative enough you can design your own in a graphics program, including one as basic a Paint, which is included in Windows. More advanced graphics programs make the process easier. I created mine by starting with my Site Icon and using Adobe PhotoShop Elements to reduce it to 32 by 32 pixels in size. It must be saved in the ICO format. There are several graphics programs that will save images in this format, the most popular free one probably being IrfanView.

Once the icon file is created, place it in the input ("-i") folder for your site.

Copyright 2000- by Terry Reigel