Thread: Questions about the top menu in Version 9

I am currently undergoing the maddening task of converting from version 8 to version 9 - a lot of things are not working. The one that currently has me pulling my hair out is just trying to figure out what part of the style.css file I should modify to change the font of my top horiz menu. My menu is basically "stock" Skin_1 but I am unable to change the font size or the color of the menu items in the menu - they appear to be white on white. When I view the source of the page in the browser I see multiple references to multiple styles that are not even present in the style.css file. Here is an example of what I see for the "Home" menu item:

<td style="white-space:nowrap;"><a class="ctl00_aspnetMenu_1 aspnetMenu_StaticMenuItemStyle ctl00_aspnetMenu_3 aspnetMenu_Level1 ctl00_aspnetMenu_8" href="default.aspx" style="border-style:none;font-size:1em;">Home</a></td>

I cannot find any reference to "ctl00" anywhere in the style.css file. Can someone please help me make heads or tails out of this and how do I just change the font size and the color of the menu items so I can read them?

Thanks,
David

Just tried this here and it's working, see below:

In {root}/App_Themes/Skin_1/style.css,

.aspnetMenu_DynamicMenuItemStyle a:visited
{
...
font-family: Arial, Verdana, Sans-Serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
}

Or, if you want you can define you're own css class and reference it in your template.master's <asp:menu> section.

e.g.
<StaticMenuItemStyle CssClass="YourCustomStyle" />

I just changed every single color reference in all of the .aspnetMenu_xxxx styles to color:red; and nothing is changing.

