Overview
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:
By convention the images used in the CSS files are in THEME_NAME directory (it's just a convention, do it as you feel!)
A window is divided into 9 parts, 4 corners, 4 borders and the main content in the middle.
View a detail
template CSS file (you can copy-paste it to start a new theme). See
Art.Gnome.Org for cool designs. I used two of them, it's easy to integrate in the class.
/* North-West corner */
.THEME_NAME_nw {
background: transparent url(THEME_NAME/TOP_LEFT_IMAGE.gif) no-repeat 0 0;
width:10px;
height:25px;
}
/* North border */
.THEME_NAME_n {
background: transparent url(THEME_NAME/TOP_IMAGE.gif) repeat-x 0 0;
height:25px;
}
/* North-East corner */
.THEME_NAME_ne {
background: transparent url(THEME_NAME/TOP_RIGHT_IMAGE.gif) no-repeat 0 0;
width:10px;
height:25px;
}
/* West border */
.THEME_NAME_w {
background: transparent url(THEME_NAME/LEFT_IMAGE.gif) repeat-y top left;
width:7px;
}
/* East border */
.THEME_NAME_e {
background: transparent url(THEME_NAME/RIGHT_IMAGE.gif) repeat-y top right;
width:7px;
}
/* South-West corner */
.THEME_NAME_sw {
background: transparent url(THEME_NAME/BOTTOM_LEFT_IMAGE.gif) no-repeat 0 0;
width:7px;
height:7px;
}
/* South border */
.THEME_NAME_s {
background: transparent url(THEME_NAME/BOTTOM_IMAGE.gif) repeat-x 0 0;
height:7px;
}
/* South-East corner */
.THEME_NAME_se {
background: transparent url(THEME_NAME/BOTTOM_RIGHT_IMAGE.gif) no-repeat 0 0;
width:7px;
height:7px;
vertical-align:top;
}
/* Resize button */
.THEME_NAME_sizer {
width:7px;
height:7px;
background: transparent url(THEME_NAME/RESIZE_IMAGE.gif) no-repeat 0 0;
cursor:se-resize;
}
/* Close button */
.THEME_NAME_close {
width: 23px;
height: 23px;
background: transparent url(THEME_NAME/CLOSE_IMAGE.gif) no-repeat 0 0;
position:absolute;
top:0px;
right:11px;
cursor:pointer;
z-index:1000;
}
/* Minimize button */
.THEME_NAME_minimize {
width: 23px;
height: 23px;
background: transparent url(THEME_NAME/MINIMIZE_IMAGE.gif) no-repeat 0 0;
position:absolute;
top:0px;
right:55px;
cursor:pointer;
z-index:1000;
}
/* Maximize button */
.THEME_NAME_maximize {
width: 23px;
height: 23px;
background: transparent url(THEME_NAME/MAXIMIZE_IMAGE.gif) no-repeat 0 0;
position:absolute;
top:0px;
right:33px;
cursor:pointer;
z-index:1000;
}
/* Title bar */
.THEME_NAME_title {
float:left;
height:14px;
font-size:14px;
text-align:center;
margin-top:2px;
width:100%;
color:#123456;
}
/* Content div (not used for url) */
.THEME_NAME_content {
overflow:auto;
color: #000;
font-family: Tahoma, Arial, sans-serif;
font-size: 10px;
background:#FDFDFD;
}
/* Overlay for modal window, spécify color and opacity (three times to work on all browsers */
.overlay_THEME_NAME {
background-color: #85BBEF;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
Take a look to an existing CSS file like
alphacube.css or
mac_os_x.css (with PNG image and IE specific code)
Themes included in this release
- Default ()
- MacShadow ()
- Lighting (from Emanuel Mila) ()
- Nuncio (from Brice Joly) ()
- Alphacube from Art.Gnome.Org ()
- Spread (Alphacube with a different color scheme) ()
- DarkX from Art.Gnome.Org ()
- Lighting from Mila ()
- Default dialog ()
- Alphacube as dialog ()