HomeHome Product Discus... Product Discus...SmithCartSmithCartCSSCSS
Previous
 
Next
New Post
9/7/2010 6:57 AM
 
CSS 

In doing some investigation while looking at the stylesheet for the category menu, the reason that the stylesheets aren't working is that it can't find the resource.

I tried copying the categorymenu.css to the same folder as my skins.css, but it still didn't find it.

Then, in digging further, I noticed that the same issue happens with the Featured Products. When I looked at the stylesheets using FireBug, it's saying that the resource for the css is unavailable or has been moved.

I'm still investigating, but it looks like DNN is looking in the wrong place for the stylesheets, and not picking them up from the appropriate folder under DesktopModules.

I'm still investigating, and will let you all know what I find. I'm going to try hard-coding the path for the stylesheets next in the ASCX files and see if that fixes it.

 
New Post
9/7/2010 7:22 AM
 

Hmm.... in digging a little further, it looks like it's looking in the tabID... here's the location that it's trying to find for the CSS file on my site:

"http://sitename.com/Home/FunPatchStore/tabid/84/categoryid/382/CategoryMenu.css"

... now to figure out why it's looking for it there....

 
New Post
9/7/2010 7:38 AM
 

Alrighty then.

Changing the ASCX file to say:

<link href="/DesktopModules/Smith.CategoryMenu/CategoryMenu.css" rel="stylesheet" type="text/css" /> *DID* apply the stylesheet. However, it was over-ridden by skin.css

Since the CategoryMenu uses the Treeview, and the Treeview uses standard "a" tags, and since the browser will render the CSS sheets in the order it loads them, that's why the css is being over-ridden now.

Moving forward.... :)

 
New Post
9/7/2010 1:07 PM
 

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!

 
New Post
9/7/2010 1:57 PM
 

Greg,

You would make a great addition to the team but not sure you would like the weather out here in southern california we dont get much snow :)

Dave


At your service,
Dave Smith
DotNetNuke Consulting, DotNetNuke Store and DNN Ecommerce
 
New Post
9/8/2010 5:53 AM
 

I could live without snow.... I hate the 6 month winters here.

But... I'd rather deal with winters than earthquakes.... <Shudder... literally>

 
Previous
 
Next
HomeHome Product Discus... Product Discus...SmithCartSmithCartCSSCSS