📄 themes.html.svn-base
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Prototype Window Class : Themes</title> <!-- Prototype Window Class Part --> <script type="text/javascript" src="javascripts/prototype.js"> </script> <script type="text/javascript" src="javascripts/effects.js"> </script> <script type="text/javascript" src="javascripts/window.js"> </script> <script type="text/javascript" src="javascripts/debug.js"> </script> <link href="themes/default.css" rel="stylesheet" type="text/css" > </link> <link href="themes/debug.css" rel="stylesheet" type="text/css" > </link> <link href="themes/nuncio.css" rel="stylesheet" type="text/css" > </link> <link href="themes/alphacube.css" rel="stylesheet" type="text/css" > </link> <link href="themes/darkX.css" rel="stylesheet" type="text/css" > </link> <link href="themes/spread.css" rel="stylesheet" type="text/css" > </link> <link href="themes/mac_os_x.css" rel="stylesheet" type="text/css" > </link> <link href="themes/alert.css" rel="stylesheet" type="text/css" > </link> <!-- Doc Part--> <link href="stylesheets/style.css" rel="stylesheet" type="text/css" > </link> <script type="text/javascript" src="js/application.js"> </script> </head><body> <script>Application.insertNavigation('themes')</script> <div class="content"> <h2 class="first"> Overview</h2> 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/> 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/> A window is divided into 9 parts, 4 corners, 4 borders and the main content in the middle.<br/><br/> 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/> <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' > <span style="color:#236e25;">/* North-West corner */</span><br /> .THEME_NAME_nw {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">10px</span>;<br /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* North border */</span><br /> .THEME_NAME_n {<br /> <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 /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* North-East corner */</span><br /> .THEME_NAME_ne {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">10px</span>; <br /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">25px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* West border */</span><br /> .THEME_NAME_w {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* East border */</span><br /> .THEME_NAME_e {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>; <br /> }<br /> <br /> <span style="color:#236e25;">/* South-West corner */</span><br /> .THEME_NAME_sw {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* South border */</span><br /> .THEME_NAME_s {<br /> <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 /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* South-East corner */</span><br /> .THEME_NAME_se {<br /> <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 /> <span style="color:#88134f;">width</span>:<span style="color:#0000ff;">7px</span>;<br /> <span style="color:#88134f;">height</span>:<span style="color:#0000ff;">7px</span>;<br /> <span style="color:#88134f;">vertical-align</span>:<span style="color:#9b4400;">top</span>;<br /> }<br /> <br /> <span style="color:#236e25;">/* Resize button */</span><br /> .THEME_NAME_sizer {<br />⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -