ImagePicker setting Node Image Url

Mar 16, 2011 at 10:42 AM

Hi Alessandro,

Is it possible to gain access and set the Node ImageUrl.

After my ImagePicker is populated and user is browsing for Images the open folder icon is displayed as a file which sometimes maybe confusing. I want to clearly differentiate between a folder and a (specific perhaps) image file by adjusting the icon. Trying to customize this.

Thanks.

Coordinator
Mar 17, 2011 at 12:16 AM

If I understand you correctly, you seem to want to change the icons in the treeview displayed by the imagepicker and provide some custom styling. 

We have various extension points for this, and the easiest is to grab the autogenerated css and modify the styling as you see fit. The section in the following url will get you started and I'll let you know exactly which styles to change. 

http://docs.typps.com/2010/10/html-editor.html#styling

However,  I have just noticed there is a bug when retrieving the autogenerated css. I shall fix it and upload my changes later today and let you know here when it's ready.

Alessandro

Coordinator
Mar 17, 2011 at 12:58 AM

A new changeset is up.

http://typps.codeplex.com/SourceControl/changeset/changes/62761

Grab this one as it has some designer related fixes, more specifically with the collection of autogenerated css. After you have obtained the css, I believe the styles you want to override with your own are one of the following. I think the names of the styles is quite descriptive as to what they do and the html elements they apply to. htreeview is our custom light weight treeview, most likely the ones you want to override are the ones that reference the icons. 

Alessandro

/*containing the treeview nodes*/
.htreeview ul{}
.htreeview ul li
{
	white-space: nowrap;
	padding: 2px 0 0 0;
	float: left;
	clear: both;
}
.htreeview ul ul
{
	margin: 2px 0 2px 10px;
}
.htreeview ul li img
{
	border: none;
	vertical-align: middle;
	margin: 0 2px 0 0;
}
.htreeview li span
{
	text-decoration: none;
	color: #000;
	cursor: pointer;
}
.htreeview span.clickablenonlink:hover
{
	color: #686f12;
	text-decoration: underline;
}
.htreeview span.nonlink span:hover
{
	color: #686f12;
	text-decoration: underline;
}
.htreeview li.leafnode
{
	padding-left: 22px;
	margin-left: 7px;
	background: url( "typps.axd?d=Resources.Skins.KnightRider.Images.Shared.folderempty.gif&t=634359219920859375" ) 0 0 no-repeat;
	padding-bottom: 2px;
}
.htreeview .clickablenonlink
{
	cursor: pointer;
}
.htreeview .nodecollapse
{
	background: url(  "typps.axd?d=Resources.Skins.KnightRider.Images.Shared.folderopen.gif&t=634359219920859375" ) 0 0 no-repeat;
	width: 30px;
	float: left;
	cursor: pointer;
	margin: 0 2px 0 0;
}
.htreeview .nodeexpand
{
	background: url(  "typps.axd?d=Resources.Skins.KnightRider.Images.Shared.folderclosed.gif&t=634359219920859375" ) 0 0 no-repeat;
	width: 30px;
	float: left;
	cursor: pointer;
	margin: 0 2px 0 0;
}
.htreeview .nodeselected
{
	background-color: #acb075 !important;
}
.htreeview .childnodeselected
{
	background-color: #F5FFFA !important;
}
.htreeview .parentnodeselected
{
	background-color: #FFE4E1 !important;
}
.htreeview ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}
.htreeview ul.nodehide
{
	display: none;
}