Building a Netvibes theme

It is possible for any designer to build their own theme for the Netvibes homepage, and have it used by any Netvibes user.

Note: you cannot “undo” a theme installation. The only way is to install another theme on top - be it one of your own, or one of the many Netvibes themes available.

Themes should be hosted on a publicly accessible server and in uncompressed form, so that user can call the them directly.

In order to add a theme to one of your private page, you have to build a specific URL:

• Begin with http://www.netvibes.com/?theme=
• Follow up with the theme's URL.

For instance, if the theme is hosted at…

http://www.example.org/theme.xml

…the installation URL would be…

http://www.netvibes.com/?theme=http://www.example.org/theme.xml

The theme's URL can be URL-encoded to ensure maximum usability.

http://www.netvibes.com/?theme=http%3A%2F%2Fwww.example.org%2Ftheme.xml

If you want to install the theme on your own public page, the URL you have to build has to be of this form:

http://www.netvibes.com/?visit= PAGEID&theme=http://www.example.org/theme.xml

…where PAGEID is your public page's ID.

If you wish to test the theme on a default account and not change your own page's theme, you may want to reset the Netvibes cookie for a short time, using the reset=1 URL value. The installation URL would therefore look as thus: http://www.netvibes.com/?theme=http://www.example.org/myTheme.xml&reset=1.

Note that you will then be disconnected from your account. You can log back into Netvibes at any time. Your own page's theme should be safe.

Netvibes' theme format is compatible with iGoogle's, so theme designers who are used to create themes for iGoogle should find themeselves at home.

A theme is defined through a XML file, which specifies the various options and values to be used throughout. This is the file to be targetted by the installation process. The file's design choices are then applied to a basic Netvibes theme, so that the fundamentals of the Netvibes's look & feel are respected.

You can therefore build a very simple theme, that simple changes some coloring, or a very complex one, giving a completely new look to Netvibes' tabs and with a different skin depending on the time of the day.

The basic XML tag for the file is <ConfigMaps> (configuration map), in which you must place some <ConfigMap> tags. Any theme needs at least 2 ConfigMap tags: one for the theme's metadata (name, description, author…), one for the new design itself. After that, a theme XML file can have have as many ConfigMap tags as needed, one per skin. Most of the time though, you will only need the two required ConfiMap tags.

While technically the format we use works just like iGoogle's, there are a few properties that are specific to Netvibes:

• widget area background color and image (iGoogle is just white);
• widget background color;
• up to 6 widget header colors (iGoogle only has one).

Here is the actual code for the existing “Love” theme, currently available for all Netvibes users (through Options > Themes). You can base your own theme on this one - but remember to change the name and images, at least :)

<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <Meta name="title">Love</Meta>
    <Meta name="description">Credit: http://www.flickr.com/photos/annia316/541203166/</Meta>
    <Meta name="author">Netvibes</Meta>
    <Meta name="author_email"></Meta>
    <Meta name="thumbnail"></Meta>
    <Meta name="screenshot"></Meta>
  </ConfigMap>
  <!-- Content section -->
  <ConfigMap type="Skin">
 
    <!-- Header section (color and bg) -->
    <Attribute name="header.background_color">#2c3b54</Attribute>
    <Attribute name="header.center_image.url">http://cdn.netvibes.com/themes/xml/texture-love/texture_love.jpg</Attribute>
 
    <!-- Color title -->
    <Attribute name="header.logo">original</Attribute>
 
    <!-- Section tab menu -->
    <Attribute name="gadget_area.tab.border_color">#644d77</Attribute>
    <Attribute name="gadget_area.tab.selected.background_color">#eee7e7</Attribute>
    <Attribute name="gadget_area.tab.selected.text_color">#644d77</Attribute>
    <Attribute name="gadget_area.tab.unselected.background_color">#8b738e</Attribute>
    <Attribute name="gadget_area.tab.unselected.text_color">#ffffff</Attribute>
 
    <!-- Widget Section -->
    <Attribute name="gadget_area.gadget.border_color">#644d77</Attribute>
    <Attribute name="gadget_area.gadget.header.background_color">#8b738e</Attribute>
    <Attribute name="gadget_area.gadget.header.text_color">#ffffff</Attribute>
 
    <!-- Footer section -->
    <Attribute name="footer.background_color">#698eb9</Attribute>
    <Attribute name="footer.link_color">#ffffff</Attribute>
    <Attribute name="footer.text_color">#ffffff</Attribute>
  </ConfigMap>
</ConfigMaps>

Dynamic themes are themes that evolve according to the time of day. Provided the theme designer has built his theme conscienciously, a visitor to your public page would not see the same theme in the morning, in the afternoon or in the evening.

In effect, this means creating a separate theme for the every time segment needed, and therefore on <ConfigMap> per time segment. Each <ConfigMap> is attached to a specific time segment using the <Trait> tag:

