~[wc:commonscripts]
~[wc:admin_header_css] ~[text:psx.html.admin_reports.runreports.start_page] > PowerSchool Customization ~[wc:admin_navigation_css] ~[SetPostValue:tab=html]

# PowerSchool Customization

~[x:insertfile;tabs.html]

## Languages of the Web

There are three basic languages that define a web pages content, styling, and functionality.

- HTML - Hypertext Markup Language. This is the language that defines what is displayed in a web page.
- CSS - Cascading Style Sheets. This is the language used for describing the look and formatting of an HTML document.
- JavaScript - This is a programming language used to create interactive effects within web browsers. This is not the same as Java.

This page focuses on HTML, but it is important to understand that CSS and JavaScript are also embedded in many of the HTML files that you view.

## Basic Structure

The following is an example of a very basic HTML document.

- The DOCTYPE declaration defines the document type
- The text between <html> and </html> describes the web document
- The text between <head> and </head> contains meta-data about the file as well as links to external resources
- The text between <body> and </body> describes the visible page content

## HTML Tags - Defined

HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>Content</tagname>

- HTML tags normally come in pairs like <p> and </p>
- Self-closing or standalone tags have no closing tags (<br/> <hr/> <img/>)
- The first tag in a pair is the opening tag, the second tag is the closing tag
- The closing tag is written like the opening tag, but with a slash before the tag name

## HTML Attributes

- HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes come in name/value pairs like: name="value"
- Tags may have multiple attributes

Examples of attributes `

    <div id="uniqueIdentifier">

    <span class="classValue">

    <input type="text" name="inputName">

` id and class are commonly used attributes in HTML.
They are used by JavaScript and CSS to identify elements and add style and functionality to web pages.

- id attributes are used to uniquely identify an element within an HTML document. No two elements should ever have the same id in one document
- class attributes to identify 1 or more elements within an HTML docuement.

## Heading Tags

HTML headings are defined with the <h1> to <h6> tags:
`<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>`

# Heading 1

## Heading 2

### Heading 3

## Links

HTML links are defined with the <a> tag:
`<a href="http://google.com">Link me to Google</a>` Link me to Google
The link address is specified in the href attribute.

## Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes: `<img src="images/html/mountain.jpg" alt="mountain" width="120" height="100" />` Attributes

- src - Relative path to image file.
- alt - Specifies alternate text if image cannot be displayed.
- width - width in pixels
- height - height in pixels

Only the src attribute is required.

## Comments

Comment tags <!-- and --> are used to insert comments in HTML.
Comments are not displayed by the browser, but they can help document your HTML. `<!-- Write your comments here -->`

## Ordered and Unordered Lists

Unordered HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. `

    <ul>
    	<li>Item 1</li>
    	<li>Item 2</li>
    	<li>Item 3</li>
    </ul>

`

- Item 1
- Item 2
- Item 3

Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers. `

    <ol>
    	<li>Item 1</li>
    	<li>Item 2</li>
    	<li>Item 3</li>
    </ol>

`

1. Item 1
2. Item 2
3. Item 3

## HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.
Block level elements normally start (and end) with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <a>, <img>
`

    <div style="background-color:black; color:white; margin:20px; padding:20px;">
    	<h2>Header Text</h2>
    	<p>
    		This text is contained within a paragraph tag.
    		The paragraph tag is a block level element.
    		Therefore, its contents will be rendered with
    		a new line preceding and following the content.
    	</p>
    </div>

`

### Header Text

This text is contained within a paragraph tag. The paragraph tag is a block level element. Therefore, its contents will be rendered with a new line preceding and following the content.

The HTML <div> Element
The HTML <div> element is a block level element that can be used as a container for other HTML elements.
The <div> element has no special meaning. It has no required attributes, but style and class are common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.
The HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.
When used together with CSS, the <span> element can be used to style parts of the text.
`<H1>Demonstration of an <span style="color:green">inline</span> element within a block element</H1>`

# Demonstration of an inline element within a block element

## Tables

Tables are HTML elements commonly used to organize and display data.
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
`

    <table>
    	<thead>
    		<tr>
    			<th>Student</th>
    			<th>Grade Level</th>
    			<th>Date of Birth</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Brandon Adair</td>
    			<td>12</td>
    			<td>12/13/1996</td>
    		</tr>
    		<tr>
    			<td>Jane Williams</td>
    			<td>8</td>
    			<td>5/8/2000</td>
    		</tr>
    		<tr>
    			<td>Jillian Bordeaux</td>
    			<td>1</td>
    			<td>9/6/2007</td>
    		</tr>
    	</tbody>
    </table>

`

Student | Grade Level | Date of Birth
--- | --- | ---
Brandon Adair | 12 | 12/13/1996
Jane Williams | 8 | 5/8/2000
Jillian Bordeaux | 1 | 9/6/2007

