Last post Feb 09, 2008 03:09 PM by Antilles128
Feb 06, 2008 08:00 PM|Swegen|LINK
sitemap info is stored in a database and when I run my site, the html is generated ok.
But I would like to change the CSS for the menu adapter, but since I'm using the version from Codeplex, I do not have any CSS files at hand. It looks as if they're "generated" on the fly.
How can I change the CSS for my menu?
SqlSitemapProvider CSS Menu adapter
Feb 06, 2008 10:12 PM|Antilles128|LINK
I know it's bad form to answer a question with a question but,
If I'm understanding what you're asking correctly, wouldn't you just need to know what the CSS classes are that hold the menu modifications, then add them to your stylesheet?
Feb 07, 2008 04:21 PM|Swegen|LINK
Yes you're right! But I haven't figured how. I have this, which works ok.
The data is fetched through SiteMap provider correctly and I do get a menu, but not styled in any way.
View source on the page and the menu looks like this:
<div class="PrettyMenu" id="ctl00_Menu_Menu">
<a href="Default.aspx" mce_href="Default.aspx" class="AspNet-Menu-Link">
<a href="Summary.aspx?CategoryID=0" mce_href="Summary.aspx?CategoryID=0" class="AspNet-Menu-Link" title="News from greater Seattle">
<a href="Summary.aspx?CategoryID=2" mce_href="Summary.aspx?CategoryID=2" class="AspNet-Menu-Link" title="News from around the world">
<a href="Summary.aspx?CategoryID=3" mce_href="Summary.aspx?CategoryID=3" class="AspNet-Menu-Link" title="What's happening in baseball">
I have not linked to any CSS of my own yet, because I can't find any info about doing it, in the Codeplex version, the DLL version. Am I to link my own CSS stylesheet in the top with a new CssSelectorClass, substituting PrettyMenu with, lets say NavBar?
But then how about these lines, which seems to be loaded on the fly into my code:
type="text/css" rel="stylesheet"></link><link href="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFgGsIHlIO7nZQTSDB1YhjX_1PHAXKusvkis2UOPjd9S67bI_bohRNnO8SxwqIntn5g2&t=633378210288437500" type="text/css" rel="stylesheet"></link>
Before I used the CSSFriendlyAdapter for the Menu, the following CSS style worked with <div> <ul> <li> structure:
/* Main menu */
/* Submenu (Non-IE6 hovering) */
/* Submenu (IE6 hovering) */
I understand if it looks a bit confusing. At this moment, I'm wondering whether I should get rid of the DLL version and copy the code from the menu adapter sample site instead and make the changes in the adapter rendering the code, so that the classes adheres
to my own stylesheet.
Feb 07, 2008 05:36 PM|Antilles128|LINK
I'm thinking that by substituting the CssSelectorClass, the menu will ignore the stylesheet generated on the fly simply because the references are different.
As for the actual elements and such for modification, here's one from the Wrox-published Professional ASP.NET 2.0 Design book by Jacob Sanford (note: This is for a horizontal menu, so some of the values would need to be changed for a vertical menu (.AspNet-Menu-Horizontal
to .AspNet-Menu-Vertical, for one)):
.surfer5menu ul.AspNet-Menu /* Tier 1 */
.surfer5menu ul.AspNet-Menu ul /* Tier 2 */
.surfer5menu ul.AspNet-Menu ul li /* Tier 2 list items */
border:1px solid #cccccc;
.surfer5menu ul.AspNet-Menu ul ul /* Tier 3+ */
.surfer5menu li /* all list items */
.surfer5menu li:hover, /* list items being hovered over */
.surfer5menu a, /* all anchors and spans (nodes with no link) */
padding: 4px 12px 4px 8px;
background: transparent url(../images/arrowRight.gif) right center no-repeat;
.surfer5menu li.AspNet-Menu-Leaf a, /* leaves */
.surfer5menu li.AspNet-Menu-Leaf span
background-image: none !important;
.surfer5menu li:hover a, /* hovered text */
.surfer5menu li:hover span,
.surfer5menu li.AspNet-Menu-Hover a,
.surfer5menu li.AspNet-Menu-Hover span,
.surfer5menu li:hover li:hover a,
.surfer5menu li:hover li:hover span,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.surfer5menu li:hover li:hover li:hover a,
.surfer5menu li:hover li:hover li:hover span,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
background: transparent url(../images/activeArrowRight.gif) right center no-repeat;
.surfer5menu li:hover li a, /* the tier above this one is hovered */
.surfer5menu li:hover li span,
.surfer5menu li.AspNet-Menu-Hover li a,
.surfer5menu li.AspNet-Menu-Hover li span,
.surfer5menu li:hover li:hover li a,
.surfer5menu li:hover li:hover li span,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
background: transparent url(../images/arrowRight.gif) right center no-repeat;
Feb 07, 2008 05:57 PM|bpw|LINK
The CSS isn’t generated on the fly – the classes are applied to the menu on the fly. You need three CSS files – Menu.css, IEMenu6.css (latter in your BrowserSpecific folder) and another with your ‘PrettyMenu’ (or whatever you decided to call it) classes
in it. Your page head section should contain something like:
<link runat='server' rel='stylesheet' href='~/css/Import.css' type='text/css' id='AdaptersInvariantImportCSS' />
<!--[if lt IE 7]>
<link runat='server' rel='stylesheet' href='../css/BrowserSpecific/IEMenu6.css' type='text/css' id='IEMenu6CSS' />
<link rel="stylesheet" type="text/css" href="../css/file_with_PrettyMenu_in_it.css" />
It might be a good idea to have a look at this tutorial, which has an example stylesheet (it’s a bit dated but it might get you started).
Feb 07, 2008 06:03 PM|bpw|LINK
I'll just add a caveat to that. I'm not using the dll, so perhaps that takes care of the additional files, but the link above gives you access to an example CSS file that you can copy and link to your page.
Feb 07, 2008 09:28 PM|Antilles128|LINK
I'm pretty sure the .dll has the compiled adapters and basic CSS structures that normally come with the source code VSI. Other than that, adding the IE6 hacks into your CSS as you have above, Swegen, should take care of any compatibility issues you might
Feb 08, 2008 03:43 PM|dpschwartz|LINK
I am trying to use the Menu CSS adapter from the
White Paper found on the asp.net site with a very modified version of the Codeplex club starter kit. I am getting a little lost because the instructions on the white paper do not match what is on the sample download (eg., no themes on the download, etc.)
- and I am just learning. However, my users are complaining because the asp.net menus do not work on different browser and I thought this would be a reasonable approach.
So far, my problems are:
Can't add the CssSelectorClass to the menu tag (error is 'System.Web.UI.WebControls.SiteMapDataSource' does not have a public property named 'CssSelectorClass'. On the menu properties in Visual Web Developer Express 2005, the CssSelectorClass choice is
The idea of 3 CSS files (IE6?) from the previous posting is news to me.
Is there a place I can go to get acccurate, step-by-step instructions?
Thank you - Deborah
"css friendly adapter"
css site map
Control Adapters - datalist - headertemplate - checkbox event not firing
Feb 08, 2008 06:44 PM|Antilles128|LINK
Where exactly are you putting the "CssSelectorClass" tag? If I'm reading your error correctly, it looks as though you're putting in your SiteMapDataSource; it should go in the menu control itself, i.e. <asp:Menu ID="Menu1" CssSelectorClass="ClassName" runat="server"
Are you working with the Adapter .dll files, or do you have the VSI template installed in Visual Studio (or whatever flavor you're using)? If your using the VSI template, I'm not exactly sure where the themes are initially; I actually just have a dummy
CSS Friendly Adapters Tutorial project that I just go into the App_Themes folder and steal the stand CSS stylesheets from.
As for a good set of instructions, I found Jacob Sanford's ASP.NET 2.0 Design book to have a great chapter on the adapters themselves, as well as a good chapter on how to integrate them into your site with the CSS. I'm not sure if the text is anywhere online,
but if you're up for it, I recommend the book highly.
Feb 08, 2008 08:55 PM|dpschwartz|LINK
I mis-stated the error message - "Validation (ASP.Net Attribute 'CssSelectorClass' is not a valid attribute of element 'Menu'. when I put it in the menu control.
I am using the template that I downloaded from the white paper links and installed on Visual Studio Express 2005 and I did put everything where the white paper said (checked it many time). I can see that it is working well enough to create ul and li tags
rather than table tags; however, I cannot style them because I cannot add the CssSelectorClass for "PrettyMenu." Is there something I need to add so CssSelectorClass (which from the white paper is an "expando" property (?)) will be accepted as an attribute
of the Menu element?
Is there an easier way to do this? I have a simple vertical, 4 level menu using a static XML site map as the data source. I am really just trying to find a way to make the standard asp.net menu work in multiple browsers (Mozilla, Safari). After two days
of struggling ... I seem to be lost.
"CSS Friendly Control Adapters"
Feb 08, 2008 09:01 PM|Antilles128|LINK
It shouldn't be a problem, even with that validation error - at runtime, the adapter knows what to do. Have you compiled it and gotten an exception?
Feb 09, 2008 11:58 AM|dpschwartz|LINK
Thank you - that worked!
Is there a way to turn off the menu adapter on some pages? I have several multi-form tabbed pages (tabs from CSS, using asp.net menu control) that now do not render correctly with the menu adapter, but did render perfectly with the asp.net menu control.
So, on some pages the menu adapter should be used from the master page, but on the tabbed multipage form, no menu adapter.
Of course, I can always change the tabbed multi-forms into individual pages if there is no solution.
Feb 09, 2008 03:09 PM|Antilles128|LINK
They're have been a couple of work arounds for turning the adapters off on certain components, but the easiest I've found is putting "enabledAdapter="false" " in the menu control. According to the MSDN and the white papers, this doesn't always work, but
I have yet to find a situation where it doesn't.