|
Designing a theme requires some patience from scratch. So I recommand to use the
ones I provide as templates. A theme requires both style sheet and menu properties.
One needs to know CSS (style sheet) and JavaScript.
Overview
JSCookTree builds a table for each of the tree item and wraps all the items in a subtree
in a <div>.
DOM Hierarchy for CSS
Note: '*' is the theme prefix. '#' is the tree level. At least level 0 and level 1 of the
theme need to be defined. Level 1 and above also need to have the property display: none.
Theme Properties
Theme property is used to define what should appear to the left and right of the tree item.
JavaScript knowledge is required to do this part.
var ctThemeXPBase = '/JSCookTree/ThemeXP/';
// theme node properties
var ctThemeXP2 =
{
// tree attributes
//
// except themeLevel, all other attributes can be specified
// for each level of depth of the tree.
// HTML code to the left of a folder item
// first one is for folder closed, second one is for folder opened
folderLeft: [['<img alt="" src="' + ctThemeXPBase + 'folder2.gif" />', '<img alt="" src="' + ctThemeXPBase + 'folderopen2.gif" />']],
// HTML code to the right of a folder item
// first one is for folder closed, second one is for folder opened
folderRight: [['', '']],
// HTML code for the connector
// first one is for w/ having next sibling, second one is for no next sibling
// then inside each, the first field is for closed folder form, and the second field is for open form
folderConnect: [[['',''],['','']],[['<img alt="" src="' + ctThemeXPBase + 'plus.gif" />','<img alt="" src="' + ctThemeXPBase + 'minus.gif" />'],
['<img alt="" src="' + ctThemeXPBase + 'plusbottom.gif" />','<img alt="" src="' + ctThemeXPBase + 'minusbottom.gif" />']]],
// HTML code to the left of a regular item
itemLeft: ['<img alt="" src="' + ctThemeXPBase + 'page.gif" />'],
// HTML code to the right of a regular item
itemRight: [''],
// HTML code for the connector
// first one is for w/ having next sibling, second one is for no next sibling
itemConnect: [['',''],['<img alt="" src="' + ctThemeXPBase + 'join.gif" />', '<img alt="" src="' + ctThemeXPBase + 'joinbottom.gif" />']],
// HTML code for spacers
// first one connects next, second one doesn"t
spacer: [['',''],['<img alt="" src="' + ctThemeXPBase + 'line.gif" />', '<img alt="" src="' + ctThemeXPBase + 'spacer.gif" />']],
// deepest level of theme style sheet specified
themeLevel: 1
};
When you finished designing a cool theme, please send me a copy so that I could put
on the web.
|
|
