Second Site News #055

Person Entry Example

This is an example of using the features in Second Site 5 (SS5) to adjust the person entry. In prior versions of SS, the adjustments shown here would require a Custom Format, and Custom Formats require scripting expertise that is beyond the skill level of the average SS user.

It takes a lot of text to describe the steps, but the steps themselves are all relatively simple. If you follow along, you'll learn about adjusting the items in the Person Entry Sections list, and you'll also learn an easy way to handle User Styles that are distributed in email messages.

Let's start with a link to a page that shows the intended outcome: Thomas Joseph Lovett

On that page, the Family Explorer icon is the first item in the person entry, and it is followed on the same line by the subject's name and lifespan. That is not the usual arrangement. There are some other customizations, but for this example, we'll focus on the Family Explorer icon, the subject name, and the lifespan.

Here are the steps necessary to customize SS5 to produce the page shown.

If you want to follow along, you should create a new SDF file. If you decide you like the result, you can repeat the steps using your main SDF file.

1. The first step does not use any new features: we're just creating a new SDF file. Choose File > New to create a new SDF file. Use any file name you want for the new SDF file. Assign a site title, and set the database to your TMG project. If you can, set the People.Flag Filter to create a small site with only a few people. You may have to make the site a few times, and so it makes sense to minimize the time you have to wait for SS5 to make the site.

   For the time being, leave the Theme set to "Simple Blue". The technique will work with other Themes, but some of the User Styles (described below) may need tweaks if you are using a different Theme.

2. The first customization task is to arrange the Person Entry sections in a different sequence from the default. Go to the Pages.Person Entry section and arrange these list items in the order shown:
   • Family Explorer
   • Subject Name
   • Gender, ID, Lifespan

   Those should be the top three items in the list. You can arrange the items by clicking an item to select it and then click the up or down arrows beneath the list to move the selected item. You can also move items by dragging them with the mouse.

3. Double-click the "Gender, ID, Lifespan" item to open the "Edit Gender, ID, Lifespan" window, and then uncheck Show Gender and Show ID. Click [OK] to close the window.
4. We also have to add a "Person Entry Clear" item. This item will ensure that whatever follows the lifespan will start at the left margin.

   Click the "Add" icon beneath the Person Entry Sections list. In the "Choose Item Type" window, click "Person Entry Clear" and click [OK]. In the subsequent "Edit Clear Section" window, set the title to "After lifespan" and click [OK]. (The title doesn't matter; it's just a reminder for you.)

5. Move the new "After lifespan" item so that it immediately follows the "Gender, ID, Lifespan" entry:
   • Family Explorer
   • Subject Name
   • Gender, ID, Lifespan
   • After lifespan

If you stopped here and made the site, the results would not match the Demo site linked above. The Family Explorer icon would be at the top of the person page entries, but the items would not be on the same line. To get that effect, we have to add some Free Form User Styles.

Free Form User Styles are User Styles where you specify the CSS yourself, including the "selector" that determines which HTML elements are changed and the "parameters" that determine how the elements are changed.

In SS5, you can copy and paste Free Form User Styles. That makes it a lot easier to use User Styles that were written by someone else compared to SS4 and prior.

6. Using your mouse, select the text lines below:

   selector-1:
   .sect-fex
    
   parameters-1:
   float:left; margin-right:12px;
    
   selector-2:
   .sect-sn
    
   parameters-2:
   float:left; margin-top:0 !important;
    
   selector-3:
   .sect-ls:before
    
   parameters-3:
   content:", "
    
   selector-4:
   .sect-ls
    
   parameters-4:
   padding-top:2px; color:#888;
    
   selector-5:
   div.itp div.narr
    
   parameters-5:
   margin-top:0;

7. Go to the Stylesheets.User.Free Form.Style 1 section. Make sure that the "Style 1" section name in the list of sections is selected. Click it to make sure. You do NOT want the text cursor to be in one of the textboxes on the right; we are going to paste the text, but we do not want to paste into a textbox. We need to paste it into the section, and to do that, the section must be the focus, i.e., it must be selected.
8. Choose Edit > Paste from the menu or press Ctl-V.

   That will paste the User Styles into the textboxes on the right. SS5 will divide the text into the proper textbox pairs. Given there are five User Styles in the text above, SS5 will change ten textboxes, two per style.

   When SS pastes User Styles, it does not replace any existing values. It chooses unused entries.

That's it! It's time to make the site. Choose the File > Make Site command, and when it finishes, open the site in your browser. You may have to refresh the page in your browser (press [F5]), but once you do, you should see the same result as on the demonstration site.

Theme Adjustments

If you use this technique with a Theme other than "Simple Blue", you may find that the lifespan text does not align properly with the subject name text, or the lifespan text is not a suitable color. You can change the position and color of the lifespan text by altering one of the User Styles specified above.

selector-4:
.sect-ls
 
parameters-4:
padding-top:2px; color:#888;

In the text above, the padding-top value determines the vertical position of the text. If you increase the value, the text will move down the page. If you decrease it, it will move up the page.

The color value determines the color of the lifespan text. In the example, I changed it to "#888", a gray color, to make it less prominent than the subject name. If you need a hand selecting the color value, go to the Stylesheets.Theme.Colors, Backgrounds section. If you click on a color value there, SS will show the hex code for that color near the top of the window.

You can delete the parameter entirely if the lifespan should be the same color as the other text in the person entry:

selector-4:
.sect-ls
 
parameters-4:
padding-top:2px;

Downloads

Second Site is available via download only. See the Downloads page.

Purchases

For purchasing information, see the Purchases page.