Home > Appendices > Cascading Style Sheets

Cascading Style Sheets

A Cascading Style Sheet (CSS) allows you to better specify the layout of your web pages. GED-GEN creates its own CSS file that is referenced by all generated web pages. The name of the file is base.css, but the name will include the file prefix you specified on the Attributes tab.

If you have your own CSS files, you can use them with GED-GEN web pages. Specify their names on the Attributes tab under External Cascading Style Sheet (CSS). A description of the content, format and use of CSS files is beyond the scope of this help information. You can obtain more information about CSS at www.w3.org On the WWW.

Your CSS files will be referenced via <link> elements immediately after the GED-GEN CSS file. This means you can override any settings in the GED-GEN CSS file as well as incorporate your own styles. Since the GED-GEN CSS file is automatically generated, you should not modify it. Your changes would be overwritten the next time you generate web pages.

Many HTML elements in GED-GEN web pages include a CLASS attribute. If you want to change the way GED-GEN displays one of these elements, simply override the class in your own CSS file. For instance to change the style of the Surname page title, simply add a gg-title class in your own CSS file. If you look in base.css, gg-title is defined as:

.gg-title
{
text-align:center;
font-size:200%;
margin-top:10px;
}

You could change it by adding gg-title to your own CSS file and changing your definition to:

.gg-title
{
text-align:left;
font-size:100%;
font-weight:bold;
margin-top:1em;
}

The following table summarizes the class attributes used by GED-GEN, which are defined in its external CSS file. Use it as a guide in overriding any styles. GED-GEN styles are prefixed with gg- to avoid conflicts with your own class names. New classes added for GED-GEN version 1.8 are indicated in blue.

CLASS Usage

.gg-body
.gg-bfam
.gg-bsur
.gg-bidx
.gg-bbib
.gg-brep
.gg-bthm
.gg-bsld

The <BODY> of each generated web page.

The style of each type of page can be further refined: Family, Surname, Index, Bibliography, Repository, and Multimedia Thumbnail and Slide.

Existing Users: If you previously overrode .gg-body pre to change the default monospace font style, you must now override both .gg-idx and .gg-fam instead. The element <pre> is no longer used.

.gg-bar
.gg-bar.mt
.gg-bar.mb
.gg-bar.tt
.gg-cbar

The plain line divider bars: A medium thickness bar (top and bottom), a thin bar (top only), and a line that separates the most common surnames on the Surnames page.

.gg-tbar
.gg-bbar
.gg-kbar
.gg-nbar

The image divider bars: Top and bottom for page-level dividers, and thick and thin for group sheet dividers.

.gg-title
.gg-subtitle
.gg-famtitle
.gg-namtitle

The title and subtitle appearing on the surname, index, bibliography and repository pages and the title appearing on the family pages. The family or individual name that appears within a title.

.gg-sur
.gg-idx
.gg-fam
.gg-bib
.gg-rep

The main text areas of the surname, index, family, bibliography and repository pages.

.gg-tblgrp
.gg-tbllbl
.gg-tblimg
.gg-tblimggrp
.gg-tblimgpic

The table layout used to align the group sheet area itself and the fact labels and individual image areas within the group sheet.

.gg-lbl
.gg-date
.gg-place
.gg-lblpmt

Aligns labels (e.g., Born, Married, ...) and date and place fields on the group sheet when either a proportional or non-proportional font is used. gg-lblpmt is the style of the label prompt itself (e.g., "Born:").

.gg-bio
.gg-nar
.gg-lblrel
.gg-rel
.gg-imp
.gg-grp
.gg-grpimg
.gg-indimg
.gg-cap

Custom features: Biography link, narrative link, the label that emphasizes a child when relationship text is used, the relationship text, imported text area, family group image area, family group image, individual image, and the caption appearing under images.

.gg-idxjmp
.gg-idxlet
.gg-idxsur
.gg-idxgvn
.gg-idxico

.gg-idxnav

Jump tabs at the top of each index page, the index tab letters, the surnames and the given names under each surname on the index pages, the icons that indicate associated links and images, and the "prior" and "next" links that navigate between index pages.

.gg-secmost
.gg-secchild

The "Most Common Surnames" section title and the "Children" section title.

.gg-isec
.gg-ipmt
.gg-ievt
.gg-inote
.gg-enote
.gg-einote

The "Additional Information" section: gg-isec is the section title; gg-ipmt is the subsection prompt, usually a person's name; gg-ievt is an event that appears under the prompt; gg-inote is the text style for research notes and marriage notes. gg-enote is for event (fact) notes and gg-einote is for event notes that appear inline, within the family group sheet.

.gg-ftsec
.gg-ftnote

The "Footnotes" section: gg-ftsec is the section title; gg-ftnote is the footnote text.

.gg-lnksur
.gg-lnkidx
.gg-lnkfam
.gg-lnkbib
.gg-lnkrep
.gg-lnkmed
.gg-page

The navigation links that appear at the top and/or bottom of each surname, index, family, bibliography, repository and multimedia gallery web page. The page number shown between links to move to the next or prior page in a series, such as between bibliography pages.

.gg-thmlnk
.gg-aind
.gg-afam
.gg-asrc
.gg-abib

Multimedia gallery links that appear on your family group sheet pages. These are links to the thumbnail gallery pages for each type of multimedia gallery: Individual, Family, Source Citation and Bibliography gallery.

.gg-thmtitle
.gg-thmgal
.gg-thmimg
.gg-thmfil
.gg-thmcap
.gg-thmref
.gg-thmnav

Multimedia gallery thumbnail pages. The gallery title; the thumbnail table layout; each thumbnail image; the image file name, caption, and reference number; and the navigation links for paging between thumbnail pages.

.gg-sldtitle
.gg-sldgal
.gg-sldimg
.gg-slddwn
.gg-sldfil
.gg-sldcap
.gg-slddate
.gg-sldref
.gg-sldnot
.gg-sldsrc
.gg-sldnav

Multimedia gallery slide pages. The slide title; the slide area; the slide image; the download link; the slide file name, caption, date, reference number, notes and source citation area; and the navigation links for paging between slide pages.

.gg-objaud
.gg-objhtm
.gg-objswf
.gg-objoth
.gg-objtxt
.gg-objvid

Multimedia objects. These are used when displaying certain multimedia formats on the slide pages: Audio, HTML, flash, other, text and video. For example gg-objaud is used in mm-audio.txt. Refer to Multimedia Types.

.gg-bibnbr
.gg-bibent
.gg-bibbdy
.gg-bibtxt
.gg-bibcmt
.gg-bibevt
.gg-bibagt
.gg-bibdta
.gg-bibrep
.gg-bibref
.gg-bibchg
.gg-bibnav

Bibliography page. Each item in a bibliography entry can be formatted separately: The entry number, main entry line, the entry body, which includes the source text, comments, events, agency, data notes, repository citation, user reference, and change date. The inter-page navigation links.

.gg-repnbr
.gg-repent
.gg-repbdy
.gg-repcmt
.gg-repadr
.gg-reptel
.gg-repfax
.gg-repeml
.gg-repweb
.gg-repref
.gg-repchg
.gg-repnav

Repository page. Each item in a repository entry can be formatted separately: The entry number, the main entry line, the entry body, which includes comments, address, phone, FAX, E-Mail, website, user reference, and change date. The inter-page navigation links.

.gg-rev
.gg-copy
.gg-ver
.gg-gg
.gg-fntund
.gg-fntsc

The "Revised" line and the "Copyright" line that appear at the bottom of each web page. The "Generated by GED-GEN" line on the surnames page. Formatting for certain escape sequences like underline font and small-caps font in notes fields.