Overview
The User Section contains stylesheet rules called User Styles that you can use to customize the appearance of HTML elements created by Second Site. By entering a CSS selector value, you indicate which elements should be styled.
There are 20 User Styles sections divided into two groups:
- There are five Style sections in the Structured sub-section. Structured User Styles have user interface controls to manipulate a set of commonly-used CSS parameters.
- There are fifteen Style sections in the Free Form sub-section. Free Form User Styles have paired text properties for entering CSS selectors and parameters.
Adjusting CSS parameters for HTML created by Second Site is easier if you understand the general structure of that HTML. See the HTML Page Structure Help page.
Description
All User Style sections have a Description property that initially contains the text "Used for rule specified by the user". When you add or modify User Styles, consider replacing that text with a note to remind yourself of the purpose or use of the User Style. Use the Text Editor to read or enter more than one line of text.
Structured User Styles
Structured User Styles include more than a dozen properties for controlling common CSS parameters. Use one of these User Styles when you are defining a few parameters to style text that you supply.
Example
For example, let's assume you have some text in one or more event memos and you want to style that text with a border and italic text. You are willing to add HTML to these memos because you only include the event in Second Site output.
Here's how to enter the text in the event memo:
<p class="u1">The event memo text.</p>
Here's how to set the properties in User Style 1:
| Property | Value and Comment |
|---|---|
| selector | .u1
Selector terms that start with a period apply to any HTML element that is assigned the class specified. In this case, the rules in this section will be applied to any HTML element with class="u1". |
| border-width | 1
Setting a border-width that is greater than zero will add a border to the element. |
| font-style | Italic
Sets the text to italic. |
After you rebuild your site, the event memo text will be in italics and in a paragraph with a border.
Free Form User Styles
Each Free Form User Style section includes ten selector text boxes paired with parameter text boxes: selector-1 is paired with parameters-1, selector-2 with parameters-2, etc. Use a pair of these properties when you are overriding CSS created by Second Site or when you want to supply CSS that you cannot specify via Second Site's style property controls.
Use the Text Editor to read or enter more than one line of text in any of the selector or parameter properties.
The User Styles in any particular section do not have to be related to each other, but if you have more than a few User Styles, consider grouping them that way. For example, all the styles in the Free Form Style 1 section might be related to Custom Pages, all the styles in the Free Form Style 2 section might be related to Person Pages, etc.
Notation
When describing User Styles on other Help pages, in e-mail messages, etc., the notation "selector-N" and "parameters-N" indicates a pair of properties such as selector-1 and parameters-1. The N indicates that you can use any available pair of properties. Which pair you choose is up to you and depends on whether you have any existing User Styles or not.
The Second Site Copy and Paste commands provide special treatment for selector-n/parameter-n properties.
Example
Let's assume you would like to change the appearance of H2 elements that appear in the content of the User Pages Page Set. Custom pages, for example, are in the User Pages Page Set.
Let's make the H2 elements have white text on a blue background.
Here's how to set the properties in a Free Form User Style:
| Property | Value and Comment |
|---|---|
| selector-1 | #userpages #content h2
Selectors that start with a pound-sign (#) apply to any HTML element that is assigned the ID specified. When multiple terms are specified in sequence, the terms restrict the rule by selecting nested elements in the same sequence. In this case, reading right to left (reverse order), the rules in this section will be applied to h2 elements inside an element with ID "content", and that has to be inside an element with ID "userpages". The "userpages" ID only applies to pages from that Page Set, and id="content" is only used for the main content of a page. As a result, the rule only applies to H2 elements in the main content portion of User Pages. |
| parameters-1 | background-color: #0000ff; font-style: italic; When you use a "parameters" box to enter CSS statements, you must follow CSS syntax rules. (With flexibility comes responsibility.) That's a little harder than using Second Site's property controls, but you can enter whatever CSS you need. In this example, the "#0000ff" is the color code for blue. You have to use color codes, not color names, in User Styles. Second Site does not convert color names to color codes in User Styles. |
Use the Text Editor to edit the textboxes so you can see the entire text or enter multiple lines of text.
If you are not comfortable with CSS, but you would like to make a style change that you cannot achieve using the Second Site style property controls, ask for Help on the Second Site mailing list.
This page last changed on 05 Feb 2016.