Terry's Second Site Tips

Customizing Your Site - Examples

This page updated 5 May 2009

Version note: Applies to Second Site 2 & 3

My Overview of Second Site article describes some basic steps creating a personalized website. My Customizing Themes article provides further details on ways to "fine tune" the appearance of your site to get it exactly as you prefer. This article provides some specific examples of ways I have used the techniques described in those articles to produce exactly the site I wanted.

My objective was to match the appearance of my Terry's Tips website. An example of the results can be seen in my Family History pages. While you may want different results, these examples may illustrate methods you may find useful.

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, as described in my Customizing Themes article. I used the Plain Theme for my site 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 in the "font-family" field I entered:
         "Times New Roman", Times, serif

• Stylesheets > Theme > Heading Text –
  I also entered in the "font-family" field:
         "Times New Roman", Times, serif

• Stylesheets > Theme > Colors, Backgrounds
  I wanted to change the background colors of the site, so I entered in both the "page-background-color" and "container-background-color" fields:
         #FFFBE5
  I changed the colors of unvisited links by entering in the "link-color" field:
         #B76600
  I changed the color of visited links to a different color by entering in the "visited-color" field:
         #990000
  I wanted the headings in the Person Pages to be black, so I entered in the "header-text-color" field:
         #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 in the "item-background-color" field:
         #B76600

• 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 in the "subject-backgroud-color," "female-backgroud-color," and "male-backgroud-color" fields:
         #FFFBE5
  Then I entered in the "female-border-color" and "male-border-color" fields:
         #B76600

• Stylesheets > System > Site Title
  I wanted the page titles on the various pages to be my in signature orange, so I entered in the "color" field:
        #B76600
  I wanted those titles centered, so I selected in the "text-align field:
         Center
  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 adding a "border" under the Site Title. To do that, I entered in the "other" field:
         border-bottom-style: groove;

• Stylesheets > System > Sub Title
  I wanted the page subtitles to be bold, so I selected in the "font-weight" field:
         Bold

• Stylesheets > System > Link Tags:link
  I wanted the text in links that appear in the site to be in bold font, so I selected in the "font-weight" field:
         Bold
  I wanted links to not have an under except where the reader hovers the mouse over the link, so I selected in the "text-decoration field:
         None

• Stylesheets > System > Link Tags:hover
  I wanted the links to show an underline when the reader hovers the mouse over them, so I selected in the "text-decoration field:
         Underline

• Stylesheets > System> Children List
  I like the children to be numbered in the list of children, so I selected in the "list-style-type" field:
         Decimal

• Stylesheets >System > Superscripts
  I wanted the superscripted source reference numbers to have the same font family as the rest of my text, so I selected for the "font-family" field:
         Inherit
  I have some source notes in charts that have small fonts, so to keep the reference numbers in scale with the adjacent text I entered in the "font-size" field:
         80%

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.

User Styles

Only a few hundred of the myriad of styles used by Second Site can be changed in the Stylesheets sections for Theme, Menu, and System. As described in my article on Customizing Themes, User Styles, which are entered in the Stylesheets > User section allow the advanced user to change the others.

User Styles require more knowledge of CSS than the options described above, 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 John Cardinal's Second Site support list has many helpful people who can assist. But if such things seem like Greek to you, you may prefer to stay with the options illustrated in the section 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, and are the ones I used in the following examples. 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:

• I wanted only the main page title, which uses the style "h1" to be centered, but other headers to be left justified. 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 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 I entered in User Style 6:

  	selector		other
  	h1		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 entered in User Style 7:

  	selector		other
  	ul.bull, #mainpage ul		list-style-image: url(brown-dot.gif);

I could have entered just the ul parameter, but I also wanted to number the children. Specifying only the ul parameter 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.

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

• I wanted to have a section header in a sans-serif font in my signature orange to use with the body of text pages, such as used to divide the sections on the main page. I planned on using the HTML tag h4 for these headers, so I entered in User Style 8:

  	selector		other
  	h4		font-family: Arial, Helvetica, Sans-serif; color: #B76600;

  
  
• I wanted the links within the boxes of the descendant and ancestor charts to behave as those in the rest of the site do, with no underline unless the reader hovers the mouse over the link, and separate custom colors for visited and unvisited links. Since the links in the charts are not controlled by the link settings described in the "Setting Colors, Fonts and the Like" section above, I created three user styles to control them. I entered in User Style 9:

  	selector		other
  	div.csb a, div.cmb a, div.cfb a		text-decoration: none; font-weight: bold; color: #b76600 !important;

  
  The three-part selector is to address the separate styles used in the subject, male, and female chart boxes. The "!important" term is added to override a built-in style specification that would otherwise take precedence. I entered in User Style 10:

  	selector		other
  	div.csb a:visited, div.cmb a:visited, div.cfb a:visited		color: #990000 !important;

  
  I entered in User Style 11:

  	selector		other
  	div.csb a:hover, div.cmb a:hover, div.cfb a:hover		text-decoration: underline;

Note that the three link styles (a, a:visited, and a:hover) must appear in this order to work properly. Also, note that parameters specified in earlier styles of the set do not need to be repeated unless they are to be changed; the later styles inherit those parameters from the earlier ones.

• I wanted to create a style to size and center the box at the bottom of my pages that contains links to the home page or my entire site, to the main page of this section of the site, and a "contact us" link. To do that I created an entirely new user style, which I called ".link-box," and defined it. I entered in User Style 12:

  	selector		other
  	.link-box		width: 400px; margin-left: auto; margin-right: auto;

  
  I then applied that style in the content section of my Main Page with <div class="link-box">...</div> tags.