See the Tables section of the documentation for more information on using tables in PowerSchool

## Forms

HTML forms are used to pass data to a server.
A common form attribute is the action attribute.
The action attribute defines the page which will display once a form has been submitted. Forms contain input elements which allow users to enter data or select from pre-defined options. `<form action="submitToThisPage.html">
Input elements go here.
</form>
`

Text Elements
<input type="text"> defines a one-line input field that a user can enter text into: `First Name <input type="text" name="first_name" value=""/>` First Name

Password Elements
<input type="password"> defines a password field:
The characters in a password field are masked (shown as asterisks or circles). `Password <input type="password" name="password"/>` Password

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: `Gender
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female` Gender Male Female

Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
`Race<br/>
<input type="checkbox" name="race" value="white"/>White
<input type="checkbox" name="race" value="black"/>Black / African American
<input type="checkbox" name="race" value="asian"/>Asian
<input type="checkbox" name="race" value="pac"/>Pacific Islander
` Race
White Black / African American Asian Pacific Islander

Dropdown (Select Element)
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list. `

    Lives With
    <select name="livesWith">
    	<option value=""></option>
    	<option value="momAndDad">Mother and Father</option>
    	<option value="mom">Mother</option>
    	<option value="dad">Father</option>
    	<option value="guard">Guardian</option>
    </select>

` Lives With
The text specified in the value attribute of a selected option is the value that will be sent to the server.
The text between the opening and closing <option> tags is the text that will be displayed to the user.

Textarea Element
The <textarea> tag defines a multi-line text input control.
The rows and cols attributes define the size of <textarea> element. `Teacher Comments
<textarea name="teacherComments" rows="4" cols="70"></textarea>` Teacher Comments

Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action attribute.
A value attribute can be added to a element to define the text of the button. If no value is defined, the default value is 'Submit'. `<input type="submit" value="Update Student Data">`

Hidden Input
<input type="hidden"> defines a hidden input.
Sometimes, data needs to be submitted in a form with a specific value that the end-user never needs to see or change. In this case, we can use a hidden input. `<input type="hidden" name="hiddenData" value="Data to send secretly">`

See the Forms reference for details about using forms within PowerSchool

## PS HTML

PS HTML is PowerSchool's special brand of HTML which allows you to add special codes and commands to interact with your server and the data in your PowerSchool database.
See the PS HTML reference for details about using PS HTML.

## Cascading Style Sheets (CSS)

## CSS Basics

What is CSS

- CSS stands for Cascading Style Sheets.
- Styles define how to display HTML elements

CSS Syntax
Styles are achieved by defining CSS declarations. There are two parts to a CSS declaration:

- Property - Identifies which feature will be styled
- Value - Describes how the feature will be styled

In a Declaration, the property and value are separated by a colon. In the following example, "color" is the property, and "red" is the value. `color:red` Declaration Blocks consist of multiple declarations contained within curly braces. Each declaration is separated by a semicolon. `

    {
    	color:red;
    	margin:10px;
    }

` A Ruleset consists of a declaration block preceded by a Selector.
A selector is the instruction in a css ruleset that tells the browser which elements to 'select' for styling.
The selector in the following example is "H1". This ruleset indicates that all <H1> tags will be styled with the associated declarations. `

    H1{
    	color:red;
    	margin:10px;
    }

`

## Types of Styles

There are three types of CSS styles

- Inline - Written directly in the tag in the HTML document
- Embedded - Embedded in the head of the HTML document
- External - Written in a separate document

Inline styles affect only the element they are applied to. `<H1 style="color:green">Heading Contents</H1>` Embedded styles affect only the elements on the page in which they are embedded. `

    <style type="text/css">
    	H1{
    		color:green;
    	}
    </style>

` External styles are written in a separate document and can be linked to multiple HTML documents. `<link rel="stylesheet" type="text/css" href="myStylesheet.css"/>`

## A Closer Look at Selectors

The following table contains a list of the most common selectors. A complete list is available at w3schools.com

Selector | Example | Description
.class | .even | Select all elements with class="even"
#id | #studentName | Select the element with id="studentName"
element | H1 | Select all <H1> elements
element,element | H1,p | Select all <H1> elements and all <p> elements
element element | div p | Select all <p> elements that are children of <div> elements

## Commonly Used Properties

The following table contains a list of some common CSS properties. A complete list is available at w3schools.com

