Terry's Second Site Tips

Customizing Your Site

This page updated 19 Apr 2013

Version note: Applies to Second Site 6 & 7

My Second Site Overview article describes how to use Themes to control the "look" of your site, including colors, fonts, graphics, and more, and Formats to control the arrangement of data on the Person Pages. This article describes some techniques for customizing the appearance produced by those two tools, or even to produce what amounts to an entirely custom appearance. Other articles in my Second Site Section cover other topics about customizing your site.

Topics Included in this Article
Person Pages Customizing the Person Pages
Family Section
Customizing the Family Section of the Person Pages
Themes and Stylesheets
Customizing the styles set by a Theme
Editing Styles
How to edit the various style attributes
Editing Colors
Tools available for editing colors
User Styles
Advanced control of styles
Page Layouts
Controlling how the elements are arraigned on each page

This article first discusses ways to customize the way your genealogical data for each person is displayed on the Person Pages, to refine the choices made by selecting a Format. The later sections describe methods to customize the appearance of the overall site, to refine the choices made by selecting a Theme. The final section discusses the use of Layouts, which control how various sections of the site are arranged in your browser window.

Person Pages

Person Pages, as covered in my Overview article, contain the genealogical data for each person in your site. That data can be displayed in a variety of formats, again as described in that article, and the principal tool for controlling that format is by selection of a Format. However, there are several options available to customize the details of how the data is displayed by each Format.

After selecting the Format, the primary tool for managing the arrangement of data in the Person Pages is the Pages > Person Entry section. The screenshot below shows the default arrangement of that section:

Person Entry

The right side of this screen shows a list of sections that may appear in the Person Page entry for each person in the site. There are several items of note about this list, including:

Literal

While the Pages > Person Entry section controls many of the aspects of the data displayed on the Person Pages, two other sections control certain aspects. The Pages > Body Tags section allows you to specify whether TMG's Sentences will be used to structure the data, or raw data will be displayed. There are also controls for displaying Tag labels and Role names in the page.

The Pages > Page Sizes section has controls for the number of people to be included on each Person Page, and has an option to have only one person visible to the reader even when more are on the page. There are also controls for the order in which people are arranged in the person pages, and an option to keep each person always on the same page so that search engine results and external links work properly when you update your site.

Family Section

The Family Section of each person's entry in the Person Pages lists that person's spouses and/or partners and any children. A "Family" for purposes of this section means 1) a spouse or partner for which there is a Marriage Group Tag entered, with any children with that spouse or partner, 2) a spouse or partner with whom the subject has children but no Marriage Group Tag, or 3) children for whom the other parent is not identified. Each such group with a different spouse or partner, or children with no other parent, is a different Family and is treated independently.

To be considered for inclusion in a Family Section, a spouse, partner, or child must either be included in the site, or if excluded they must be specified as "Show if Principal to Marriage Event" for a spouse or partner or "Show Name when Child" for child in the Data > People section (see my article on Controlling Who is Included for details). When a spouse, partner, or children exist in the TMG Project but none qualifies to be considered the section according to these rules, their Family Section will be omitted.

While the selected Format controls the arrangement of the information on the page, the content, and even whether a Family Section is included when there are qualified people for it, is controlled by options in the Family Section item in the Pages > Person Entry section. To modify these options open the Family Sections item:Edit Family Section

There are several significant controls for this item. Like all items in the Pages > Person Entry section, it can be disabled, either by un-checking the box in front of the item in the list of items in that section, or the box at the top of the screen as shown above. Doing so excludes the section from the Person Pages. Controls specific to this item are marked by arrows on the screenshot and described below:

[CHILDREN:] ;Child;Children[:CHILDREN]<with an unknown spouse| with [PO]>:

Since I have set the Spouses control to show only families with children, I've left the first segment of the [CHILDREN:]...[:CHILDREN] code empty. The other values produce "Child" or "Children" depending on whether there is one or more children listed. The balance of my sentence uses the standard TMG conditional format to produce "with an unknown spouse" if the other parent is not known, or "with" and the name of the other parent when known. Note that if the other parent is in the TMG Project but does not qualify to be named as described above, this sentence will produce "with an unknown spouse."

