External Templates

UNDP Worldwide Templates

These templates use a default blue banner (please do not use the UN wreath, which is reserved for www.undp.org):

This templates include a JavaScript header that selects a random, country-specific photograph:

UNDP Worldwide CSS

The CSS file can be downloaded for reference:

• UNDP Worldwide CSS File

Please do not make any changes to this CSS file — if you need to add or override any of the CSS, please use a second, supplemental style sheet.

For live pages please use the following tag:

<link rel="stylesheet" href="/css/undp-worldwide.css">

... or maintain a local copy of the file.

UNDP Worldwide File Lists Template

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

• UNDP Country File Lists

UNDP Worldwide Tables

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: Table with 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