Property | Description | Example
background-color | Sets the background color of an element | red, #ff0000, rgb(255,0,0)
border-width | Specifies the width of the border | thin, medium, thick, 1px
border-style | Specifies the style of the border | solid, double, groove
border-color | Specifies the color of the border | red, #ff0000, rgb(255,0,0)
border | Sets border-width, border-style, and border-color properties in one declaration | 1px solid black, thin groove red
display | Specifies how a certain HTML element should be displayed | inline, block, none
padding | Sets the amount of space between a container and is child elements | 5px, 3pt, 2cm
margin | Sets the amount of space around an element | 5px, 3pt, 2cm
text-align | Specifies the horizontal alignment of text | left, right, center
text-decoration | Specifies the decoration added to text | underline
font-size | Specifies the font size of text | small, medium, large
font-style | Specifies the font style for text | italic
font-weight | Specifies the weight of a font | normal, bold
font-family | Specifies the font family for text | Times New Roman, Arial, Verdana
width | Sets the width of an element. It sets the width of the area inside the padding, border, and margin of the element | 20px, 50%
border-radius | This property allows you to add rounded borders to elements -webkit-border-radius (Chrome & Safari) -moz-border-radius (Firefox) border-radius (IE) | #px
box-shadow | The box-shadow property attaches one or more drop-shadows to the box. -webkit-box-shadow (Chrome & Safari) -moz-box-shadow (Firefox) box-shadow (IE) | 10px 10px 5px #888888; (h-shadow v-shadow blur spread color)

Visit cssmatic.com to find easy-to-use tools for generating border-radius, box-shadow, and more.
Note: Colors can be displayed in a number of ways in HTML and CSS

- Name - red
- Hexadecimal Value - #FF0000
- RGB Value - rgb(255,0,0)

Here is a link to a helpful site for choosing HTML colors.

## Inheritance

When defining a rule for an element, all child elements will Inherit that rule as well.
In the following example, the <span> tag inherits the style (color:blue) from its parent - the <div> tag. `

    <div style="color:blue">
    	Text in parent tag.
    	<span>Text in child tag.</span>
    </div>

`
Text in parent tag.
Text in child tag.

## Specificity

Often times, multiple styles may refer to the same element in an HTML document. It is important to understand which style declarations will be applied when this situation arises. When multiple rules apply to a single element, Specificity is used to determine which rule will apply.
Below is s list of css selection methods in order of specificity.
Methods at the top of the list are considered more specific and will override methods farther down the list.

1. Inline Style Definition (<span style="font-weight:bold">)
2. ID Selector (#idValue)
3. Class Selector (.className)
4. Tag Name Selector (div, span, h1, etc...)

## Print Styles

Often, the CSS rules must differ between content rendered on the screen and the printed result. The following rule will prevent buttons from displaying in the printed result of a page. `

    @media print{
    	button{
    		display:none;
    	}
    }

`

## Styling in PowerSchool

Styling pages in PowerSchool becomes much easier by using classes that already have rulesets applied in the default style sheet. The default style sheet is referenced on existing pages and can be referenced in custom pages as follows. `<link href="/images/css/screen.css" rel="stylesheet" media="screen">` Buttons `<a class="button">Styled as a Button</a>` Styled as a Button
Rounded Containers `

    <div class="box-round">
    	<H2>Header</H2>
    	<p>
    		The box-round class creates the rounded box.<br/>
    		All H2 tags which are children of an element with the class of box-round will have a gray background.
    	</p>
    </div>

`

## Header

The box-round class creates the rounded box.
All H2 tags which are children of an element with the class of box-round will have
a gray background.

Collapsible Content
`

    <h2 class="toggle expanded">Collapsible Div</h2>
    <div>
    	Put collapsible content in a div immediately following the element with the "toggle" class.
    </div>

`

## Collapsible Div

Put collapsible content in a div immediately following the element with the "toggle" class.
Tabs
Add the "tabs" class to an unordered list to implement PowerSchool's tabbed navigation.
The list item (li) containing the currently selected page should have a class of "selected" `

    <ul class="tabs shown_tabs">
    	<li class="selected"><a>Page 1</a></li>
    	<li><a>Page 2</a></li>
    	<li><a>Page 3</a></li>
    	<li><a>Page 1</a></li>
    </ul>

`

- Page 1
- Page 2
- Page 3
- Page 1

Button Rows
Use PowerSchool's button-row class to right-align buttons. `

    <div class="button-row">
    	<button>Cancel</button>
    	<button>Submit</button>
    </div>

`
Feedback Containers
`

    <div class="feedback-confirm">Feedback Confirm</div>
    <div class="feedback-alert">Feedback Alert</div>
    <div class="feedback-error">Feedback Error</div>
    <div class="feedback-info">Feedback Info</div>
    <div class="feedback-note">Feedback Note</div>

`
Feedback Confirm
Feedback Alert
Feedback Error
Feedback Info
Feedback Note
Tables
Styling tables is made easy using the following classes.

- linkDescList - Zebra-striped table rows
- grid - Zebra-striped table rows with borders
- tableToGrid - Same look as grid, but includes clickable table headers for sorting rows

See the Tables tab for a more in-depth discussion of table styling.

~[x:insertfile;footer.html] ~[wc:admin_footer_css]