Breadcrumb styling issue
Last Post 11/09/2010 2:11 PM by BAESDev. 2 Replies.
Author Messages
BAESDev
Nuke Newbie
Nuke Newbie
Posts:6


--
11/09/2010 10:24 AM  
I'm a DNN beginner, and this one is driving me nuts, I have a problem with my breadcrumb styling that I can't find.

In my skin.css file, I have the following lines...
/*-- Breadcrum token                   --*/ .you-are, .breadcrum, a.breadcrum:link, a.breadcrum:visited, a.breadcrum:active { color: #cccccc; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; }
/*-- Breadcrum token hover             --*/ a.breadcrum:hover { color: #008770; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: underline; }

When I hover, it is using the styling from a.breadcrum:hover. But I can't figure out where the other styling is coming from. The font size I think is from default.css, where I have it set at medium. I cannot find the link styling anywhere, at the moment it is purple which is awful.

I'd like to know where to look for these, (and a method for figuring it out, I managed to get the color of the purple using the web developer toolbar, but can't figure out which file it's in) but probably even more helpful would be a list of default styles, so I can just override them in my skin.css instead of having to search everywhere to find them.

Thanks in advance for any help you can offer.

-Liz

Joseph Craig
DNN MVP
Posts:11667


--
11/09/2010 11:58 AM  
The techniques in this tutorial:

Troubleshooting DotNetNuke Skins

will help you at least identify the styles that are being applied.  You can also use tools that are now (since that tutorial was published) present in IE and Chrome.

Joe Craig, Patapsco Research Group
Complete DNN Support
BAESDev
Nuke Newbie
Nuke Newbie
Posts:6


--
11/09/2010 2:11 PM  
Thanks, I've been working my way through the tutorials and hadn't gotten to that one yet, so I'll go there next.
While I was waiting for a reply, I read more about inheritance and implemented some resets in my skin.css file. Adding a div reset got rid of my problem. Thought I'd post for anyone having a similar issue.

div {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: inherit;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}


---