New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...dnnNav firefox style questiondnnNav firefox style question
Previous
 
Next
New Post
5/7/2010 10:14 AM
 
memond

www.manchesternh.gov
Joined: 9/20/2007
Posts: 253
Hi
I finally got everything pretty in IE but then noticed that Firefox AND Safari are completely ignoring all my hard work :)  -- I should add that in FF and Safari the menu is ignoring padding and background and the links are black. -- Could someone tell me what I need to change? here are my ascx menu control and my skin.css styles...


ID="dnnNAV"
ExpandDepth="6"
StartTabID="1705"
Level="Child"
PopulateNodesFromClient="false"
ProviderName="DNNMenuNavigationProvider"
IndicateChildren="true"
ControlOrientation="Horizontal"
CSSControl="SchoolMenu">
           

/* Menu CSS */
ul.SchoolMenu
 {
 padding-left:6px;
        white-space: nowrap;
 background-image: url(menu-bar.gif);
 background-repeat: repeat-x;
 }

li.SchoolMenu
 {
 padding-left:6px;
        white-space: nowrap;
 background-image: url(menu-bar.gif);
 background-repeat: repeat-x;
 }

.SchoolMenu 
 li
 {
 padding:2px 6px;
        white-space: nowrap;
 background-image: url(menu-bar.gif);
 background-repeat: repeat-x;
 }

.SchoolMenu.root
 {
 padding:2px 6px;
 white-space: nowrap;
 color: #ffffff
 }

.SchoolMenu.sel
 {
 background-color:#00cc66;
 text-decoration: underline;
 }

.SchoolMenu.m
 {
 padding:2px 2px;
 white-space:nowrap;
 /* background-image: url(menu-bar.gif); */
 background-color: #003D7C;
 border: #E3E3E3 1px solid;
 /* background-repeat: repeat-x; */
 color: #ffffff;
 }

.SchoolMenu.mi.hov
 {
 background-color: #7B9CBD;
 }

.SubMenu
 li
 {
 margin-bottom:0px;
        white-space: nowrap;
 background-image: url(menu-bar.gif);
 background-repeat: repeat-x;
 color: #ffffff;
 }



/* override white breadcrumbs */
.whitelinkspecial {
 text-decoration: none;
 color: #ffffff;
 font-size : x-small;
 font-weight : normal;
 font-family : Tahoma, Arial, Helvetica;
}
A.whitelinkspecial:link
{
 text-decoration: none;
 color: #ffffff;
 font-size : x-small;
 font-weight : normal;
 font-family : Tahoma, Arial, Helvetica;
}
A.whitelinkspecial:visited
{
 text-decoration: none;
 color: #ffffff;
 font-size : x-small;
 font-weight : normal;
 font-family : Tahoma, Arial, Helvetica;
}
A.whitelinkspecial:hover
{
 text-decoration: underline;
 color: #ffffff;
 font-size : x-small;
 font-weight : normal;
 font-family : Tahoma, Arial, Helvetica;
}
A.whitelinkspecial:active
{
 text-decoration: none;
 color: #ffffff;
 font-size : x-small;
 font-weight : normal;
 font-family : Tahoma, Arial, Helvetica;
}





/* override login and other skin object link styles */
.SkinObject
{
    font-weight: normal;
    font-size: x-small;
    color: #555412;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
}
A.SkinObject:link
{
    text-decoration: none;
    color: #555412;
}
A.SkinObject:visited
{
    text-decoration: none;
    color: #555412;
}
A.SkinObject:hover
{
    text-decoration: underline;
    color: #555412;
}
A.SkinObject:active
{
    text-decoration: none;
    color: #555412;
}



/* override hyperlink styles */
A:link
{
    text-decoration: underline;
    color: #999999;
}
A:visited
{
    text-decoration: underline;
    color: #999999;
}
A:hover
{
    text-decoration: underline;
    color: #999999;
}
A:active
{
    text-decoration: underline;
    color: #999999;
}





.msdlogo {
 background-image: url(msd-logo.jpg);
 height:70px;
 background-repeat: no-repeat;
}

.footer {
 background-image: url(footer.gif);
 background-repeat: no-repeat;
 height:20px;
}

.breadcrumbbar {
 background-image : url(breadcrumb-bar.gif);
 background-position: top;
 background-repeat: no-repeat;
 padding-right: 8px;
 height:30px;
 color: #ffffff;
}

