WUG_Style+Wiki+Content

include component="page" wikiName="siframework" page="WUG_Header"

=
The S&I Framework Wiki Theme handles all of the basic page layout and content styling for the S&I Framework wiki. However, there are times when additional styling may be needed for content within a page to call the user's attention to a key piece of information. Sticking to a few basic rules when creating and editing your content will help maintain a consistent look and feel across the wiki and keep your content looking clean and uncluttered, making it easier for users to find the information they are seeking.======

toc =Default Wiki Theme Styles= The following default styles are set for the S&I Framework wiki in the S&I Framework Wiki Theme. This default information is provided to help users maintain consistency when modifying styles within their content. The colors noted below are provided in hexadecimal (HEX) code to ensure consistency of color selection and display.


 * ~ Style Name ||~ Specs ||~ Example ||
 * Normal || * Font-Family: Arial, Helvetica, sans-serif (The system first attempts to use Arial, then Helvetica. If neither Arial nor Helvetica are available the system will use the first available sans-serif font.)
 * Font-Size: 13px
 * Font-Weight: Normal
 * Color: Hex #000000
 * Line-Height: 150% || This is the normal content style. ||
 * Heading 1 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.6em (160% of the Normal size)
 * Font-Weight: Normal
 * Color: #0092D6
 * Top Border: 1px width, Solid line, color #A0C3D7 || =Sample Heading 1= ||
 * Heading 2 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.3em (130% of the Normal size)
 * Font-Weight: Bold
 * Color: #0092D6 || ==Sample Heading 2== ||
 * Heading 3 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.1em (110% of the Normal size)
 * Font-Weight: Bold
 * Color: #0092D6 || ===Sample Heading 3=== ||
 * Heading 4 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.066em (100.66% of the Normal size)
 * Font-Weight: Normal
 * Color: #0092D6 || ====Sample Heading 4==== ||
 * Heading 5 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.033em (100.33% of the Normal size)
 * Font-Weight: Normal
 * Color: #0092D6 || =====Sample Heading 5===== ||
 * Heading 6 || * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.0em (100% of the Normal size)
 * Font-Weight: Normal
 * Color: #0092D6 || ======Sample Heading 6====== ||
 * Heading 6 - Intro Paragraph || The first Heading 6 on a page will be styled differently, as listed below, for use as an introductory paragraph. All other Heading 6 headings on a page will follow the default style shown above.
 * Font-Family: Arial, Helvetica, sans-serif
 * Font-Size: 1.2em (120% of the Normal size)
 * Font-Weight: Normal
 * Color: #B27800
 * Line-Height: 125% || Sample Heading 6 Introductory Paragraph ||

=Basic Rules for Styling Content= Before you click the //Style Text// icon in the Visual Editor, check the dropdown list of pre-defined styles and select a style from the list. The dropdown contains styles for all levels of Headings as well as Normal. The Heading styles display in the dropdown as they will appear in your page. || || Only call attention to the information that is most critical within your content. Setting styles on all information within a content section, such as Announcements, to bold, italics, red, and/or an increased font size, can make it more difficult for users to find the information they are seeking. Typically only a single change is necessary, such as Bold or Red. The example shows how messy too many styles can get. || =Announcements= When coloring or highlighting selected text in your content, use colors consistently by entering the HEX code for the color rather than selecting from the color wheel. The following colors are suggested for coloring and highlighting text:
 * ~ ||~ Rule ||~ Example ||
 * 1. || ==Use Pre-defined Styles First==
 * 2. || ==Limit Use of Bold, Italics, Color, Highlights, and Increased Font Sizes.==
 * **// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo diam at dui porttitor scelerisque. //**
 * ** //Cras laoreet malesuada congue.// Praesent laoreet semper turpis id rutrum. In viverra neque eget odio convallis ac dapibus leo rhoncus. **
 * ** Proin a risus leo, eu fringilla ipsum. Aenean diam justo, congue id commodo eu, ultricies vel turpis. Aenean arcu velit, venenatis vel dapibus eget, ultrices id lectus. **
 * //Nulla facilisi. Nam sed dui eros. Nunc a ante id elit tristique iaculis vitae in mi.//
 * //Curabitur sit amet gravida elit.//
 * //Sed cursus fringilla enim, quis fermentum ipsum pharetra vitae.//
 * //Quisque et felis felis.//
 * **Nullam imperdiet rhoncus mauris molestie mollis.** ||
 * 3. || ==Color and Highlight Text Consistently==
 * Red Text: #CC0000
 * Blue Text: #0033CC (Because text links are colored #0000FF it is best to select a blue slightly different from the default link color.)
 * Yellow Highlight: Set the background color to #FFFFCC. || ||
 * 4. || x || [[image:]] ||
 * 5. || x || [[image:]] ||
 * 6. || x || [[image:]] ||

include component="page" wikiName="siframeworkdemo" page="space.template.inc_contentleft_end"