====== 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. ===== Installing a theme ===== **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'' ==== Installing a theme on your public page ==== 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. ==== Testing without breaking the current theme ==== 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. ===== Building a theme ===== Netvibes' theme format is compatible with iGoogle's, so theme designers who are used to create themes for iGoogle should find themeselves at home. ==== Basic information ==== 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 (configuration map), in which you must place some 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. === Differences with the original iGoogle format === 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). ==== Sample XML file ==== 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 :)




  
    Love
    Credit: http://www.flickr.com/photos/annia316/541203166/
    Netvibes
    
    
    
  
  
  
    
    
    #2c3b54
    http://cdn.netvibes.com/themes/xml/texture-love/texture_love.jpg
    
    
    original
    
    
    #644d77
    #eee7e7
    #644d77
    #8b738e
    #ffffff
    
    
    #644d77
    #8b738e
    #ffffff

    
    #698eb9
    #ffffff
    #ffffff

=== Dynamic theme and the Trait tag === 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 per time segment. Each is attached to a specific time segment using the tag:



  
    12am-12pm
    ...
  
  
    1pm-12am
    ...

See the [[http://code.google.com/apis/themes/docs/dev_guide.html#Dyn_Theme|original documentation]] for more information. ==== Describing the theme using metadata ==== 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.


Love
Credit: http://www.flickr.com/photos/annia316/541203166/ 
Netvibes

Not all metadata are used by Netvibes, but they are all parsed. === Available metadata properties === ^ Property ^ Description ^ Value ^ | title | Theme title | String. Up to 30 characters. | | description | Theme description | String. Up to 300 characters. | | author | Author name | String. Up to 50 characters. | | author_email | Author e-mail address | String. Up to 100 characters. | | author_location | Geographic location of the author | String. Up to 100 characters. | | thumbnail | Link to the theme thumbnail. | Well-formed absolute URL | | screenshot | Link to the theme screenshot | Well-formed absolute URL | ==== Designing the theme's header ==== The header is made of four consecutive layers, placed on top of each other. In order of placement, these are: - The background color; - The repeating tiles; - The center image; - 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. {{:theme-header-layers.jpg|}} 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: ''#2c3b54'' * Repeating tiles: '' http://www.example.com/tile_img.jpg'' * Center image: '' http://http://www.example.com/center_img.jpg'' Colors can be defined either using their hexadecimal form (#2c3b54) or one of the available color-codes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. Images can use any format. Recommended are PNG and JPG, but GIF can of course be used. Use PNG/GIF if you need to use transparency. 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. === About tiled images === 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: - 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) ; - 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. ; - 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. [[http://24ways.org/2007/the-neverending-background-image-story|Here is a good tutorial on how to build repeating background images]]. If you choose not to use a tiled background, make sure the the header the image's border colors match with the background color, so as it preserve the seamless experience. ==== Choosing the colors ==== === Valid colors === 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 === About the title color === 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.


white

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. For compatibility reasons, the following color codes are recognized but not used as-is - their normal color is used instead. beveled_white, beveled_red, beveled_orange, beveled_yellow, beveled_yellowgreen, beveled_green, beveled_bluegreen, beveled_blue, beveled_purpleblue, beveled_purple, beveled_purplered. For instance, if the theme defines ''beveled_purplered'', the color ''purplered'' is used instead. The color codes ''original'' and ''beveled_original'' are not a valid color names, so the theme remains as-is for these. === Coloring the tabs === The tabs design attributes follow the same thinking as other attributes. For now, you can only change the colors, but this might evolve.


#644d77
#eee7e7
#644d77
#8b738e
#ffffff

=== Coloring the widget === 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.


#644d77
#8b738e
#ffffff

=== Coloring the theme's footer === Just as for other sections, you can only change a few colors, but more possibilities might come in future versions.


#698eb9
#ffffff
#ffffff