1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
@@--
@@-- This templates provides a style sheet to display a set of boxes with
@@-- rounded corner, each of which should contain a list of links
@@--
@@-- This template was tested on Opera 7.0, Firefox 1.0, Internet Explorer 6
@@--
@@-- When installing this template, you should put the picture 'rcorner.gif'
@@-- in a directory which is aliased by AWS as '/we_icons/'. If not found, the
@@-- boxes will not have rounded corners.
@@--
@@-- This template degrades nicely on browsers that do not support stylesheets
@@--
@@-- To use this template, you need to:
@@-- * Include it in the header of your document, as in:
@@--
@@-- @@INCLUDE@@ rounded_boxes.thtml 1=>menuClass 2=>contentsID
@@--
@@-- * Optional parameters:
@@--
@@-- $3 - The box color (frame, and header background)
@@-- $4 - Box background color
@@-- $5 - Header text color
@@-- $6 - Title text color
@@-- $7 - Item text color
@@--
@@-- * Add a list in your document, with the following format:
@@--
@@-- <div class="menuClass">
@@-- <h2>A first box</h2>
@@-- <div>
@@-- <h3>SubTitle</h3>
@@-- <ul>
@@-- <li><a href="#">A link</a></li>
@@-- <li><a href="#">A link</a></li>
@@-- </ul>
@@-- <h3>SubTitle2</h3>
@@-- ... any number of h3/ul combination
@@-- </div>
@@-- <h2>A second box</h2>
@@-- <div>
@@-- <ul> <!-- h3 is not necessary -->
@@-- <li><a href="#">A link</a></li>
@@-- <li><a href="#">A link</a></li>
@@-- </ul>
@@-- </div>
@@-- </div>
@@--
@@-- <div class="contentsID">
@@-- The contents of your document
@@-- </div>
@@--
@@-- On browsers that support for fixed position, this frame will not scroll
@@-- along with the rest of the document. This doesn't work on Internet
@@-- explorer 6.0.
@@SET@@ BOX_COLOR = $3 | #369
@@SET@@ BG_COLOR = $4 | #EEE
@@SET@@ TEXT_HEADER_COLOR = $5 | white
@@SET@@ TEXT_TITLE_COLOR = $6 | #c60
@@SET@@ TEXT_ITEM_COLOR = $7 | #369
<style>
.@_$1_@ { width: 7em;
position: fixed; /* Do not scroll with the rest of the doc */
float: left;
margin: 0px;
margin-left: 3px;
padding: 0px; }
.@_$1_@ h2 { text-transform: uppercase;
background: @_BOX_COLOR_@ url('/we_icons/rcorner.gif') right top no-repeat;
color: @_TEXT_HEADER_COLOR_@;
margin: 1em 0 0 0;
padding: 2px;
font-size: 1em; }
.@_$1_@ h3 { color: @_TEXT_TITLE_COLOR_@;
font-weight: 600;
font-size: 1em;
margin: 10px 0 0 0; }
.@_$1_@ div { border: 1px solid @_BOX_COLOR_@;
border-top-width: 0px;
padding: 5px;
background: @_BG_COLOR_@;
font-size: 1em;
margin-bottom: 15px; }
.@_$1_@ ul { color: @_BOX_COLOR_@;
margin: 3px 0px 0px 20px;
padding: 0px; }
.@_$1_@ li { margin-top: 3px; }
.@_$1_@ a:hover { color: @_BOX_COLOR_@;
border-bottom: 1px solid @_BOX_COLOR_@; }
.@_$1_@ a:visited,
.@_$1_@ a:link,
.@_$1_@ a:active { color: @_TEXT_ITEM_COLOR_@;
text-decoration: none; }
.@_$2_@ { padding: 0px;
position: relative;
top: 20px;
margin-left: 8em; }
</style>
|
