Terry's TMG Tips

Controlling the Details on Your Site

This page created 2 May 2008

Version note: Applies to TMG 6 & 7, and Second Site 2
Second Site 2.1 or later required for TMG 7

My article on Refining Your Site describes some basic steps in Second Site to arrange your website as you prefer. Once you have chosen the basic "look and feel" of your site as described in that article, you may choose to further "fine tune" the appearance of your site to get it exactly as you prefer.

In order to illustrate some useful techniques this article describes a some methods I've used for my Family History pages. The major design criteria of that site is described in my article on Creating Minimalist Style Web Pages, but the techniques described here can apply to any style of site. Other articles in this group cover related topics.

Setting Colors, Fonts and the Like

When choose a Theme for your site you set a variety of features, including colors, font size and style, and much more. Many of these choices can then be modified with the many options available on the Second Site screens. I used the Plain Theme because it is " intended as a base from which you modify color properties and supply graphics to create a custom look," to quote the description in Help. You can modify some of the properties of the other Themes too, but they are already designed present an integrated appearance as provided.

Here are some of the controls I used to create the custom colors, fonts, and text layout, listed in the order they appear on the Second Site screens:

• Stylesheets > Theme > Body Text – I prefer a serif style font for the majority of my site, so I entered "Times New Roman", Times, serif in the "font-family" field
• Stylesheets > Theme > Heading Text – I also entered "Times New Roman", Times, serif in the " font-family" field here.
• Stylesheets > Theme > Colors, Backgrounds – I entered #FFFBE5 in the "page-background-color" and "container-background-color" fields to change the background colors of the site. I changed the colors of links by entering #B76600 in the "link-color" field and #990000 in the "visited-color" field. Finally, I set the "header-text-color" field to #000000.
• Stylesheets > Theme > Menus – I wanted to change the color of the background color of the letter blocks that appear at the top of the Surname Index, "Pop-up Pedigree" buttons, and the like, so I entered #B76600 in the "item-background-color" field.
• Stylesheets > Theme > Charts – I wanted to change the colors in the Pop-up Pedigrees to better match the rest of my color scheme, so I entered #FFFBE5 in the "subject-backgroud-color," "female-backgroud-color," and "male-backgroud-color" fields. Then I entered #B76600 in the "female-border-color" and "male-border-color" fields.

These illustrate just a few of the many ways you can customize the colors and fonts used on your site. The specific changes allowed, and the effect of the various controls, varies depending on the Theme selected. Review the available options, read what Help offers, and experiment to see what changes appeal to you.

Selecting Other Options

A number of other options one can select to control various aspects to the overall impression of the pages, or producing specific features of my website. I list here I found interesting, by the section in which they appear in Second Site:

• Data > Dates – I prefer the person index to show each person's lifespan, as years, in the form (1823-1918). I like the same format on the lifespan for the subject, shown on the line under the name, and for the spouse above the list of children. So I set the "Subject Lifespan Option to "Lifespan on second line," and the "Spouse Lifespan Option" and "Index Lifespan Option" both to "Lifespan on subject line." I set the "Subject Lifespan Format," "Spouse Lifespan Format, and "Index Lifespan Format" all to "(date - date)." And, I set the "Subject Date Format," "Spouse Date Format," and "Index Date Format" all to "Aaa yyy."

• Layouts > Main Page – I like a horizontal line below the icon (see Site Icon below) and title of each page in the right pane of the side-by-side layout. I got this by checking "Extra Header Override," which activates the next field "Extra Header." In that field I entered the HTML code for Horizontal Rule: <hr>

• Layouts > Person Pages – I add the horizontal rule code to the bottom of the Person Pages, just as I did for the Main Page above. I don't like the person pages to have a "Person Page - 3" or whatever subtitle. So I choose the "No Page Number" option under Header Script, and also edit the Strings > Page Strings as described below.
• Stylesheets > System> Children List – I like the children to be numbered in the list of children, so I set "list-style-type" to Decimal.

User Styles

Second Site uses CSS styles to control virtually all the aspects of your site. Most of the options described above are actually fields to change various CSS parameters in order to control the appearance of your site. There are actually hundreds, or perhaps thousands, of such parameters available to control all the appearance of the many elements that make up your site. While the more commonly used parameters can be adjusted with the various fields we have 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.

Unlike the options covered in the previous sections, the User Styles require some knowledge of CSS, and thus should be considered an advanced feature. Help provides some useful examples, there are many Internet articles that can be helpful if you are not already comfortable with writing CSS codes, and Second Site list on RootsWeb had many helpful people who can assist. But if such things seem like Greek to you, you may prefer to stay with the many options in the sections described above.

User Styles 1 through 5 are designed to allow a knowledgeable user to construct their own CSS styles, and then apply them to text entered in the various text content fields.

User Styles 6 through 20 are intended to allow users to override the standard styles that cannot be changed in the other screens. In each of these, you must first identify which style you want to modify in the "selector" field, then enter the appropriate CSS codes to make your desired modification in the "other" field. The following are some changes I made of this type for my family history pages:

• The Stylesheets > Theme > Heading Text screen allows you to set the alignment of all the headings in your site to left, center, or right. But I wanted only the main page title to be centered, and all the others to be left justified. Also, I wanted the main title to be in a different color than the other headers. So I set "Stylesheets > Theme > Heading Text" option to "Left," then in User Style 6 entered in the "selector" field the CSS parameter h1 and in the "other" field entered:

  text-align: center;
  color: #B76600;

