Style Sheets For YoDJ
Note:
- Colors can be given in Hex (with leading '#') or as color name
- Useful sites for HTML Color Names
- The default stylesheet uses hex colors because the W3C validator prefers them, but you can
safely use the named color styles for better readability when you make your own stylesheet
- Building your own style is easy. In general, you will want to change the colors. Just
change one color entry at a time so you can see the effect
YoDJ.css
/* Default color. Not used, but here as a filler in case YoDJ fails totally */
body {
background-color: #f0e68c ;
color: #000000;
font-family: impact, arial, sans-serif;
font-size: 10pt;
}
/* General background color for screens */
#BodyColor {
font-size:10px;
font-family: arial, verdana, sans-serif, sans-serif;
color:black ;
background-color: #f0e68c;
}
/*
* colors for directory tree on top frame of YoDJ. This is the horizontal breadcrumb
* directory tree that shows a clickable path to a folder. The rightmost entry is the current
* directory and not clickable
*/
.hdirtree {
margin-left: 10px;
margin-bottom: 0px;
}
.hdirtree ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
}
.hdirtree li {
display: block;
padding: 5px 5px 5px 0.5em;
border-right: 2px solid white;
background-color: #B22222 ;
color: #F0FFFF ;
text-decoration: none;
display: inline;
}
.hdirtree li a {
display: block;
padding: 5px 5px 5px 0.5em;
background-color: #B22222 ;
border-bottom: 4px solid green;
border-top: 4px solid green;
color: #F0FFFF ;
text-decoration: none;
width: auto;
display: inline;
font-family: arial, verdana, sans-serif;
font-size: 10pt;
}
/*
* :hover is mouseover color
*/
.hdirtree li a:hover {
background-color: #FF0000 ;
color: #F0FFFF ;
display: inline;
}
/*
* Same functionality as hdirtree, but intended to be smaller. These directory bread crumbs
* show up when the user searches for something. Each found entry has a directory tree to get
* to the entry - hence the smaller fonts
*/
.htinydirtree {
margin-left: 2px;
margin-bottom: 2px;
}
.htinydirtree {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
background-color: blue ;
}
.htinydirtree ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
background-color: blue ;
}
.htinydirtree li {
display: block;
padding: 1px;
border-right: 2px solid white;
background-color: #B22222 ;
text-decoration: none;
display: inline;
}
.htinydirtree li a {
display: block;
padding: 2px 2px 2px 2px;
background-color: #B22222 ;
color: #FFFFFF ;
text-decoration: none;
width: auto;
display: inline;
font-family: arial, verdana, sans-serif;
font-size: 8pt;
font-style: italic;
}
.htinydirtree li a:hover {
background-color: #FF0000 ;
color: #FFFFFF ;
display: inline;
}
/*
* Command buttons on the bottom of frame (Play select etc)
*/
.cmdbutton {
display: block;
list-style: none;
color: black ;
text-decoration: none;
width: auto;
display: inline;
}
ul.cmdbutton {
display: block;
list-style: inline;
width: auto;
display: inline;
}
li.cmdbutton {
display: block;
padding-top: 2px;
padding-bottom: 2px;
list-style: none;
background-color: #B22222;
color: #F0FFFF ;
text-decoration: none;
display: inline;
}
.cmdbuttonlist {
display: block;
border: 2px solid green;
padding-top: 4px;
padding-bottom: 4px;
background-color: #B22222 ;
color: #F0FFFF ;
text-decoration: none;
width: auto;
display: inline;
font-family:arial, verdana, sans-serif, sans-serif;
font-size: 10pt;
}
.cmdbuttonslistHover {
display: block;
padding-top: 4px;
padding-bottom: 4px;
background-color: #FF0000 ;
color: #F0FFFF ;
text-decoration: none;
width: auto;
display: inline;
font-family:arial, verdana, sans-serif;
font-size: 10pt;
}
/*
* Colors for table listings. In this case we have two colors (The default)
* You can change the colors in row1 and row2 for any combination
*/
.tablerow1 {background-color:#D2B48C; color:black; font-size: 11pt;}
.tablerow1 td a {background-color:#D2B48C; text-decoration:none; color:black; }
.tablerow1 td a:visited {background-color:#D2B48C; text-decoration:none; color:black;}
.tablerow2 {background-color:#F5DEB3; color:black; font-size: 11pt;}
.tablerow2 td a {background-color:#F5DEB3; text-decoration: none;color:black;}
.tablerow2 td a:visited {background-color:#F5DEB3; text-decoration: none;color:black;}
/*
* Used to style a description assigned to a folder from a note file
*/
.FolderDescription {font-style: italic; font-size:105%;}
/*
* used to style a description assigned to a file from a note file
*/
.FileDescription {font-style: italic; font-size:105%;}
/* height can be overridden by ini file cssframeheight param */
#cssframe { overflow: auto; clear: both;
border-top: groove lightgrey; border-bottom: groove lightgrey; height:30em; }
/* style for logo or site name at top */
#Logo {margin-bottom: 22px; text-align: center; font-size:20pt; font-style:italic;
font-weight:bolder; font-family: impact, sans-serif; }
/* used to style description when user looks at a Playlist */
#PlayListLogo { text-align: left; font-size:170%; font-style:italic; font-weight:bolder;}
/* style and position controls for search box (on upper right */
#SearchBox { float: right; margin-top: -30px;}
/* style for button in search box */
#searchbutton {background-color: #B22222 ; color: #F0FFFF; font-size: 10pt;}
/* style for title on search results */
#SearchResults { text-align: left; font-size:170%; font-style:italic; font-weight:bolder; }
/* style for search results MSG where no match is found */
#NoMatch { margin-top:50px; font-size:175%; text-align: center; }
/* style for string that was searched for on no match */
#NoMatchString { margin-top: 10px; font-style: italic; font-weight: bolder; }
/* styling for text at bottom of screen */
#BottomInfo { font-family:times, arial, sans-serif; font-size: 9pt;}
Last Modified
03/15/2010
Questions?
email