The key in each of these examples (except the last one) is to identify the CSS parameter that Second Site uses to control 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.

Selecting Other Options

There are large number of options in Data, Pages, and Layouts sections by which you can customize various aspects of your sit. They are well worth scanning through to see if there are some changes you would like to make. Some alter the overall impression of the pages, while others control specific aspects of the way your data is presented. I list here a number that I found interesting, arranged 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 in the "Subject Lifespan Option" I selected:
         Lifespan on second line
  In both the "Spouse Lifespan Option" and "Index Lifespan Option" fields I selected:
         Lifespan on subject line
  In the "Subject Lifespan Format," "Spouse Lifespan Format," "Parent Lifespan Format," "Child Lifespan Format," and "Index Lifespan Format" fields I selected:
         (date - date)
  In the "Subject Date Format," "Spouse Date Format," "Parent Date Format," "Child Date Format,"and "Index Date Format" I selected:
         Aaa yy

• Pages > Page Sizes
  I decided to place only one person per page on my site. The primary reason is that my site is limited to people about whom I have something of merit to say. In some cases, that is quite a lot of text, together with photos in some cases, and lots of source citations. As a result, many pages are quite long. This produces a lot of pages, which can be an issue if you are uploading your site to a host for Internet viewing. One person per page has the added advantage that person's name is actually the page title, so if a reader emails me using the link at the bottom of the page the subject line will show the name of the person your reader was looking at. The large number of pages can be dealt with by compressing the site into an archive file before uploading and then uncompressing on the host. If you use John Cardinal's Family History Hosting service, Second Site's Publish feature does that for you automatically. On this screen, I entered in the "People per Page" field:
         1
  I checked the "Set Page Title to the Person's Name" box so that the email feature will include the name in the subject line. I selected in the "Person Page Sequence" field:
         By TMG ID
  I checked the "Static Page Assignments" box. This is important if you are going to place your site on the Internet, because it keeps the Person Page assignments from changing if you update your site with new people. If the page assignments change people who bookmark your site will end up on the wrong page when they return, and worse, search site results will direct readers to the wrong page until they have had time to fine the new pages.

• Layouts > Person Pages
  I wanted a little box with a note encouraging readers to contact me, and provide links to do that after every person. To do that I entered in the "Extra Person Bottom" field:
  
  <div class="link-box">
  <TABLE width="400" BORDER="2">
    <TR>
      <TD COLSPAN="3">
  <div align="center"> We encourage you to use
  the &quot;Contact Us&quot; link below if you are interested in
  the people shown here or to inquire about people in related
  lines not included.</div>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="33%">
  <div align="center"><a href="http://www.reigelridge.com" TARGET="_top">ReigelRidge Home</a> </div>
      </TD>
      <TD WIDTH="33%">
  <div align="center"><A HREF="main.htm">Main Page</A></div>
      </TD>
      <TD WIDTH="34%">
  <div align="center"> <a href="JavaScript:hemlink('ReigelRoots', 'reigelridge.com');"> Contact Us</a></div>
      </TD>
    </TR>
  </TABLE>
  </div>
  

This HTML code produces the table with the note and links seen at the bottom of each of my Person Pages. By placing it in this field the note appears after every person. Since I've gone to one person per page, that places it at the bottom of every page.

I wanted a line across the bottom of each Person Page, followed by a small note about how the pages were produced, and a copyright notice. I did that by checking the "Extra Footer Override" box, then adding in the "Extra Footer" field:

<hr>
<div align="center">For information about how these pages were produced, see <a href="http://tmg.reigelridge.com/About%20Our%20Pages.htm" TARGET="_top">About Our Pages</a>.
<p align="center">Copyright 2000-2009</p>
</div>

The "<hr>" term is the HTML code for a "horizontal rule." it produces the line. Following that is the text of the note about how the pages are produced, including a link to a page on my site that explains that. The final line is the copyright notice.

I also place here the codes for Google's amazing site tracking system, which tells me which pages have been visited, where the reader came from and went next, and much more. For details see Google Analytics. It's free, at least currently.

I don't like the person pages to have a "Person Page - 3" subtitle. So in the "Header Script" field I selected:
       No Page Number

• Layouts > Chart Pages and Layouts > List Pages
  I place the name entry in the "Extra Footer" field of these two screens as I do in the Layouts > Person Pages screen, to the line and notices appear at the bottom of these pages as well.

The function of the Layouts section is described more fully in my Customizing Themes and Layouts article.

Changing Second Sites's Standard Phrases

Many of the words and phrases that Second Site produces (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 > Name Strings
  I prefer that the indexes to display missing surnames as "(unknown)" rather than the default "(--?--)." So I edited the "Missing" field to read
         (surname 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. Because this string also is applied to given names, this will now work well if you have people in your site with missing given names.

• 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 edited 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 deleted the text in the "Person Page Name" field.

• Strings > Place Strings
  I like the place preposition "in" instead of "at," so I made that edited the "Default Place Preposition" field to read:
         in

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

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 the first two section so this article 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, 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 Site Icon image will be used for all pages. If you want different icons on some pages (you may want to use 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 wanted the site title to be centered vertically with the icon, so I made two changes on the Stylesheets > System > Site Icon screen. In the "float" field I selected:
        None
  In the "other" field I 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-2010