Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

themes.html @ 569

Last change on this file since 569 was 569, checked in by vmipsl, 12 years ago
Nouveau projet
File size: 15.9 KB

Line
1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3
4	<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
5	<head>
6	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7
8	<title>Prototype Window Class : Themes</title>
9	<!-- Prototype Window Class Part -->
10	<script type="text/javascript" src="javascripts/prototype.js"> </script>
11	<script type="text/javascript" src="javascripts/effects.js"> </script>
12	<script type="text/javascript" src="javascripts/window.js"> </script>
13	<script type="text/javascript" src="javascripts/debug.js"> </script>
14
15	<link href="themes/default.css" rel="stylesheet" type="text/css" > </link>
16	<link href="themes/debug.css" rel="stylesheet" type="text/css" > </link>
17	<link href="themes/nuncio.css" rel="stylesheet" type="text/css" > </link>
18	<link href="themes/alphacube.css" rel="stylesheet" type="text/css" > </link>
19	<link href="themes/darkX.css" rel="stylesheet" type="text/css" > </link>
20	<link href="themes/spread.css" rel="stylesheet" type="text/css" > </link>
21	<link href="themes/mac_os_x.css" rel="stylesheet" type="text/css" > </link>
22	<link href="themes/alert.css" rel="stylesheet" type="text/css" > </link>
23	<link href="themes/lighting.css" rel="stylesheet" type="text/css" > </link>
24
25	<!-- Doc Part-->
26	<link href="stylesheets/style.css" rel="stylesheet" type="text/css" > </link>
27	<script type="text/javascript" src="js/application.js"> </script>
28	</head>
29
30	<body>
31	<script>Application.insertNavigation('themes')</script>
32	<div id="wrapper">
33	<div id= "content" class="content">
34	<h2 class="first"> Overview</h2>
35
36	Creating a new theme is very easy. You need to describe window's look and feel in a CSS file. Name your CSS file THEME_NAME.css with thoses CSS definition:<br/>
37	By convention the images used in the CSS files are in THEME_NAME directory (it's just a convention, do it as you feel!)<br/>
38	A window is divided into 9 parts, 4 corners, 4 borders and the main content in the middle.<br/><br/>
39	View a detail <a href="#" onclick=" Effect.toggle('css_file', 'blind')">template CSS file </a>(you can copy-paste it to start a new theme). See <a href="http://art.gnome.org/themes/metacity">Art.Gnome.Org</a> for cool designs. I used two of them, it's easy to integrate in the class.<br/><br/>
40	<div style="display:none;text-align:left;color:#000000; background-color:#F8F8F8; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace;margin:5px; " id='css_file' >
41	<span style="color:#236e25;">/* North-West corner */</span><br />
42	.THEME_NAME_nw {<br />
43	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/TOP_LEFT_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;         <br />
44	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">10px</span>;<br />
45	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br />
46	}<br />
47	<br />
48	<span style="color:#236e25;">/* North border */</span><br />
49	.THEME_NAME_n {<br />
50	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/TOP_IMAGE.gif) <span style="color:#9b4400;">repeat-x</span> <span style="color:#0000ff;">0 0</span>;           <br />
51	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br />
52	}<br />
53	<br />
54	<span style="color:#236e25;">/* North-East corner */</span><br />
55	.THEME_NAME_ne {<br />
56	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/TOP_RIGHT_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;            <br />
57	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">10px</span>;     <br />
58	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br />
59	}<br />
60	<br />
61	<span style="color:#236e25;">/* West border */</span><br />
62	.THEME_NAME_w {<br />
63	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/LEFT_IMAGE.gif) <span style="color:#9b4400;">repeat-y</span> <span style="color:#9b4400;">top</span> <span style="color:#9b4400;">left</span>;         <br />
64	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br />
65	}<br />
66	<br />
67	<span style="color:#236e25;">/* East border */</span><br />
68	.THEME_NAME_e {<br />
69	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/RIGHT_IMAGE.gif) <span style="color:#9b4400;">repeat-y</span> <span style="color:#9b4400;">top</span> <span style="color:#9b4400;">right</span>;           <br />
70	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;      <br />
71	}<br />
72	<br />
73	<span style="color:#236e25;">/* South-West corner */</span><br />
74	.THEME_NAME_sw {<br />
75	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/BOTTOM_LEFT_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;          <br />
76	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br />
77	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br />
78	}<br />
79	<br />
80	<span style="color:#236e25;">/* South border */</span><br />
81	.THEME_NAME_s {<br />
82	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/BOTTOM_IMAGE.gif) <span style="color:#9b4400;">repeat-x</span> <span style="color:#0000ff;">0 0</span>;            <br />
83	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br />
84	}<br />
85	<br />
86	<span style="color:#236e25;">/* South-East corner */</span><br />
87	.THEME_NAME_se {<br />
88	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/BOTTOM_RIGHT_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;         <br />
89	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br />
90	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br />
91	<span style="color:#88134f;">vertical-align</span>:<span style="color:#9b4400;">top</span>;<br />
92	}<br />
93	<br />
94	<span style="color:#236e25;">/* Resize button */</span><br />
95	.THEME_NAME_sizer {<br />
96	<span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br />
97	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br />
98	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/RESIZE_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>; <br />
99	<span style="color:#88134f;">cursor</span>:<span style="color:#9b4400;">se-resize</span>;   <br />
100	}<br />
101	<br />
102	<span style="color:#236e25;">/* Close button */</span><br />
103	.THEME_NAME_close {<br />
104	<span style="color:#88134f;">width</span>: <span style="color:#0000ff;">23px</span>;<br />
105	<span style="color:#88134f;">height</span>: <span style="color:#0000ff;">23px</span>;<br />
106	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/CLOSE_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;          <br />
107	<span style="color:#88134f;">position</span>:<span style="color:#9b4400;">absolute</span>;<br />
108	<span style="color:#9b4400;">top</span>:<span style="color:#0000ff;">0px</span>;<br />
109	<span style="color:#9b4400;">right</span>:<span style="color:#0000ff;">11px</span>;<br />
110	<span style="color:#88134f;">cursor</span>:<span style="color:#9b4400;">pointer</span>;<br />
111	<span style="color:#88134f;">z-index</span>:<span style="color:#0000ff;">1000</span>;<br />
112	}<br />
113	<br />
114	<span style="color:#236e25;">/* Minimize button */</span><br />
115	.THEME_NAME_minimize {<br />
116	<span style="color:#88134f;">width</span>: <span style="color:#0000ff;">23px</span>;<br />
117	<span style="color:#88134f;">height</span>: <span style="color:#0000ff;">23px</span>;<br />
118	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/MINIMIZE_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;           <br />
119	<span style="color:#88134f;">position</span>:<span style="color:#9b4400;">absolute</span>;<br />
120	<span style="color:#9b4400;">top</span>:<span style="color:#0000ff;">0px</span>;<br />
121	<span style="color:#9b4400;">right</span>:<span style="color:#0000ff;">55px</span>;<br />
122	<span style="color:#88134f;">cursor</span>:<span style="color:#9b4400;">pointer</span>;<br />
123	<span style="color:#88134f;">z-index</span>:<span style="color:#0000ff;">1000</span>;<br />
124	}<br />
125	<br />
126	<span style="color:#236e25;">/* Maximize button */</span><br />
127	.THEME_NAME_maximize {<br />
128	<span style="color:#88134f;">width</span>: <span style="color:#0000ff;">23px</span>;<br />
129	<span style="color:#88134f;">height</span>: <span style="color:#0000ff;">23px</span>;<br />
130	<span style="color:#88134f;">background</span>: <span style="color:#9b4400;">transparent</span> <span style="color:#9b4400;">url</span>(THEME_NAME/MAXIMIZE_IMAGE.gif) <span style="color:#9b4400;">no-repeat</span> <span style="color:#0000ff;">0 0</span>;           <br />
131	<span style="color:#88134f;">position</span>:<span style="color:#9b4400;">absolute</span>;<br />
132	<span style="color:#9b4400;">top</span>:<span style="color:#0000ff;">0px</span>;<br />
133	<span style="color:#9b4400;">right</span>:<span style="color:#0000ff;">33px</span>;<br />
134	<span style="color:#88134f;">cursor</span>:<span style="color:#9b4400;">pointer</span>;<br />
135	<span style="color:#88134f;">z-index</span>:<span style="color:#0000ff;">1000</span>;<br />
136	}<br />
137	<br />
138	<span style="color:#236e25;">/* Title bar */</span><br />
139	.THEME_NAME_title {<br />
140	<span style="color:#88134f;">float</span>:<span style="color:#9b4400;">left</span>;<br />
141	<span style="color:#88134f;">height</span>:<span style="color:#0000ff;">14px</span>;<br />
142	<span style="color:#88134f;">font-size</span>:<span style="color:#0000ff;">14px</span>;<br />
143	<span style="color:#88134f;">text-align</span>:<span style="color:#9b4400;">center</span>;<br />
144	<span style="color:#88134f;">margin-top</span>:<span style="color:#0000ff;">2px</span>;<br />
145	<span style="color:#88134f;">width</span>:<span style="color:#9b4400;">100</span><span style="color:#0000ff;">%</span>;<br />
146	<span style="color:#88134f;">color</span>:<span style="color:#760f15;">#123456</span>;<br />
147	}<br />
148	<br />
149	<span style="color:#236e25;">/* Content div (not used for url) */</span><br />
150	.THEME_NAME_content {<br />
151	<span style="color:#88134f;">overflow</span>:<span style="color:#9b4400;">auto</span>;<br />
152	<span style="color:#88134f;">color</span>: <span style="color:#760f15;">#000</span>;<br />
153	<span style="color:#88134f;">font-family</span>: Tahoma, Arial, sans-serif;<br />
154	<span style="color:#88134f;">font-size</span>: <span style="color:#0000ff;">10px</span>;<br />
155	<span style="color:#88134f;">background</span>:<span style="color:#760f15;">#FDFDFD</span>;<br />
156	}<br />
157	<br />
158	<span style="color:#236e25;">/* Overlay for modal window, spécify color and opacity (three times to work on all browsers */</span><br />
159	.overlay_THEME_NAME {<br />
160	<span style="color:#88134f;">background-color</span>: <span style="color:#760f15;">#85BBEF</span>;<br />
161	filter:alpha(opacity=<span style="color:#0000ff;">60</span>);<br />
162	-moz-opacity: <span style="color:#0000ff;">0</span>.<span style="color:#0000ff;">6</span>;<br />
163	opacity: <span style="color:#0000ff;">0</span>.<span style="color:#0000ff;">6</span>;<br />
164	}<br />
165	<br />
166	<br />
167	</div>
168
169	Take a look to an existing CSS file like <a href="themes/alphacube.css">alphacube.css</a> or <a href="themes/mac_os_x.css">mac_os_x.css</a> (with PNG image and IE specific code)
170
171	<h2>Themes included in this release</h2>
172	<ul>
173	<li>Default (<script>Application.addViewThemeButton('dialog')</script>)</li>
174	<li>MacShadow (<script>Application.addViewThemeButton('mac_os_x')</script>)</li>
175	<li>Lighting (from Emanuel Mila) (<script>Application.addViewThemeButton('bluelighting')</script>)</li>
176	<li>Nuncio (from Brice Joly) (<script>Application.addViewThemeButton('nuncio')</script>)</li>
177	<li>Alphacube from <a href="http://art.gnome.org/themes/metacity/1171">Art.Gnome.Org</a> (<script>Application.addViewThemeButton('alphacube')</script>)</li>
178	<li>Spread (Alphacube with a different color scheme) (<script>Application.addViewThemeButton('spread')</script>)</li>
179	<li>DarkX from <a href="http://art.gnome.org/themes/metacity/708">Art.Gnome.Org</a> (<script>Application.addViewThemeButton('darkX')</script>)</li>
180	<li>Lighting from <a href="http://art.gnome.org/themes/metacity/708">Mila</a> (<script>Application.addViewThemeButton('lighting')</script>)</li>
181	<br/>
182	<li>Default dialog (<script>Application.addViewThemeDialogButton('alert')</script>)</li>
183	<li>Alphacube as dialog (<script>Application.addViewThemeDialogButton('alphacube')</script>)</li>
184
185	</ul>
186	</div>
187	</div>
188	<script type="text/javascript">Application.addRightColumn()</script>
189
190	</body>
191
192	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: ether_statistics/web/resources/js/windows_js_1.3/documentation/themes.html @ 569

Download in other formats: