Terry's Second Site Tips

Customizing Themes and Layouts

This page updated 5 May 2009

Version note: Applies to Second Site 2 & 3

My Second Site Overview article describes how to use Themes to control the "look" of your site, including colors, fonts, graphics, and more. This article describes some techniques for customizing the appearance produced by those Themes, or even to produce what amounts to an entirely custom appearance.

While it is possible to actually create Custom Themes, I do not recommend that. It is a challenging task, and in my view, unnecessary in light of the control offered with the methods described here.

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 this article.

Since many of the techniques described here involve setting and customizing Themes, we should pause a moment to be sure we understand them. In Second Site, Themes control the general "look" of the site - color schemes and graphics. They do this in two ways:

• They provide a set of instructions to the program for how to set a variety of properties, mainly styles, as described in the next section. In most cases the user can then modify those settings to further customize the site.

• They may include graphic elements; title graphics, backgrounds, and buttons, for example. Users can provide substitute or additional graphics, one example of which is described in the Customizing - Examples article.

Themes and Stylesheets

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):

• Body text is black, Times New Roman, regular size, left aligned, cream background

• Page title is the same, but orange, 36 pixels, italic, centered

• Subtitle is same as title, but Arial, extra large

• Section headers same as body, but Arial, orange, large

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 Colors and Background styles set by the Mint Swirl Theme:

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 other items 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. Some of the items have drop-down boxes from which you can pick an alternate value, and others require that you type in a new value. Figuring out just how to do that of course, can be a challenge. I have three suggestions if you cannot figure out how to make a change you what to try:

• Look at the Stylesheets Section of Help

• Look at my Customizing - Example article to see some of the values I changed to create my own site for some examples

• Subscribing to John Cardinal's Second Site support list, where John and other users are always ready to provide help

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

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 above. You need to first identify which style you want to modify, and then format the instructions for the change correctly. Some examples of how I used User Styles are shown in my Customizing - Examples 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.

User Styles 1 through 5 are designed to allow a knowledgeable user to construct their own 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 codes to make your desired modification in the "other" field.

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 arrows:

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:

• Layout – The "layout" itself controls how the parts of each a Second Site page are arranged on that page:

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.

• Frames – Some users prefer the "framed" arrangement which places the Main Page, Person Pages, Charts, and other "content" pages in a larger pane on the right, while the Indexes remain always visible in a narrow pane on the left. For an example, see my Sample webpages. To use this arrangement, choose "Side by Side" in the Frames drop-down. This feature applies to the site as a whole, and is available only on the "Default Layout" screen.

• Static Content – Allows you to add content that doesn't change, usually text, to each of the five parts of the page mentioned above in the Layout discussion. For example, if you want to add a copyright notice at the bottom of each page, you might enter that text in the "Extra Footer" section ("extra" means in addition to anything Second Site itself would place there, such as the compiler information visible in the sample pages at the top of this article). Content added on the Default Layout screen appears on all types of pages unless you check the corresponding "override" box on the screen for a specific type of page, in which case you can enter content that will appear only on that type of page. Some examples of my use of this feature to modify the look of my family history site are offered in my Customizing - An Example article.

• Page Scripts – Control exactly how each part of each type of page is assembled by Second Site. Reasonable choices are made by default, and most users will be satisfied with them. Adventuresome users can consult Help for a good explanation of this subject, and may want to explore other choices, or even create their own scripts. Like Layouts and Static Content, the Scripts selected on the Default Layout screen are inherited by each of the page types unless different choices are made for specific types of pages.

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.

Copyright 2000-2010