If the size of the Heading Sentence field is too small to comfortably enter your sentence, press the F7 key to open a larger window. This works in all text input fields in Second Site.

To be used, the Tag must be primary for the subject, and if it is to appear in the Family Section with a spouse or the other parent of children, that person must be the other Principal in the Tag. If the Tag exists for a person or couple who would not otherwise have a Family Section (for example, because there are no children or all children are excluded from the site) the Family Section will appear with the note. Thus it can be used to note that there were no children or that all children are excluded because they are living, for example.

I use this feature to comment on children who may not really have been the children of these parents, cases where I suspect I have merged two different children or when I show two children who I suspect are really the same, or when I suspect there were more children than I have record of. Since I exclude living people from my site, when some children are living and other not, I use a note like "The other children of ... and ... are still living."

By default, the note displayed appears under the Family Section Header line. However, there is an option to have the note replace the Header as well as provide the note text. This is done by constructing the Tag Sentence so it produces both the header and the note text, separated by the code \|\| – the header is placed before the code and the note after it. Here is the Sentence I use in the FamilySectionNote Tag:

Children <with an unknown spouse| with [PO]>:\|\|[LIND:][M][:LIND]

The first part of this Sentence produces the header "Children with an unknown spouse:" or "Children with ... :"I use this format because I want the Family Section to always say "Children with... " instead of "Child with..." when a note appears. That format seems correct to me in every case, whether there there are multiple children listed, only one child listed and the note describes other children or possible children, or it is noting that there were no children.

The second part of the Sentence copies the contents of the Memo field, formatting the text with TMG's left indent codes. In Second Site I refine the results of those codes to use a smaller font and indent both sides. See my article on Customizing with Stylesheets for details.

If you specify that TMG's NarrativeChildren Tag be used and also use that Tag in TMG Journal reports, the code \|\| will produce undesired results in the TMG report. You may be able to make the same Tag work in both programs by hiding it from TMG but not from Second Site with these codes:
      [HID:][SS:]\|\|[:SS][:HID]

Users who in prior versions of Second Site have created custom Formats to have their data appear as they prefer may find that the flexibility of the Family Section described here, together with the other options offered by the Pages > Person section, may allow them to achieve their desired results without the effort needed to maintain a custom Format. I have found that to be the case and am no longer using the two I used with prior versions.

Themes and Stylesheets

Most users will find they can obtain a totally satisfactory site by choosing from the variety of Themes available, as discussed in the my Second Site Overview article. However, some users want a site that is exactly "my way," or they just like to fiddle with such things. Second Site offers several methods, of differing degrees of complexity, to customize the results produced by a Theme. Some of them are described in the following sections.

Before examining the techniques for customizing the results produced by Themes we should pause a moment to be sure we understand what Themes do. In Second Site, Themes control the general "look" of the site - color schemes and graphics. They do this in two ways:

Customizing the style settings provided by Themes is probably easier if you understand the concept on which those controls are built. Second Site uses a website technology called "Cascading Style Sheets." This techo-term actually contains its own definition. The "Style Sheets" part means that they are sets of instructions, or styles, which a reader's browser uses to display the webpage. Something like this, to offer a much simplified example (which you may recognize as similar to what this page uses):

The "Cascading" part means the styles are in effect in layers, and the settings in one layer "cascade" to the other layers unless a different instruction is given for that layer. In the example above, the font style and background from the body style "cascade" to the page title, but the title uses it's own size, color, alignment, and type style. When one style layer receives it's characteristics from another, it's said to "inherit" them.

Extending this notion a bit farther in Second Site, selecting a Theme establishes a wide variety of styles. The user can choose to use all those styles, or modify specific ones. When you select a Theme, most of the styles used by that Theme are set in the Stylesheet > Theme section of the User Interface. For example, the following screenshot shows the some of the Colors and Background styles set by the Mint Swirl Theme:Stylesheets

