COOLjsOutlookBar Documentation
Note: this document is outdated, and it does not describes versions greater than 1.0.1. New docs are under development.
How to use COOLjsOutlookBar
There're just three files needed to setup and tune your Outlook bar:
- init.js
- outlook.html
- style.css
init.js
This file defines the structure of the Outlook bar. Firstly it declares
"format" section where following parameters can be specified:
| Parameter |
Value |
| heightpanel |
Height of the caption panel. This is the panel containing
items. The outlook itself is built from those panels. |
| imageheight |
Height (and width) of the image used in the items of the
entire outlook. Individual item contains the image and the
text. |
| arrowheight |
Height (and width) of the image used to paint the arrows
that enable vertical scrolling of the outlook. Those arrows
become visible if the amount of items exceedes amount of items
that can be displayed at the same time within the particular
panel |
| heightcell |
Height of the particular item withing the panel (item is
image and associated text). |
| coloroutlook |
Color of the outlookbar (all visual elements except for the
caption panel). |
| arrange_text |
This parameter defines how image and text positioned
against each other within the item. Professional version only. |
| rollback |
The click on the caption panel displays the associated
panel. Another click may do nothing (the default behaviour) or
close the panel. The "rollback" parameter defines this
behaviour. |
| img_arrows_up |
Image to be used for the scrolling-up arrow. Professional version
only |
| img_arrows_dn |
Image to be used for the scrolling-down arrow. Professional version
only. |
Secondly the "panels" section is defined. It has definitions of all the panels and items within each. The panel has the following parameters:
| Parameter |
Value |
| text |
Text is caption of the panel. |
| panelCSS |
panelCSS is the CSS class that desfines visual appearance
of the caption panel. |
| textCSS |
panelCSS is the CSS class that desfines visual appearance
of the caption (text). |
The individual item is being defined with the following parameters:
| Parameter |
Value |
| text |
The caption of the item. |
| textCSS |
The CSS class that defines the caption appearance. |
| image |
The image to be used with the item. |
| url |
The URL to be opened when the item (text or associated
image) clicked. |
| classCSS |
The CSS class that defines the image appearance. |
| overclassCSS |
The CSS class that defines the image appearance when the
mouse is over it. |
outlook.html
This file should be edited only in case you changed path to scripts on your
server.
stylm.css
The definition of the CSS classes.
