jquery.fancytree/demo/skin-custom/custom.css

jQuery tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

/*******************************************************************************
 * Sample for a Dynatree custom stylesheet.
 * This is expected to be included after the standard ui.dynatree.css, thus
 * overridung the defaults.
 */
.dynatree-has-children span.dynatree-icon
{
	background-position: 0 0;
	background-image: url("doc_with_children.gif");
}

.dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
{
	background-image: url("folder_docs.gif");
}

.dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
{
	background-image: url("folder_images.gif");
}


/*******************************************************************************
 * Node titles
 */

span.dynatree-has-children a
{
	font-style: oblique;
}

span.dynatree-selected a
{
	color: green;
	font-style: italic;
}

span.dynatree-active a,
span.dynatree-active a:hover
{
	border: 1px solid maroon;
	background-color: #FAD8F0 !important; /* reddish */
}


/*******************************************************************************
 * Custom node classes (sample)
 */

span.custom1 a
{
	background-color: #ffffbb;
	color: maroon;
}
span.custom1 span.dynatree-icon
{
	background-position: 0 0;
	background-image: url("customDoc2.gif");
}

span.custom2 a
{
	font-weight: bold;
	background-color: silver;
	color: navy;
}
span.custom2 span.dynatree-icon
{
	background-position: 0 0;
	background-image: url("folder_page.gif");
}