Netvibes Developers blog

It’s been a month since we revealed that Netvibes is supporting animated themes – that is, themes that change throughout the day, depending on the designer’s wishes.

Today marks another milestone for animated themes in Netvibes, with the official support of 10 brand new themes, which obviously make plenty o’ use of time ranges.

I want my own!

We hear ya! One of the great projects released with the Netvibes Labs launch, back in April ‘09, was the Theme Designer, which allowed you to design your theme visually rather than through a tedious XML format.

However, our Theme Designer is not yet able to build animated themes (that’s planned for a further iteration), so in order to feast your visitors’ eyes with an everchanging design, you will still have to dive into the code. Don’t be scared: it’s quite easy as long as you know how to handle XML.

Our theme documentation already features most of the information you might need in order to code your own theme, be it static or animated.

In this article, we’ll dive into building a complete animated theme step by step, using the Theme Designer. That editor doesn’t yet support animated themes, but we can just as well use it to build a handful of static themes, and merge them into one file by hand, in order to get an animated theme!

Step one: Deciding on the time ranges and graphics

Before we hop into the editor and start choosing the header color for widgets, you should first have a clear idea of what you want your theme to look and behave like – which could greatly impact the header graphics.

For instance, you can have up to 24 different designs (one per hour of the day/night), but you can just as well have an animated theme with two different states.

For the purpose of this article, we’ll show you how to build a 5-parts theme, with 3 different behaviors: work, lunch, and spare time – therefore, your visitors will be able to know what you’re up to just by looking at your theme!

Each behavior fits into a specific time range:

1. 12am-9am: spare time
2. 9am-1pm: work
3. 1pm-2pm: lunch
4. 2pm-7pm: work
5. 7pm-12am: spare time

Note that while the two “spare time” ranges are next to each other, the XML format requires us to keep them separated rather than having a single “spare time” range going from 7 PM to 9 AM: valid time ranges are from 12am – 12am, and if the end time is before the start time, it will cause an error.
Also, make sure you set ranges for the full 24h of the day — you wouldn’t want your users to miss out on an hour…

Step two: Making the graphics

Our theme  has 5 parts, but we will base it upon 3 designs: “lunch” (used once), work (used twice) and “spare time” (used twice).

We’ll leave the graphic creation to you, and will simply remind you of the size recommendations for a good header image, as well as useful information:

• Images should be at least 175px tall. Since the user can expand the header’s height, it is recommended to go up to 260px, or even 300px to be on the safe side.
• Center image must be at least 640px wide.
• Tile image can be any size, but must wrap-up seamlessly.
• Image should not weight more than 100 kb. Recommended weight is 40 kb, but prefer better quality to smaller size.
• Images are centered in the header, both horizontally and vertically.
• Images can use any format. Recommended are PNG andJPG, but GIF can of course be used. Use PNG/GIF if you need to use transparency.

A lot more information is available in the theme documentation, such as a description of the various layers available for the header, and image tiling…

Step three: Making the themes using the Theme Designer

Now that you have everything at hand, you can launch the Theme Designer and simply fill-in the blanks for each section. You’ll have to do that for each of the various time ranges of your animated theme.

Once you feel you static theme is perfect, you can save it by clicking on the “Download theme” button, available from the Main tab. You end up with an XML file containing all the needed info for your static theme, and named “theme.xml” – which we advise you to promptly rename into something more informative, for fear of overwriting it with your next theme saving.

Step four: Merging static themes into a animated theme

Each of the three static themes we have created are wholly contained within the <ConfigMap type=”Skin”>…</ConfigMap> tags of each of their respective XML files. One theme XML file can contain more than one such <ConfigMap> tag, and they are differentiated using the sub-tag <Trait>, as explained in both the theme documentation and the announcement from last month.

Therefore, merging static themes into one animated theme is simply a question of copy/pasting the <ConfigMap> tags from all files into the remaining one, after its own such tag. Once the pasting is done, add a <Trait> tag with the proper time range settings to each <ConfigMap>, and you’re pretty much done!

In our case, we have three static themes which apply to 5 time ranges, so two of them are bound to be duplicated within the XML. They will be singled out by their <Trait>.

In order to build our animated theme, we’ll start with the file for the static theme tied to the first time range, then paste the <ConfigMap> tags from the two other files into 5 distinct <ConfigMap> section, and finally differentiate them using their very own <Trait> tags. The sequence of the <Trait> tags might be as such:

1. “spare time” theme: <Trait name=”TimeOfDay”>12am-9am</Trait>
2. “work” theme: <Trait name=”TimeOfDay”>9am-1pm</Trait>
3. “lunch” theme: <Trait name=”TimeOfDay”>1pm-2pm</Trait>
4. “work” theme: <Trait name=”TimeOfDay”>2pm-7pm</Trait>
5. “spare time” theme: <Trait name=”TimeOfDay”>7pm-12am</Trait>

Easy as peas!

Step 5: applying the theme on your page

You must upload the XML files and all the media files it uses on a public host in order to apply it. Do not remove it from the host after installation, since your page would lose the theme altogether…

Now comes the part were you get to see your theme in action. As explained in the documentation, you can apply the theme on either one of your private pages, or your public (or all of them!) – it all depends on the syntax you use.

If it’s on a private page:

1. Go to that page of yours ;
2. Type the following in your browser’s adress bar:
   http://www.netvibes.com/?theme=http://URLOF YOURTHEME

If it’s on your public page (http://www.netvibes.com/PAGEID):

• http://www.netvibes.com/?visit= PAGEID&theme=http://URLOF YOURTHEME

Explore 10 exclusive themes!

The 10 exclusive animated themes that were released today are available for your to browse through, in order to learn how to build awesome themes yourself!

Here are the links to their XML files, along with links to apply them on your current private page:

• 4 Seasons (apply it)
• 24 Hours (apply it)
• Aurora (apply it)
• Colors (apply it)
• Food (apply it)
• Grey Texture (apply it)
• Heart (apply it)
• Lightness (apply it)
• Sea Serpent (apply it)
• Yann Arthus-Bertrand (apply it)

Caution: Applying one of these themes will replace the current theme.

Show us your own themes!

This entry was posted on Wednesday, July 29th, 2009 at 5:12 pm and is filed under Articles, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.