Internal Templates

UNDP Intranet Lists & Tables

Title		Size	Modified	Info	Send
	Test Folder Created by Barbara	3 items	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005

Sample 2:

Title		Size	Modified	Info	Send	Owner Tools
	Test Folder Created by Barbara	3 items	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005

Add New Document    Add New Folder   

Intranet File Lists

Description: This page shows how to make <ul> lists with icons ( ) instead of bullets.

Sample 1:

• India Tsunami-Sitrep 5 January 2005
• Indonesia_SitRep_vol9_Jan03
• Malaysia_Situation_Report_02Jan
• Maldives SitRep10_060105
• This list is formatted like a normal <ul> list.
• Each <li> tag has a special code to specify which file icon to use:
• This is <li class="doc">
• This is <li class="pdf">
• This is <li class="pps">
• This is <li class="ppt">
• This is <li class="xls">
• This is <li class="xlt">
• This is <li class="txt">
• This is <li class="exe">
• This is <li class="zip">
• This is <li class="folder">
• This is <li class="htm">
• This is <li class="css">
• This is <li class="xml">
• This is <li class="gif">
• This is <li class="bmp">
• This is <li class="jpg">
• This is <li class="img">
• This is <li class="unknown">

Sample 2:

The same formatting will also work in the right sidebar.
Please click here for sample page.

 

UNDP Intranet Tables

Description: This section shows standard table components that can be assembled in different combinations.

Sample 1: Table without borders

 The default table is: <table class="standard">

Title <th>		Size	Modified	Region	Owner
	Folder One	3 items	07-01-2005
	Folder Two	3 items	07-01-2005

 

Sample 2: Borders

Add a border around the entire table: <table class="standard border">

Title		Size	Modified	Region	Owner
	Folder One	3 items	07-01-2005
	Folder Two	3 items	07-01-2005

 
Between each row: <table class="standard border rowborder">

Title		Size	Modified	Region	Owner
	Folder One	3 items	07-01-2005
	Folder Two	3 items	07-01-2005

 
Between each column: <table class="standard border columnborder">

Title		Size	Modified	Region	Owner
	Folder One	3 items	07-01-2005
	Folder Two	3 items	07-01-2005

 
Between every cell: <table class="standard cellborder">

Title		Size	Modified	Region	Owner
	Folder One	3 items	07-01-2005
	Folder Two	3 items	07-01-2005

 
Or just between specific cells: <table class="standard">

Title		Size	Modified	Region	Owner
	Folder One	<td class="leftborder">	07-01-2005
	Folder Two	<td class="rightborder">	07-01-2005

 

Sample 3: Alternate Rows & Columns

Alternate rows with: <tr class="odd"> and <tr class="even">

Title	Size	Modified	Region	Owner
<tr class="odd">	3 items	07-01-2005
<tr class="even">	3 items	07-01-2005
<tr class="odd">	3 items	07-01-2005
<tr class="even">	3 items	07-01-2005

Alternate columns with: <td class="column">

Title	Size	Modified	Region	Owner
Lorem ipsum	3 items	<td class="column">
Lorem ipsum	3 items	<td class="column">
Lorem ipsum	3 items	<td class="column">
Lorem ipsum	3 items	<td class="column">

Or, alternate both rows and columns:

Title	Size	Modified	Region	Owner
<tr class="odd">	3 items	<td class="column">		<td class="column">
<tr class="even">	3 items	<td class="column">		<td class="column">
<tr class="odd">	3 items	<td class="column">		<td class="column">
<tr class="even">	3 items	<td class="column">		<td class="column">

 

Sample 4: Headers and Colors

Add table heads and subheads with:

<tr class="title">
<tr class="head">
<tr class="subhead">
<tr class="subtotal">
<tr class="total">

Title of Table <tr class="title">
Title <tr class="head">	Size	Modified	Region	Owner
Cambodia <tr class="subhead">
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
<tr class="subtotal">	12 items
Indonesia
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
Lorem ipsum	3 items	07-01-2005
	12 items
<tr class="total">	24 items

 
Change the color palette with:

<table class="standard cellborder blue">

Title of the table
Title		Size	Modified	Region	Owner
Subhead text
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
		12 items
Subhead text
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
		12 items
		24 items

With so many colors, the table may look better with no borders:

<table class="standard blue">

Title of the table
Title		Size	Modified	Region	Owner
Subhead text
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
		12 items
Subhead text
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
	Test Folder	3 items	07-01-2005
		12 items
		24 items

 

Sample 5: Migration

These changes make the previous "alternaterow" table tag obsolete:

<table border=0 cellpadding=0 cellspacing=0 class="alternaterow">

Instead, use this tag:

<table class="standard cellborder">

... and the tables will keep their existing style:

Title		Size	Modified	Info	Send
	Test Folder Created by Barbara	3 items	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005
	Asean Leaders Meeting agenda	53 KB	07-01-2005

 

Sample 6: Sort Toggles

Add a descending sort image with:
<img src="http://www.und.org/images/cms/button/sort_desc.gif" class="sort">

For an ascending sort image, replace the image with: sort_asc.gif.

Title	Size	Modified	Region	Owner
Lorem	3 items	06-01-2005
Ipsum	5 items	07-01-2005

Title	Size	Modified	Region	Owner
Ipsum	5 items	07-01-2005
Lorem	3 items	06-01-2005