Styles set by the Theme for Body Text, Headers, Menus, Charts, and Sideshows can be seen in the other screens in the Stylesheets > Theme section. Note that if you change to a different Theme, all the values in this section are liable to be set to new values.

Styles for many specific items in your site are displayed in the Stylesheets > Menu and Stylesheets > System sections. Themes do not generally set styles in these sections directly, but some of the default values in those sections are actually references to the settings in the Theme section. So in some cases styles in these two sections are indirectly set by the Theme.

If you would like to modify some specific aspect of your site, look at the settings available, first in the Themes section, then in the Menu and System sections. You may be surprised by how simple it many be to change something. The next two sections describe how to make changes to specific styles in these sections.

If you cannot find a way to control the item you want to change in the Stylesheets sections just described, read on to the User Styles section below.

Editing Styles

The styles are edited by entering or selecting a value in the fields of the StyleSheets section, one of which is shown in the screenshot above. Each field defines a specific attribute of one particular style. They can be though of as being one of three types:

For each of these types you can enter the special value "Inherit" instead of entering a specific value. In that case the value is "inherited" from the parent element, which is generally the one that surrounds or precedes it.

Each of the Stylesheets sections allows the setting of styles for a single "Rule." The name of that Rule appears at the top of the screen, with the label "RuleCode." How it is used is described on the next line. In the screenshot above the Stylesheets > Theme > Colors, Backgrounds section is for the Rule "backcolor," which is used for colors and background colors.

For each Rule only a few of the most commonly changed attributes are presented in fields to be easily changed. In the Stylesheets > System section, many of the Rules include a field labeled "other." By entering an attribute and then associated values in that field you can change an attribute that is not available in a dedicated field. For example, I wanted to change the vertical alignment of the site icon, an attribute not included in the Stylesheets > System > Site Icon section. So in the Other field I entered both the parameter and the value like this: vertical-align: middle;

I have three suggestions if you need assistance in figuring out how to make a change you what to try:

Editing Colors

The official way to set colors for webpages is to enter the six-digit number representing that color. For example, #336699, in which the first two digits specify the amount of red, the next two the amount of green, and the last two the amount of blue. Of course such values mean little to most of us, so Second Site offers several tools to assist users in entering colors.

The first is the use of color names. Seconds Site recognizes 140 different colors by name. If you enter one of these names, Second Site will apply the corresponding color number when it constructs the site. The recognized names and their colors are shown in Help.

A more helpful tool, in my view, is the Color Picker. You open the Color Picker by placing the cursor in any Stylesheet field in which a color is specified, and pressing the F7 key:

Color Picker

At the top of the screen the name of the attribute being edited is shown. The Color Picker opens to the Pallete tab, in which a large number of available colors are displayed. If you click one, like the bright fuchsia selected here, that color appears in the upper half of the box at the top right, under the "Picked" label. The color currently used appears in the bottom half of the same box. The color number of the selected color appears in the box at the lower right. Once you are satisfied with the color, click OK to insert that color number into the field.

If no available color color is quite to your liking, you might try modifying the color number slightly to see if you can find a more satisfactory choice. Or, if you have image editing tools like Adobe Photoshop, you may find the color tools in it are helpful in getting just the right shade. If so, you can copy the color number either directly into the field, or into the box at the lower right corner of the color picker.

The Theme tab of the Color Picker offers a helpful way to keep a consistent set of colors on your site. Open that tab and you see something like this:

Color Picker

Each color on this tab has already been selected for one of the values in the Stylesheet > Theme section. If you hover your mouse cursor over a color block the style that uses that color, together with the color number of that color, are displayed, as show in the screenshot.

To use one of these colors for a different style simply select it and click the OK button. Note that by default, the "Use Theme color by reference" option is selected. With that option selected, instead of the color number being entered in the Stylesheet field, a reference to the style in which it was previously used in inserted. That means that if the referenced color is changed, those linked to it will be too.

