~[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.
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.

HTML Tags - Defined

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>Content</tagname>

HTML 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.

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

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>
		


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 Syntax
Styles are achieved by defining CSS declarations. There are two parts to a CSS declaration:
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 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 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">
	<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>

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.
See the Tables tab for a more in-depth discussion of table styling.



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