Terry's Second Site Tips

Customizing Themes and Layouts

This page updated 13 Jul 2011

Version note: Applies to Second Site 3 & 4

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

• Mulitple choice – font attributes, images, and a few others have a limited set of valid values. They are set by making a choice from the drop-down box in that field.

• Size – attributes related to size or width, such as margins, padding, borders, and the like, requre a value be typed in. Borders are entered as numbers alone, which are interpreted as pixels. Margins (space outside the border) and padding (space inside the border) can be entered as pixels or ems (the width of an uppercase letter M in the current font). The units must be included, as 3px or 2em, for example.

• Color – colors, for fonts, borders, backgrounds, and other elements, must be entered. See the next section for details and the tools available to assist in selecting them.

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 attirbute not included in the Stylesheets > System > Site Icon section. So in the Other field I entered:

vertical-align: middle;

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

• Look at the Stylesheets Section of Help. Pressing F1 when the main Stylesheets section (a blank page) is open brings up a Help page which provides a good description of the various style elements and their use. Pressing F1 from other Stylesheets sections opens Help pages more specific to each section.

• To see some examples, look at my Customizing - Example series of articles to see some of the values I changed to create my own site.

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

Editing Colors

The offical 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 show 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:

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

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.

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 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-2012