New User Guide - Part 3: Page Styles

Step 1: To access the edit styles page, click the personal site settings button on the left of the user settings page and then from the dropdown menu select Style Manager.

Step 2: If you want to select a preset style, make sure you are on the Preset Styles tab and pick one of the styles from the dropdown. Make sure to click Apply to Preview to see the style selection in the preview window.

Note: If you want to keep any style changes you make in the style editor, you must click the Save button before leaving the page. Otherwise your changes will be cancelled.

Step 3: You can also modify your existing style choices by clicking the Custom Style tab. Some things to note while creating a custom style:

• Select the element you want to modify. If you are unsure what the element is, refer to the preview pane on the right. (See below for a complete list of elements and descriptions)
• For any element other than the page, you can either set the type 1 or type 2 style. Later you can select one of these two styles to apply to any given module. (Having two different styles for your modules adds variety to a page)
• For any color properties you can either use the color picker or you can type in a hexadecimal color value. For more on color values you can check here.

• Page: This is the background of your page. If you add an image you can select if it should be fixed or will scroll with the page.
• Module Box: This is the container for any module on your page including it's background and border color. Currently we do not allow images as backgrounds for the modules but we may change this if we get enough feedback. Let us know: Use the Site Feedback page to tell us if you think this feature should be added.
• Title Bar: The title bar appears at the top of all modules. Some modules allow you to turn this off in public mode.
• Main Heading: Main headings are only used once on the page and are a large font size.
• Sub Heading: Sub headings are smaller than main headings and used more often.
• Normal Paragraphs: Any plain text in a module is considered a normal paragraph.
• Emphasized Text: Emphasized text is used to highlight content on the page. You can change the colour, style or both to help it to contrast with your normal text.
• Hyperlinks (normal): Any link that has not been visited is a normal hyperlink. Note: Links that process information will always be un-visited as they act as buttons.
• Hyperlinks (visited): Typically visited hyperlinks are a different colour than normal hyperlinks but that is only a convention. There is nothing wrong with setting them to be the same as the normal hyperlinks if you like.
• Hyperlinks (hover): Usually you want some sort of change when the user hovers over a link. An underline or colour change is typical. Note: Avoid doing something that will cause the link to change size or shift as it may make it difficult to click. For example don't make your hover style change the font type etc. from the normal link.
• Databox (view mode): Most information in your modules will be in this element, this also includes large text areas like blog messages, bio and so on. It is recommended that you make the style for this element as easy on the eyes as possible if you want people to be able to read it.
• Databox (edit mode): When there is an area in a module that a user can enter data into this style will be used. This style is not used often.
• Bulleted Lists: Any bulleted list will use this style.
• Dividing Lines: Any horizontal lines will use this style.