My favorites | English | Sign in

More personalization in Google Friend Connect New!

iGoogle Themes API (Labs)

Reference

This is the reference for the Themes API. Themes are implemented in XML files that contain key-value pairs for metadata and design elements.

Contents

  1. Metadata Attributes
  2. Design Attributes
  3. iGoogle Logos
  4. Gadget Title Bar Icons

Metadata Attributes

The top section of a themes specification lists the metadata attributes for the theme, such as the title and author: 

<?xml version="1.0" encoding="UTF-8" ?> 
<ConfigMaps> 
  <ConfigMap type="Skin"> 
    <Meta name="title">Simple Theme</Meta> 
    <Meta name="description">Simple theme example.</Meta> 
    <Meta name="author">Rowan</Meta>
    <Meta name="author_email">rowan@doggiemail.com</Meta>
    <Meta name="thumbnail">http://www.example.com/thumbnail.jpg</Meta> 
    <Meta name="screenshot">http://www.example.com/screenshot.jpg</Meta>
  </ConfigMap> 
  <ConfigMap type="Skin"> 
    ...attributes... 
  </ConfigMap>
</ConfigMaps>

A ConfigMap represents one fully-qualified skin. That is, it represents a skin with all attributes that apply to a single visual state. But the concept is actually more general than that. Each ConfigMap really just describes all Skin attributes that apply to an arbitrary set of Attributes. The "actual" skin is computed from all applicable ConfigMaps. A theme specification must minimally have two <ConfigMap> sections: one to wrap the metadata, and one to wrap the design attributes for at least one skin.

This table lists the attributes that can be included in the metadata section. You must include all metadata attributes in your theme to submit it to the iGoogle Themes directory, though you can test the theme without them. If you plan to submit a theme to the iGoogle Themes directory, it must be a polished, complete design that conforms to the guidelines in the program policy.

Within the metadata section, you can use the <Trait name="Language">xx</Trait> and <Trait name="Country">xx</Trait> elements to localize the title, description, thumbnail, and screenshot fields. For details, see Localizing a theme.

Attribute Description Type Values
title Title displayed in the Themes directory String 0-30 characters
description Description of the theme and what it does String 0-300 characters
author Author’s name shown in the Themes directory String 0-50 characters
author_email Author’s email address, used to so that Google and users can contact you. String 0-100 characters, must contain “@”
author_location The author's geographical location, such as "Mountain View , CA, USA ". String 0-100 characters
thumbnail Thumbnails are used in the themes directory to give users a preview of a theme.  They should capture the design of your theme without showing it in its entirety.  The URL must be well-formed, not relative.  It must be on a public web site that is not blocked by robots.txt.  Do not include the Google logo.  For quality and consistency, Google may take its own thumbnails of a given theme. URL to a JPG (preferred), GIF and PNG acceptable acceptable Well-formed URL, not relative.  410(w) x 70(h)
screenshot Screenshots are used in the themes directory on the page about your theme.  Do not resize or crop.  For quality and consistency, Google may take its own screenshots of a given theme. URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  680(w) x 116(h)

Design Attributes

The following table lists the attributes used to define the design details for a particular skin. Strictly speaking, none of these elements is required--there is no run-time checking, in other words. However, if you plan to submit a theme to the iGoogle Themes directory, it must be a polished, complete design that conforms to the guidelines in the program policy.

Within the attributes section, you can use the <Trait name="TimeOfDay">xx-xx</Trait> element to specify the time of day that a particular skin is displayed. For details, see Creating a dynamic theme.