<ConfigMaps>
  <ConfigMap type="skin">
    <Trait name="TimeOfDay">12am-12pm</Trait>
    ...
  </ConfigMap>
  <ConfigMap type="skin">
    <Trait name="TimeOfDay">1pm-12am</Trait>
    ...
  </ConfigMap>
</ConfigMaps>

See the original documentation for more information.

The Theme API gives a handful of metadata that can be used to give details about the theme. They are to be stored in a separate ConfigMap tag, which must be the first of all ConfigMap tags in the file.

<Meta name="title">Love</Meta>
<Meta name="description">Credit: http://www.flickr.com/photos/annia316/541203166/ </Meta>
<Meta name="author">Netvibes</Meta>
<Meta name="author_email"></Meta>
<Meta name="thumbnail"></Meta>
<Meta name="screenshot"></Meta>

The header is made of four consecutive layers, placed on top of each other. In order of placement, these are:

1. The background color;
2. The repeating tiles;
3. The center image;
4. The title and optional search box.

Only the three first ones can be changed by the theme, the fourth one (title and search) is placed as-is by Netvibes, as the final touch.

The three available layers are optionnal: you may choose not to use a background color (in which case it defaults to white), or not to use repeating tiles, or even no center image. It is however recommended to use at least two of the three layers, in order to achieve an interesting theme.

Each layer can be edited using a specific Attribute tag:

• Background color: <Attribute name=“header.background_color”>#2c3b54</Attribute>
• Repeating tiles: <Attribute name=“header.tile_image.url”> http://www.example.com/tile_img.jpg</Attribute>
• Center image: <Attribute name=“header.center_image.url”> http://http://www.example.com/center_img.jpg</Attribute>

While the first and third layers (background color and header image) are pretty straightforward to understand and implement, the second one deserves a bit more explanation.

All these layers appear on top of each other so as to look like a single image to the user, but the second layer is the one that ties all other together, by making sure that the theme header works for any screen-size. Thanks to repeating tiles, it is possible to build a background of infinite size for the header image, provided that these tiles can be place side-by-side seamlessly, thus forming the background upon which the header image lies.

While having tiles is optional, it may help your theme fit gracefully the whole header space.

You may build the tile image with any width in mind, but make sure it flows gracefully with the header image. Since both images are centered in the header space, it is possible to use a bit of trickery so that the user cannot see the wrapping-up occur:

1. Header image and tile image are the same size: this is probably the ideal situation, since the header will see its edges being continued by the tile placed on each site (the first tile fits behind the header image) ;
2. Header image is bigger than tile image: in order to make sure that the tile's edges wrap exactly at the header's edges, you should make the tile's width equal to a division of the header. Therefore, if the header image is 640px wide, the tile image should be one of these: 900px (1 tile fits behind), 300px (3 tiles fit behind), 180px (5 tiles), 100px (9 tiles), etc. ;
3. Header image is shorter than tile image: this case is ideal in a situation where the header image is a simple logo or a character that is not tied to the tile background. It is however recommended to use transparency for the header image's background color, so that it fits neatly on the image backdrop created by the tiles.

Here is a good tutorial on how to build repeating background images.

Several properties accept colors as value. There are 3 forms of valid color:

• Hexadecimal: #000000 to #FFFFFF
• RGB: RGB(0,0,0) to RGB(255,255,255)
• Named color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

The Theme API we used defines a special Attribute tag to specify which logo to use. Netvibes doesn't use logos, but designers can use this Attribute to define the page title's color.

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

The possible colors for this Attribute is limited to these ones: original, white, purpleblue, red, orange, yellow, yellowgreen, green, bluegreen, blue, purpleblue, purple, purplered, black. Note that the value black is specific to Netvibes.

Note that changing the title's color also changes others colors within the theme, among which is the color for the “Add Content” button main color.

The tabs design attributes follow the same thinking as other attributes. For now, you can only change the colors, but this might evolve.

<Attribute name="gadget_area.tab.border_color">#644d77</Attribute>
<Attribute name="gadget_area.tab.selected.background_color">#eee7e7</Attribute>
<Attribute name="gadget_area.tab.selected.text_color">#644d77</Attribute>
<Attribute name="gadget_area.tab.unselected.background_color">#8b738e</Attribute>
<Attribute name="gadget_area.tab.unselected.text_color">#ffffff</Attribute>

The Theme API lets you decide what should be the color from the widgets borders, and their header's background and text color. Again, more possibilities might come later.

<Attribute name="gadget_area.gadget.border_color">#644d77</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#8b738e</Attribute>
<Attribute name="gadget_area.gadget.header.text_color">#ffffff</Attribute>

Just as for other sections, you can only change a few colors, but more possibilities might come in future versions.

<Attribute name="footer.background_color">#698eb9</Attribute>
<Attribute name="footer.link_color">#ffffff</Attribute>
<Attribute name="footer.text_color">#ffffff</Attribute>