GED-GEN
Jun 122011
 

You can add small images to your links to give them some pizzazz. For instance the links to your multimedia galleries could appear like:

Family Gallery

Follow these steps to create your own CSS file and add images to your links.

Step 1: Create or obtain your image files.

For readability, your images should be small. They should not interfere with the flow of text on the web page. If you don’t want to create the images yourself, I recommend the set of Silk icons available free at FAMFAMFAM. Once you download the set, browse through the icons and pick out some appropriate images to use with your links.

In this example, I chose pictures.png (pictures.png) for multimedia gallery links and script.png (script.png) for biography links.

Copy your chosen images to your destination folder. This is where GED-GEN places the web pages it creates.

Step 2: Create a CSS file.

Using an editor like the Windows Notepad program, open a new file. Use your mouse to select the sample contents below and copy it (press CTRL+C). Then in Notepad, paste the text using CTRL+V or the Edit | Paste command.

Change the file names and adjust the offsets as appropriate for your images. An image will appear as the background of the link anchor <a> element. The text of the link is padded on the left to make room for the image. For an image that is 16 pixels square, padding of 25 pixels works well.

When you are done editing the file, save it to your destination folder. This is where GED-GEN places the web pages it creates. Name the file custom.css. (You can choose any name for the file.)

Sample Contents for custom.css

/*
** Anchors for source, bibliography, individual
** and family multimedia gallery links
*/
.gg-asrc,
.gg-abib,
.gg-aind,
.gg-afam
{
padding-left: 25px;
background: url(pictures.png) no-repeat 5px;
vertical-align: middle;
}
/*
** Anchor for a biography link
*/
.gg-bio > a
{
padding-left: 25px;
background: url(script.png) no-repeat 5px;
vertical-align: middle;
}

Step 3: Include the CSS file in GED-GEN.

In GED-GEN, include custom.css as an external CSS file.

Click the Options button, then the Attributes tab. At the bottom is the field for External Cascading Style Sheets (CSS). Click the Browse button next to this field. Locate and select custom.css and click OK.

Now you can re-generate your web pages and GED-GEN will include images in the links for multimedia galleries and biographies.

The above method is only one way of adding images. The use of background images avoids having to specify an image as part of the link label. It also avoids showing the link label underline under the image. One drawback though, if you print the web page, you must check the option to include background images.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

*