Attribute Description Type Values
header.background_color  Background color in the header. Appears behind transparent images and on the sides of the center image when no tile is specified String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
header.center_image.url Image that appears centered on the page behind the search box, links, and iGoogle logo, but in front of the tile image URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.
Width: 640-no maximum
Height: 175 px fixed
header.tile_image.url Image that tiles across the entire header behind the search box, links, iGoogle logo, and center_image URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.
Width: Even factor of the center_image
Height: 175 px fixed
header.logo iGoogle logo image.  Pick from the set of 28.  Must remain clearly visible on the page String Must match one of labels shown in iGoogle logos.
header.link_color Color for links in the header, including:
Advanced Search
Preferences
Language Tools
Personalize this page		 String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
header.text_color Color for text in the header, including: Select theme (after clicked)
On international pages:
Web
“Search” [radio button] “the web” [radio button] “pages from X”		 String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.background_color Color for the background of the left navigation String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.border_color Color for the outline of the left navigation String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.icons.icon_color Color for the expand, collapse, and menu icons in the left navigation String  
navbar.tab.selected.link_color Color for links inside the selected tab in the left navigation. String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.tab.unselected.link_color Color for links in all unselected tabs in the left navigation String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.tab.unselected.border_color Color for the line between unselected tabs String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.contact_color Color for the contact names in the chat list String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.status_color Color for the status of contacts in the chat list String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.hover_background_color Color for the highlighted background when the mouse hovers over a contact String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.card.border_color Color for the outline of the card that appears when the mouse hovers over a contact String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.invite.background_color Color for the background of a contact invite String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.invite.border_color Color for the outline of a contact invite String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.invite.text_color Color for the text of a contact invite String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
navbar.contacts.invite.link_color Color for the links inside a contact invite String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.chat.header.background_color Color for the background of chat conversations String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.chat.header.highlight.background_color Color for the background of chat conversations with new messages String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.tab.border_color
(depending on the user's version of iGoogle) 		Color of the outline for tabs, but selected and unselected String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.tab.selected.background_color
(depending on the user's version of iGoogle)		 Background color for the tab rectangle String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.tab.selected.text_color
(depending on the user's version of iGoogle)		 Text color for the tab name String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.tab.unselected.background_color
(depending on the user's version of iGoogle)		 Background color for the tab rectangle String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.tab.unselected.text_color
(depending on the user's version of iGoogle)		 Text color for the tab name String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.border_color Color for dividing line between the gadget area and header String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.gadget.border_color Color for gadget borders, the frame around the gadget String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.gadget.hover.border_color Color for gadget borders, the frame around the gadget when mouse hovers over a gadget String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.gadget.header.background_color Color for gadget titlebars that appear on top of the gadget String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.gadget.header.text_color Color for the gadget’s title that appears in the titlebar String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.gadget.body.link_color Color for certain links inside the gadget String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
gadget_area.icons.icon_color Color for the button in the titlebar for gadgets String A hex #xxxxxx from the available values.  See the available button values below.
gadget_area.menu_icon.image.url
(deprecated)		 Image for the menu button in the titlebar for gadgets and in the active tab URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.menu_icon.hover_image.url
(deprecated)		 Image for the menu button in the titlebar for gadgets and in the active tab, when the mouse is over the button URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.delete_icon.image.url
(deprecated)		 Image for the delete button in the titlebar for gadgets URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.delete_icon.hover_image.url
(deprecated)		 Image for the delete button in the titlebar for gadgets when the mouse is over the button URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.collapse_icon.image.url
(deprecated)		 Image for the collapse button in the titlebar for gadgets and within gadgets for RSS feeds URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.collapse_icon.hover_image.url
(deprecated)		 Image for the collapse button in the titlebar for gadgets and within gadgets for RSS feeds URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.expand_icon.image.url
(deprecated)		 Image for the expand button in the titlebar for gadgets and within gadgets for RSS feeds URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
gadget_area.expand_icon.hover_image.url
(deprecated)		 Image for the expand button in the titlebar for gadgets and within gadgets for RSS feeds URL JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.  12(w) x 12(h)
footer.background_color Background color in the footer.  Appears behind transparent images and on the sides of the center image when no tile is specified String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
footer.center_image.url Image that appears centered on the page behind links, but in front of the tile image URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.
Width: 640-no maximum
Height: 140 px fixed
footer.tile_image.url Image that tiles across the entire footer behind links and the center image URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative. Width: Even factor of the center_image
Height: 140 px fixed
footer.link_color Color for links in the footer, including:
Advertising Programs
Business Solutions
Privacy Policy
Help
About Google
Mobile		 String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
footer.text_color Color for text in the header, including:
©2008 Google 		String A hex #xxxxxx or RGB(x,x,x) value, or one of the following color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow.
attribution.image.url Image for the author’s name or mark.  Appears on the right side of the footer, in front of the center and tile image URL to a JPG (preferred), GIF and PNG acceptable Well-formed URL, not relative.
Width: 100 px fixed
Height: 50 px fixed

iGoogle Logos

Every theme must include an iGoogle logo, and the logo must be clearly visible on the page. For example, this line adds a white iGoogle logo to the theme header area:

<Attribute name="header.logo">white</Attribute>

The following table lists the supported logo colors. As a value for the header.logo attribute, they can either have the format color or beveled_color.

Value Logo
original original logo
beveled_original beveled original logo
white white logo
beveled_white beveled white logo
purpleblue purpleblue logo
beveled_purpleblue beveled purpleblue logo
red red logo
beveled_red beveled red logo
orange orange logo
beveled_orange beveled orange logo
yellow yellow logo
beveled_yellow beveled yellow logo
yellowgreen yellowgreen logo
beveled_yellowgreen beveled yellowgreen logo
green green logo
beveled_green beveled green logo
bluegreen bluegreen logo
beveled_bluegreen beveled bluegreen logo
blue blue logo
beveled_blue beveled blue logo
purpleblue purpleblue logo
beveled_purpleblue beveled purpleblue logo
purple purple logo
beveled_purple beveled purple logo
purplered beveled purplered logo
beveled_purplered beveled purplered logo

Gadget Title Bar Icons

Themes can specify the color for icons that appear in the title bar of each gadget. For example, this line changes the icons to the color #ffaa00:

<Attribute name="gadget_area.icons.icon_color">#ffaa00</Attribute>

Note: This version of the Themes API introduces a lighter default icon. In previous versions of the Themes API, the darker hover icon was used as the default.

The following table lists the supported icon colors.

Color Code Default Icon Hover Icon Clicked Icon
000000
0000ff
002aff
0054ff
007fff
00a9ff
00d4ff
00feff
00ff00
00ff2a
00ff55
00ff7f
00ffaa
00ffd4
2a00ff
2aff00
54ff00
5500ff
7f00ff
7fff00
9c785e
a9ff00
aa00ff
c6bda5
d400ff
d4ff00
feff00
ff0000
ff002a
ff0054
ff007f
ff00a9
ff00d4
ff00fe
ff2a00
ff5500
ff7f00
ffaa00
ffd400
ffffff

Back to top