The use of references to link colors in different styles provides a way to simplify management of a set of custom colors. This method may be most useful for those who are constructing what is essentially a customized Theme by making extensive changes to the colors of the Plain Theme or another standard Theme. Start by applying one of your custom colors a field in one of the Stylesheet > Theme sections where you would like to use it. Then, for each other field where you want to apply the same color, do not enter its color number, but instead select the color from the Theme tab of the Color Picker, leaving the "Use Theme color by reference" option checked.

Repeat this process for each additional custom color you are using. This avoids specifying slightly different colors when you intended them to be the same. It also provides an easy way to change those colors should you decide to do so. You only have to edit a color once in the "root" style, and all the others connected to it by the reference links are automatically changed too.

You must pick the color from the Theme tab of the Color Picker for the Reference feature to work.

User Styles

There is another level of control available to the more adventurous. The Stylesheets > User section allows you to make changes to styles that are not possible in the Theme, Menu, or System sections. There are actually hundreds, or perhaps thousands, of style elements available to control the appearance of the many elements that make up your site. While a good number of the more commonly used parameters can be changed with the various sections discussed above, there are many more that a truly dedicated "customizer" might wish to use. The screens in Stylesheets > User section are designed to provide access to them.

Working with User Styles requires more knowledge than those described in the preceding section. You need to first identify which style you want to modify, and then format the instructions for the change correctly. Further information about the use of User Styles, some suggestions on how to determine which style to modify, and some examples of how I used User Styles are shown in my Customizing with User Styles article.

If you are not comfortable with working with styles, you can always obtain help from from John Cardinal's Second Site support list, where John and other users are always ready to assist.

If you intend to extensively customize the look of your website, it may be best to start with the Plain Theme. It is intended as a base from which you modify color properties and supply graphics to create a custom look. While you can modify some of the properties of the other Themes, they are already designed to present an integrated appearance as provided.

Controlling Page Layouts

The options in the Layouts section of the Second Site interface control how the various elements of each page will be arranged on the page the reader sees. There are four related but separate features in the Layouts section, which are marked in the screenshot below with arrows:

Selecting the Layout

This screen is for the "Default Layout" – the controls here affect the entire site unless a different setting is used on one of the screens for a specific type of page. If you look at the screens for each of the types of pages you see similar controls, with the differences noted below. The four functions on the Layout screens are described below:

Header
Content
Sidebar
Extra
Footer

By default Second Site makes reasonable choices for this function, and most users will not have to concern themselves with selecting alternatives. The adventuresome, however, may wish to review this subject in Help and experiment. If you select a different Layout a small thumbnail outlines the resulting layout of each page.

Note that there is a section for "Default Layout" and then sections for each of the different types of pages in your site. As part of the Cascading Style concept discussed above, the layout selected as the Default is inherited by each of the page types unless something different is specified for the individual type of page.

There is a downside to using a Framed layout if you are placing your pages on a public website that will be indexed by search sites. If someone finds a person of interest in your page through a search site and clicks on the link to your pages, they may see just the person page by itself, not in the side-by-side layout. My experience suggests many of my visitors find me through search sites, so this is an issue to address.

If you check the "Use Frame Script" box as shown above, Second Site includes in your site a special script that automatically moves the page a reader finds by a search engine into its proper side-by-side arrangement. There are some issues with this feature (see Help for this screen) but I think they are out-weighed by the advantages, and recommend that those who prefer a Framed layout use it.

Conclusion

This describes some methods by which one can further customize a website created with Second Site to suit his or her own preferences. If theses techniques seem confusing, or you are just not interested in mastering them, ignore them and use the techniques described in my Second Site Overview article. Leave the more advanced techniques to those who find them entertaining.


ReigelRidge Home Terry's Tips Home Contact Terry

 

 

Copyright 2000- by Terry Reigel