Terry's Second Site Tips

Customizing Your Site - Examples for User Styles

This page updated 13 Jul 2011

Version note: Applies to Second Site 3 & 4

This is one of a group of articles providing examples of how I used the capabilities of Second Site to customize my site as I preferred. This article deals with the use of the User-Style section to make advanced modifications to my selected Theme. My objective was to match the appearance of the other pages on my personal website, which are very similar to those on this 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.

Other articles in this series can be found from my Customizing Your Site - Examples page.

Background

Since I was essentially creating my own Theme, I started with the Plain Theme and then made adjustments to the StyleSheets to create the look I want. More basic modifications of styles are discussed in my Examples for Stylesheets article, which discusses the hundreds options available to customize the styles used by Second Site to format your site. There are many others that cannot be changed there, but advanced users can modify them in the Stylesheets > User section, as described below. You can also create your own styles and use them in the various text fields you use to add material to your site. While you may not want to create the same look I did, perhaps this list will offer some ideas of interest, or suggest how to achieve a particular result you have in mind.

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 other articles in this series.

Using User Styles

User Styles 1 through 5 are designed to allow a user to apply a fixed set of style parameters to either as standard style used in Second Site, or to your own custom styles. User Styles 6 through 20 are intended to allow a user to apply any parameter, not just those offered on Styles 1 through 5.

Using either set, you specify which style you are modifying by entering the name of the style in the "selector" field. If you are making the same modifications to several styles, you can enter more than one in the same field, separated by a coma and space.

The key challenge in using User Styles to modify the standard styles is identifying the CSS parameter that Second Site uses to control the portion of the web page you want to change. I have found the "Inspect Element" feature in my Opera browser to be most helpful. To use it, open a page in your site containing the element you want to modify, and select the text or other element. On the right-click menu, choose Inspect Element, and a window opens with details of the codes used by that element, and a pane on the right with all the CSS styles that apply to that element.

If you prefer to use the FireFox browser, as similar function is available if you install the Web Developer add-on. Google Chrome has a similar function. Internet Explorer has a Developer Tools function that opens with the F12 key, but it seems to be less capable. Use of one of these tools is highly recommended if you plan to use User Styles.

Using Styles 1 through 5, you choose the attribute(s) you want to modify from those listed, and enter a value for it. In some cases, you can select from a drop-down list. In Styles 6 through 20 you enter the name of the attribute, followed by the value, in the "parameters" field. Each page in Styles 6 through 20 accommodates up to ten such pairs of selectors and parameters. If you are modifying several parameters for the same style, you can enter them in the same parameters field, separated by a space or a carriage return.

For guidance on formatting the entries in both the "selector" and "parameters" fields, consult the examples below.

Examples

The following are some User Styles I used for my family history pages. They illustrate the required format for entries, and may also suggest some modifications that you might find useful.

• User Style 1:
  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 the "Description" field:
        Section headers - set font and color
  and in the "selector" field:
        h4
  and set the "color" field to:
        theme:backcolor.link-color
  and in the "font-family" field selected:
        Arial, Helvetica, Sans-serif

Since the change above required only attributes offered in User Styles 1 through 5, I used one of them for this change. But the others required use of other attributes, so I used the second group, User Styles 6 through 20, for them.

