Alter tree style by tree level
Hi,
I'm trying to implement a tree that has (potentially) different font size weight and color etc for each tree level. I have taken the "aw-tree" line from aw.css and pasted it my stylesheet. When I try to add say {font-weight:bold; color: red;} to the last ".aw-tree-view" of a given level, the font changes fine, but it seems to negate the indentation for that level. I have attached sample code to demonstrate. Does anyone know how I should edit this CSS.
Thanks
Martin
*** sample code***
<html>
<head>
<!-- include AW stylesheet and script -->
<link href="http://localhost/activewidgets/runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="http://localhost/activewidgets/runtime/lib/aw.js"></script>
</head>
<body>
<style>
.aw-tree-sign {display:inline-block;position:relative;overflow:hidden;width:14px;height:14px;margin:-6px 0px;cursor:pointer;vertical-align:middle;top:1px} .aw-gecko .aw-tree-sign {display:-moz-inline-box} .aw-tree-view
.aw-list-template {height:auto; font-size: 12;}
.aw-tree-view .aw-tree-view .aw-tree-view {font-weight:bold; color: red;} .aw-tree-sign {margin-left:10px;}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:20px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:30px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:40px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:50px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:60px}
</style>
<script>
var tree = {
0: [1,10,19],
1: [2,6,7],
2: [3,4,5],
7: [8,9],
10: [11,15,18],
11: [12,13,14],
15: [16,17],
19: [20,21,22]
}
var tree1 = new AW.UI.Tree;
tree1.setItemText(["",
"abc", "def", "ghi", "jkl", "mno","pqr","stu", "vwx", "yza",
"bcd", "efg", "hij", "klm", "nop","qrs", "tuv", "wxy","zab",
"cde", "fgh", "ijk", "lmn"
]);
tree1.setViewCount(function(i){return tree[i] ? tree[i].length : 0});
tree1.setViewIndices(function(i){return tree[i]});
document.write(tree1);
</script>
</body>
</html>
I'm trying to implement a tree that has (potentially) different font size weight and color etc for each tree level. I have taken the "aw-tree" line from aw.css and pasted it my stylesheet. When I try to add say {font-weight:bold; color: red;} to the last ".aw-tree-view" of a given level, the font changes fine, but it seems to negate the indentation for that level. I have attached sample code to demonstrate. Does anyone know how I should edit this CSS.
Thanks
Martin
*** sample code***
<html>
<head>
<!-- include AW stylesheet and script -->
<link href="http://localhost/activewidgets/runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="http://localhost/activewidgets/runtime/lib/aw.js"></script>
</head>
<body>
<style>
.aw-tree-sign {display:inline-block;position:relative;overflow:hidden;width:14px;height:14px;margin:-6px 0px;cursor:pointer;vertical-align:middle;top:1px} .aw-gecko .aw-tree-sign {display:-moz-inline-box} .aw-tree-view
.aw-list-template {height:auto; font-size: 12;}
.aw-tree-view .aw-tree-view .aw-tree-view {font-weight:bold; color: red;} .aw-tree-sign {margin-left:10px;}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:20px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:30px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:40px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:50px}
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left:60px}
</style>
<script>
var tree = {
0: [1,10,19],
1: [2,6,7],
2: [3,4,5],
7: [8,9],
10: [11,15,18],
11: [12,13,14],
15: [16,17],
19: [20,21,22]
}
var tree1 = new AW.UI.Tree;
tree1.setItemText(["",
"abc", "def", "ghi", "jkl", "mno","pqr","stu", "vwx", "yza",
"bcd", "efg", "hij", "klm", "nop","qrs", "tuv", "wxy","zab",
"cde", "fgh", "ijk", "lmn"
]);
tree1.setViewCount(function(i){return tree[i] ? tree[i].length : 0});
tree1.setViewIndices(function(i){return tree[i]});
document.write(tree1);
</script>
</body>
</html>
MartyInOz
December 14,