All right then!
A couple of minor changes, and the stylesheet is going very well now for the Category module. I was even able to set a highlight around the currently selected category (which was a huge issue to me, when you have a tree with 300+ categories).
So, here's my CategoryMenu.ascx as it looks now:
<%@ control language="C#" autoeventwireup="true" inherits="Smith.DNN.Modules.CategoryMenu.CategoryMenu, App_Web_categorymenu.ascx.dd2a0b6c" %>
<link href="/DesktopModules/Smith.CategoryMenu/CategoryMenu.css" rel="stylesheet" type="text/css" />
<asp:TreeView
ID="tvCatMenu"
ExpandDepth="0"
PopulateNodesFromClient="true"
ShowLines="false"
ShowExpandCollapse="true"
NodeStyle-CssClass="NodeStyle"
SelectedNodeStyle-CssClass="SelectedNodeStyle"
ExpandImageUrl="~/DesktopModules/Smith.CategoryMenu/tv_expander.gif"
CollapseImageUrl="~/DesktopModules/Smith.CategoryMenu/tv_collapser.gif"
OnTreeNodePopulate="tvCatMenu_TreeNodePopulate"
OnSelectedNodeChanged="tvCatMenu_SelectedNodeChanged"
runat="server"
CssClass="SmithProdtext" />
... note especially the lines that say NodeStyle-CssClass="NodeStyle" and SelectedNodeStyle-CssClass="SelectedNodeStyle". Additionally notice that the link href at the beginning of the module is an absolute path now.
So... in my CategoryMenu.css I can now style to my heart's desire (thanks Scott for the push in the right direction in the other forum post).... so you can do things like this in your CSS file now:
.NodeStyle
{
width: 140px;
font-size: 12px;
display: block;
text-decoration: none;
color: #ffffff;
border: solid 1px Transparent;
padding: 2px 2px 2px 2px;
}
.NodeStyle:hover,
a.NodeStyle:hover,
.NodeStyle:link:hover,
a.NodeStyle:link:hover
{
font-size: 12px;
display: block;
text-decoration: none;
color: #003687;
border: solid 1px #71a9ff;
background-color: #c6ddff;
padding: 2px 2px 2px 2px;
}
.HoverNodeStyle
{
font-size: 12px;
display: block;
text-decoration: none;
color: #ffffff;
border: solid 1px Transparent;
padding: 2px 2px 2px 2px;
}
.HoverNodeStyle:hover,
a.HoverNodeStyle:hover,
.HoverNodeStyle:link:hover,
a.HoverNodeStyle:link:hover
{
font-size: 12px;
display: block;
text-decoration: none;
color: #003687;
border: solid 1px #71a9ff;
background-color: #c6ddff;
padding: 2px 2px 2px 2px;
}
.SelectedNodeStyle
{
font-size: 12px;
display: block;
text-decoration: none;
background-color: Orange;
color: #ffffff;
border: solid 1px Transparent;
padding: 2px 2px 2px 2px;
}
.SelectedNodeStyle:hover,
a.SelectedNodeStyle:hover,
.SelectedNodeStyle:link:hover,
a.SelectedNodeStyle:link:hover
{
font-size: 12px;
display: block;
text-decoration: none;
color: #003687;
border: solid 1px #71a9ff;
background-color: #c6ddff;
padding: 2px 2px 2px 2px;
}
You can, of course, play with that any way you wish... changing font size, color scheme, background colors, whatever, *WITHOUT* effecting the rest of the page's styles (which is, of course, important.)
Hey, Dave... you ready for me to move to Cali to work for you yet? <LOL>
Cheers!