• I wanted to change the behavior of links that appear in my site by assigning special colors, and having the underline only appear under the link when the reader hovers the mouse over it. To do that I created three User Styles.

  To change the color of unused links, and remove the underline, I created User Style 7, and entered in the "selector" field the CSS parameter a:link and then entered in the "other" field:

  text-decoration: none;
  font-weight: bold;

  To change the color of visited likes, I created User Style 8, and entered in the "selector" field the parameter a:visited and in the "other" field:

  text-decoration: none;
  font-weight: bold;

  To add the underline when a reader hovers the mouse over the link, I created User Style 9 and entered in the "selector" field the parameter a:hover and in the "other" field:

  text-decoration: underline;

  Note that they must appear in this order to work properly.

• The CSS parameter "h2" is used in several different contexts in various pages that make up the site. I wanted the page title for the Person pages to be centered and the same color as the main page header, but didn't want to see that effect within the body of the person pages, where that style is also used for the names of each person. So I created User Style 10, entering in "selector" field the parameter #header h2 which means that this style will only apply to the "h2" parameter when it appears in a page header section. I then entered in the "other" field:

  text-align: center;
  color: #B76600;

• I wanted to change the normal black dot used for bullet items to a colored dot, like the ones you see on this page. So I created a suitable "dot" image in a graphics editing program, and saved it as the file "brown-dot.gif" in the "-i" folder for my website. Then I created User Style 11 and entered in the "selector" field the parameter:

  ul.bull, #mainpage ul

I could have entered just the ul paramenter, but I also wanted to number the children. Specifying only the ul paramenter would cause the numbers to be converted to colored dots as well. The "ul.bull" class is used for the Tag bullets, but not for the list of children, so I was able to apply to colored dots only where I wanted them on the people pages. Since I also have bullets on my main page, I added the second term to change them as well. I then entered in the "other" field:

list-style-image: url(brown-dot.gif);

Thanks to Alison O'Neill for the tip on how to accomplish this.

• I wanted the A, B, C... letters heading each section of the surname index to be centered in the pane and larger. As with the "h2" parameter, "dt" is used in multiple contexts. So I created User Style 12, entering in the "selector" field:

#surnameindex #content dt

I specified it this way so that the custom style would only apply in the surname index. I then entered in the "other" field:

text-align: center;
font-size: larger;

• I wanted the superscripted source reference numbers to have the same font family as the rest of my text, so I created User Style 13, entering the parameter sup in the "selector" field and in the "other" field:

  font-family: "times new roman", times, serif

The key in each of these examples is to identify the CSS parameter that controls the portion of the web page you want to change. In some cases this is obvious from looking at the source code of the finished pages, but in other cases it is more difficult to discern. No doubt those skilled in CSS can be more successful, but I found that a good web-page editor was invaluable in seeing which parameters control the specific items I wanted to modify.

Changing Second Sites's Standard Phrases

Many of the words and phrases that Second Site uses (as opposed from the text produced by Tags in your TMG data) can be easily edited. Second Sites's Strings section contains a long list of phrases used to construct your site. These fields are initially populated with standard terms in the language you select when you initially create your site definition - Language Issues in my Special Issues article. You can then edit any of these phrases if you prefer. Here are some I like to change:

• Strings > Date Strings 1 – I like full dates to appear with the preposition "on" so I deleted that string from the "Preposition before a Day" field.

• Strings > Name Strings – I prefer that the indexes to display missing surnames as "(unknown)" rather than the default "(--?--)." So I edit the Missing field to read (unknown). This also changes the way missing names are displayed in the people pages, but my primary interest was in how they looked in the indexes.

• Strings > Page Strings – I like the TMG ID number on the line below each person's name to read "ID#" instead of just "#." So I edit the ID Prefix field to read: ID#&nbsp; - the code at the end creates a space between the text and the number itself. In order to delete the "Person Page" subtitle on each person page, I delete the text in the "Person Page Name" field.
• Strings > Place Strings – I like the place preposition "in" instead of "at" so I made that change in the "Default Place Preposition" field.

Again, these are just a few of the many ways you can customize your site. If you see phrases you would prefer to change, look through the Strings section. You can most likely change to something you would prefer.

Setting Up a Site Icon

In Second Site 2 Themes are less inclusive than before. Now they control only 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. 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. My principal addition is a "Site Icon" - the simple tree graphic that appears at the top of each page in the right-hand page of my site. Establishing a Site Icon is simple, once you locate or create a suitable graphic image. It's done as follows:

• Starting with 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.

• The siteicon image will be used for all pages. If you want different icons on some pages (I used a smaller version on pages other than the main page), use the following file names (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 set the the site title to be centered vertically with the icon with the two settings on the Stylesheets > System > Site Icon screen. I set "float" to "None" and under "other" entered: vertical-align: middle;

Conclusion

There are lots of ways to customize your webpages. How much you might choose to do depends on how much time you want to spend on the project, how picky you are, and what resources you have available. Hopefully, some of the ideas offered here will be helpful in creating a set of webpages that meet your needs.

Copyright 2000-2008