• User Style 6
  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 the "Description" field:
        List bullets - set color
  and in the "selector-1" field:
        ul.bull, #mainpage ul, #listpages ul, #userpages ul
  and in the "parameters-1" field I entered:
        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 and some custom pages, I added the other three terms to change them as well. (Thanks to Alison O'Neill for the tip on how to accomplish this.
  

• User Style 7
  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 the "Description" field:
        Chart Links - set to match other links
  and entered in the "selector-1" field:
        div.csb a, div.cmb a, div.cfb a
  The three-part selector is to address the separate styles used in the subject, male, and female chart boxes. In the "parameters-1" field I entered:
        text-decoration: none;
        font-weight: bold;
        color: #b76600 !important;
  The "!important" term is added to override a built-in style specification that would otherwise take precedence. In the "selector-2" field I entered:
        div.csb a:visited, div.cmb a:visited, div.cfb a:visited
  and in the "parameters-2" field:
        color: #990000 !important;
  and in the "selector-3" field:
        div.csb a:hover, div.cmb a:hover, div.cfb a:hover
  and in the "parameters-3" field:
        text-decoration: underline;
  The three link styles (a, a:visited, and a:hover) must appear in this order to work properly. The 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. Note that since all these parameters are available in User Styles 1 through 5, I could have used three successive pages in that section instead.

• User Style 8
  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 of my entire site, to the main page of the family history 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 the "Description" field:
        Custom box - set up
  and in the "selector-1" field:
        .link-box
  and in the "parameters-1" field:
        width: 400px;
        margin-left: auto;
        margin-right: auto;
  to set the width of the box and center it. I then applied that style in the Extra Footer sections of my pages with <div class="link-box">...</div> tags, and entered HTML statements for the table and links between them. For an example of the result, see the bottom of this page in my family history site.

• User Style 9
  I created a legend below some of my maps to explain the meaning of the various lines I placed on the maps. I needed a sample of each colored line for that legend, so I entered in the "Description" field:
        Map Legend - set up lines
  and in the "selector-1" field:
        div.mapline
  then set the size of the line sample, and the colors of each sample by entering in the "parameters-1" field:
        height: 3px; width: 50px; }
        div.maplinered { background-color: red }
        div.maplinegreen { background-color: green }
        div.maplineblue { background-color: blue }
        div.maplinedark_violet { background-color: #9400D3 }
        div.maplinesienna { background-color: sienna }
        div.maplinegoldenrod { background-color: goldenrod }
        div.maplineblack { background-color: black
  I applied these styles in the "text" field of a Content Item-Text user item that a placed under the Content Item-Map user item in the custom page I used to hold the map. The line segment itself is created with code like this:
        <div class="mapline maplineblue"></div>
  which would add the blue line. For a sample of the result, see this page in my family history site. For more on how to use user items to create custom pages, see my article on Adding Page Content.

• User Style 10
  I made two modifications to the Indented Descendant Charts (ver. 3.4 and later) on my site. I wanted to add a bit of space between the generation number and name of each person, and use a different background color than I used for other charts on the site. To do that, I entered in the "Description" field:
        Indented Charts - add space before gen # & set background to white
  and in the "selector-1" field:
        .cgn
  and to add two pixels of space after the generation number, in the "parameters-1" field I entered:
        padding-right: 2px;
  To change the background color, in the "selector-2" field I entered:
        .chartinddesc
  and in the "parameters-2" field:
        background-color: white
  Note that since this second parameter are available in User Styles 1 through 5, I could have used one of them instead for this selector, but I preferred to keep both changes related to the Indented Chart together.

• User Style 11
  Second Site has a provision to add legends to ancestor and descendant charts. But I preferred to create my own legends in order to format them exactly as I wanted them to appear. To do that, I created two custom styles to format samples of the text that appears in the chart, and modified two standard styles. I first created a style for the text to match those names that appear as links, by entering in the "Description" field:
        Chart Legend styles
  and in the "selector-1" field:
        .nic
  and in the "parameters-1" field:
        color: #b76600;
        font-family: Arial;
        font-weight: 700;
        font-size: small;
  To create as style to match those names that are not links (for those people in the chart who are not included in the site), in the "selector-2" field I entered:
        .nib
  and in the "parameters-2" field:
        color: #202020;
        font-family: Arial;
        font-weight: 700;
        font-size: small;
  I used the standard legend style for my custom legend, but wanted it to be centered, so in the "selector-3" field I entered:
        .legend
  and in the "parameters-3" field:
        margin-right: auto;
        margin-left: auto;
  To separate the two boxes in the legend a bit, I entered in the "selector-4" field;
        .idbase
  and in the "parameters-4" field:
        margin-right: 25px;
  For an example of the result, see this page in my family history site.
  

• User Style 12
  I set the [LIND:]...[:LIND] codes to have substantial margins (see Customizing Your Site - Examples for Stylesheets), but when I use the same codes in my Research Note tag, which appears in a Narrative Panel with a border (see my Tag Groups article), these large margins are not appropriate. To override that setting, I entered in the "Description" field:
        Over-ride LIND settings in ResearchNote
  and in the "selector-1" field:
        div.panel-text .tmglind
  and to add two pixels of space after the generation number, in the "parameters-1" field I entered:
        margin-left: 1em;
        margin-right: 1em;

• User Style 13
  I use a Table Panel for my links to the Family Introduction page for each member of the family, as described in my Flag Events and Tag Groups articles. Because this Tag Group is a Table Panel blank space is automatically provided at the top of the Table, which would create a blank line between the section title and the link itself. To eliminate that space and properly space the bottom of the item, I entered in the "Description" field:
        Remove top margin from Family Background
  and in the "selector-1" field:
        table.family-background
  and in the "parameter-1" field:
        margin-top: 0;
        margin-bottom: 1em;

While each of these examples is specific to my own preferences in how my site should appear, hopefully the offer some suggestions for changes you might want to make in your own site.

Copyright 2000-2012