.menubar {
 background-image : url(nav-bar.gif);
 /* background-position: top; */
 background-repeat: no-repeat;
 background-color: #ffffff;
 /* padding-right: 8px; */
 height:30px;
 /* background-position: bottom; */
}

.banner {
 background-image: url(schoolheader-master-short.jpg);
 height:195px;
 background-repeat: no-repeat;
}

.contenttopbar {
 background-image: url(content-blue-bar.gif);
 height:20px;
 background-repeat: no-repeat;
 background-position: bottom;
}

.leftpane {
 border-left: #E3E3E3 1px solid;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 4px;
 background-color: #F1F0F0;
}

.contentpane {
 width: 100%;
 background-image: url(gray-gradient.gif);
 background-repeat: repeat-x;
 background-position: bottom;
 border-right: #E3E3E3 1px solid;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 6px;
 background-color: #F1F0F0;
}

.subcontentpane {
 width: 100%;
 border-right: #E3E3E3 1px solid;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 6px;
 background-color: #F1F0F0;
}

.contentLowLft {
 width: 50%;
 background-color: #F1F0F0;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 6px;
}
.contentLowRt {
 width: 50%;
 background-color: #F1F0F0;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 6px;
 border-right: #E3E3E3 1px solid;
}

.rightpane {
 width: 250px;
 background-color: #F1F0F0;
 padding-left: 6px;
 padding-right: 4px;
 padding-top: 6px;
 border-right: #E3E3E3 1px solid;
}

Michael Emond
City of Manchester NH
www.manchesternh.gov
 
New Post
5/7/2010 11:17 AM
 
Albert Sala


www.psdtodnn.com
Joined: 10/30/2009
Posts: 441

Hi,

Any chance you can provide a link to the skin in action, or provide a link to the skin file, it's much easier to help find a solution if I can see the skin in action.

Thanks,

Rick.

PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
5/7/2010 11:34 AM
 
memond

www.manchesternh.gov
Joined: 9/20/2007
Posts: 253
Sure. Thanks for helping...
The url is http://www.manchesternh.gov/website/D... 

And the login is ID: testuser password: mhtschool

There's no edit access but you will be able to see the skin in action.
Thanks again.
Mike
Michael Emond
City of Manchester NH
www.manchesternh.gov
 
New Post
5/7/2010 12:18 PM
 
Albert Sala


www.psdtodnn.com
Joined: 10/30/2009
Posts: 441

Mike,

The NAV your using isn't rendered as a list which is why FireFox and Safari are ignoring the styles you've setup for them.

IE isn't the best browser to be testing in, and many website developers (including myself) will advise you do your build and test in Firefox first, and then check it in other browsers, as it is one of the most consistent browsers with regards to CSS and rendering.

I also think the way you're defining your selectors is incorrect for the way the menu is built .SchoolMenu.root is looking for an element that has both styles applied to it, whereas I think you mean .SchoolMenu .root (with a space between the selectors) because the menu is wrapped in a span with the class of SchoolMenu containing spans with classes of root (this is the same for the other classes you're targeting: .mi, .sel etc).

I think the best thing to do is test this in Firefox, using the Firebug plugin (https://addons.mozilla.org/en-US/fire...) this will let you view the rendered code (bear in mind that this is not the same as the source code, because it uses javascript to inject the various classes). From this you'll be able to setup the CSS correctly.

If you can, get the menu to render as a list as this is easier to work with because the root items are one list and sub menu are another. Timo has an example of this available here: http://dnnskinextensions.codeplex.com...

Please let me know if this helps, or if there's anything else.

Regards,

Rick.

PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
5/7/2010 12:44 PM
 
Beatriz Oliveira


Joined: 5/13/2004
Posts: 46
From what I've tested, this seems to be a DNN bug, since your style ShoolMenu is not being applied to the menu structure neither in FF or Safari.
You have to include the following in your NAV definition:

CSSContainerSub="SchoolMenu_submenu"
CSSControl="SchoolMenu"
CSSNode="SchoolMenu"

Then change your CSS accordingly.
Beatriz Oliveira
Founder of Bind New Media & Design and creator of Bind Tuning
Linked In | Twitter
 
 Page 1 of 2
12Next 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...dnnNav firefox style questiondnnNav firefox style question


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.