the code in the template.master (I didn't change a thing)

<!-- TOP MENU -->
<asp:Menu ID="aspnetMenu" runat="server" Orientation="Horizontal" StaticTopSeparatorImageUrl="images/tab-sep.gif"
StaticEnableDefaultPopOutImage="False" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="<%$ Tokens:AppConfigUSInt, MaxMenuLevel %>">
<StaticSelectedStyle CssClass="aspnetMenu_StaticSelectedStyle" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="aspnetMenu_Level1" Font-Underline="False" />
<asp:MenuItemStyle CssClass="aspnetMenu_Level2" Font-Underline="False" />
</LevelMenuItemStyles>
<StaticMenuItemStyle CssClass="aspnetMenu_StaticMenuItemStyle" />
<DynamicSelectedStyle CssClass="aspnetMenu_DynamicSelectedStyle" />
<DynamicMenuItemStyle CssClass="aspnetMenu_DynamicMenuItemStyle" />
<DynamicMenuStyle CssClass="aspnetMenu_DynamicMenuStyle" />
<%--
These 2 styles below can't be added declaratively, it will be added later on the script
But needs to follow the naming convention {MenuId}_WhatEverStyle
--%>
<%--<DynamicHoverStyle CssClass="aspnetMenu_DynamicHoverStyle" />--%>
<%--<StaticHoverStyle CssClass="aspnetMenu_StaticHoverStyle" />--%>
</asp:Menu>
<!-- END TOP MENU -->



from style.css file in \App_Themes\Skin_1\style.css

/*****************************************/
/* ASP.Net Menu Styles */
/*****************************************/
.aspnetMenu_Level1
{
color: red;
/* color: #fff;*/
font-weight: normal;
font-size: 11pt;
cursor: hand;
cursor: pointer;
margin:0px;
padding: 0 1em!important;
line-height: 35px;
vertical-align:middle;
height: 33px;
}

.aspnetMenu_Level2
{
color: red;
/* color: #fff;*/
font-size: 11pt;
line-height: 30px;
padding: 2px;
font-weight: bold;
}


/*
These are the standard styles for the asp.net menu. It follows a naming convention for everything to work properly.
The format is {MenuId}_WhatEverStyle.
*/
.aspnetMenu_StaticSelectedStyle
{
color:red;
/*color: #000000;*/
}

.aspnetMenu_StaticMenuItemStyle
{
}

.aspnetMenu_StaticMenuItemStyle a:active,
.aspnetMenu_StaticMenuItemStyle a:link,
.aspnetMenu_StaticMenuItemStyle a:visited,
.aspnetMenu_StaticMenuItemStyle a:hover
{
color: red;
/*color: #fff;*/
text-decoration: none;
font-weight: bold;
font-size: 11pt;
cursor: hand;
}

.aspnetMenu_DynamicSelectedStyle
{
background: #cccccc;

}

.aspnetMenu_DynamicMenuItemStyle
{
color: red;
background-image: url(images/menu-bg.png);
border: 0px;
font-size: 9pt;
}

/*
These are dynamic styles that can't be declared on the template.ascx, name needs to follow convention instead.
*/

.aspnetMenu_StaticHoverStyle Hover
{
color: red;
/*color: #ffffff;*/
font-size: 9pt;
}

.aspnetMenu_DynamicHoverStyle
{
color:red;
/*background: #DDDEE0;*/
border:0;
font-size: 9pt;
}


.aspnetMenu_DynamicMenuItemStyle a:active,
.aspnetMenu_DynamicMenuItemStyle a:link,
.aspnetMenu_DynamicMenuItemStyle a:visited
{
font-size: 9pt;
color: red;
/*color: #000000;*/
line-height: 15pt;
padding-left: 4px;
padding-right: 50px;
width: 100%;
text-decoration: none;


}
.aspnetMenu_DynamicMenuItemStyle a:hover
{
text-decoration:underline;
color: #4776BD;
}

.aspnetMenu_DynamicMenuStyle
{
z-index: 999;
}

There's a nice thread here, have a look.

So the code that is supplied with the skin doesn't work? Why not supply a correct style.css file with the sample skin_1? I'm just trying to use the code that is supplied and it does not work - do you have an updated style.css file that works out of the box? Do I have to write java code (which I do not know how to write) to change the color and size of the font of the menu?

Having the same exact issue as shark92651 -- I'm using the "out of the box" template.master and none of the CSS styling in style.css is affecting the top horinzontal menu.

When the menu's fly out, it's white text on very light grey -- completely unreadable.

What's controlling these colors and styling? I've been pulling my hair out for hours now.

It is absolutely maddening that this software is so difficult to work with/figure out! I have been a developer for almost 25 years, having programmed in languages from assembly to Fortran to C (and some .NET as well). Trying to trace where things are happening is frustrating and, all too often, fruitless as well. What is with these divs that are impossible to find that are named something like "ctl00"? Why is there no detailed documentation on customization? Do they have some unwritten agreement with all the 3rd party outfits that specialize in doing customizations to make it next to impossible for anyone else to figure out how to do customizations? For what they charge for this software, it should be the easiest to customize, most well documented software on the market!!!

Originally Posted by mnburch

It is absolutely maddening that this software is so difficult to work with/figure out! I have been a developer for almost 25 years, having programmed in languages from assembly to Fortran to C (and some .NET as well). Trying to trace where things are happening is frustrating and, all too often, fruitless as well. What is with these divs that are impossible to find that are named something like "ctl00"? Why is there no detailed documentation on customization? Do they have some unwritten agreement with all the 3rd party outfits that specialize in doing customizations to make it next to impossible for anyone else to figure out how to do customizations? For what they charge for this software, it should be the easiest to customize, most well documented software on the market!!!

Hi mnburch,
I know this reply will come a month too late but maybe it will help others as well.

All of the ctlNN items are intrinsic to asp.net web controls and not aspdotnetstorefront itself.

When you notice this you should be looking for an asp.net built-in web control, user control, or composite control (you will need the full source version AspDotNetStoreFront for some of these).

If you are unfamiliar with these controls you will find almost too much documentation via the Microsoft msdn library as well as several support sites.

Just to frame things a little bit. AspDotNetStorefront is built using well documented technology. If you know asp.net webforms and its counter parts you will very much know where to go for information. It may help to switch your paradigm from where this control is documented on AspDotNetStorefront to:

1. Identify what particular Microsoft asp.net technology you are working with. E.g. asp:Menu
2. Research how the Microsoft asp:Menu works.
3. Review the implementation of the control in the AspDotNetStorefront code.
4. Determine if it fits your specific needs.
5. Make appropriate changes.

I know all of this can be very cumbersome for someone to learn. AspDotNetStorefront is an orchestra of existing technology, all separate, playing together. You are not just working with c# (or vb.net) AspDotNetStorefront. You will have to learn:

C# (vb.net) semantics
asp.net
webforms and the asp.net page life cycle.
various Microsoft .net frameworks
XML and xslt
Html and JavaScript
all of this which wraps the global implementation of http, https and various web protocols.

Last we are marrying this technology to a business purpose, mostly in some sort of online retailing, electronic commerce where money changes hands for goods. Adding that as what you need to know to make successful use of aspdotnetstorefront, i think it is easy to understand why DevNet partners play such an important role in the managing and customizing this software.

There is no unwritten agreement between us ( My company is a DevNet partner ) and AspDotNetStorefront. We worked our butts off to know it as well as we do.

(Shameless plug) Morrison Consulting has been conducting the AspDotnetStorefront orchestra for almost 6 years now. We would love to help you grow a successful business.