Overview
This section includes subsections for editing style properties. The help page for each subsection indicates the part of the site to which it applies. This page describes general information about editing style properties.
Style Properties
Style properties affect the CSS rules that GedSite writes to the gs-site.css file.
Styles are split into subsections. Typical subsections include a selector property followed by a set of properties that define the attributes assigned to any HTML elements that match the selector.
Selector
Most subsections include a selector property that is read-only and shows the pattern that selects the elements that will be styled by the attributes in the subsection.
Most selectors are simple class-based selectors. For example, the selector for the Styles.Image.Container section is .gs-img. The attributes in that section apply to the DIV element that encloses an embedded image. The DIV is assigned the class gs-img:
<div class="gs-img"> ... <div>
background-color
The background-color property accepts a CSS color value. It assigns a color to the background of an element. The default value varies. Many color properties use a reference value that refers to a color defined in the Theme.Colors, Backgrounds section.
background-image
The background-image property accepts a filename. It assigns an image to the background of an element. The default value varies. See the Images section below.
border-width
The border-width property accepts a number value, the width of the border in pixels. Typical values are zero and one. When the border-width is zero, there is no visible border.
border-style
The border-style property accepts one of the values in the pull-down menu. It controls the style of the element's border. The default value is solid.
border-color
The border-color property accepts a CSS color value. It controls the color of the element's border. The default value varies. Many color properties use a value that refers to a color defined in the Theme.Colors, Backgrounds section.
box-shadow
The box-shadow property accepts a text value. You must supply a valid CSS box-shadow value. The default is usually empty, i.e., the element will not have a box-shadow.
color
The color property accepts a color value. It controls the color of the element's text. The default value varies. Many color properties use a value that refers to a color defined in the Theme.Colors, Backgrounds section.
font-family
The font-family property accepts one of the values in the pull-down menu. You may also enter one or more font-family names. It controls the font family for the element's text. The default value varies.
font-size
The font-size property accepts a text value. It controls the size of the element's text. If you enter a value, make sure you enter a unit if the value requires one. So, for example, "small" is valid, there is no unit expected, but "10" is not valid because a numeric value requires unit such as "px" for pixels. The default value varies.
font-style
The font-style property accepts one of the values in the pull-down menu. It controls the font style of the element's text. The usual value is normal.
font-weight
The font-weight property accepts one of the values in the pull-down menu.It controls the font weight of the element's text. The usual value is normal.
padding-top
The padding-top property accepts a text value. It controls the space between the element's top border (if any) and the content of the element. If you enter a value, make sure you enter a unit. So, for example, "10" is not valid because the value requires a unit such as "px" for pixels. The default value varies.
padding-left
The padding-left property accepts a text value. It controls the space between the element's left border (if any) and the content of the element. If you enter a value, make sure you enter a unit. So, for example, "10" is not valid because the value requires a unit such as "px" for pixels. The default value varies.
padding-bottom
The padding-bottom property accepts a text value. It controls the space between the element's bottom border (if any) and the content of the element. If you enter a value, make sure you enter a unit. So, for example, "10" is not valid because the value requires a unit such as "px" for pixels. The default value varies.
padding-right
The padding-right property accepts a text value. It controls the space between the element's right border (if any) and the content of the element. If you enter a value, make sure you enter a unit. So, for example, "10" is not valid because the value requires a unit such as "px" for pixels. The default value varies.
text-align
The text-align property accepts one of the values in the pull-down menu. It controls the alignment of the element's text. The usual value is "Inherit": the the text will be aligned the same way as the text in the element's parent (enclosing) element.
other
The other property accepts a text value. You may use it to add any valid CSS attribute that to you want to assign to the elements matched by the selector. Unlike the other properties:
- You must enter the CSS attribute name as well as the value.
- You may enter multiple attributes if desired.
- You must follow CSS syntax rules, i.e., you must supply the ":" between the attribute name and the value, and if you enter more than one value, you must divide them with the ";" character.
Images
Several style property names end in "-image", such as "page-background-image". To use an image file that is not supplied with GedSite:
- Place a copy of the image file in the
stsubfolder of the Input (-i) folder. Create thestsubfolder if it does not exist. Use a PNG, JPG, or GIF file only. - Enter the name of the file in the style property. Do not include the file extension.
Reference Values
Some properties are set to reference values where the text begins with "@" and is followed by a key that refers to another property. So, for example, when a color value is set to @theme-backcolor.border-color, the property will use the value defined for the border-color property in the Colors, Backgrounds subsection under the Themes section.