Amend Sitemap HTML?
Firstly, I'm a Designer by trade so forgive me if some of the technical stuff goes over my head but what I'm essentially trying to do is style up the Navigation control (Sitemap divided in columns) to my specifications.
Currently the HTML that SiteFinity spits out looks like:
<ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:16%;"> <li class="rsmItem"><a class="rsmLink" href="solutions">Solutions</a> <ul class="rsmList rsmLevel1"> <li class="rsmItem"><a class="rsmLink" href="solutions/email-marketing">Email Marketing</a></li> <li class="rsmItem"><a class="rsmLink" href="solutions/mobile">Mobile</a></li> <li class="rsmItem"><a class="rsmLink" href="solutions/campaign-management">Campaign Management</a></li> <li class="rsmItem"><a class="rsmLink" href="solutions/srtategy">Srtategy</a></li> </ul> </li></ul><li class="rsmItem"><a class="rsmLink" href="solutions">Solutions</a><li class="rsmItem"><h3><a class="rsmLink" href="solutions">Solutions</a></h3>Shameless bump...
Stephen, based on my experience, I don't believe this is currently possible. The menu is rendered using the Telerik Rad Ajax controls, and unless I'm mistaken you are not able to modify or template the markup that is generated by the controls.
EDIT: I may be mistaken on this, a quick search on the Telerik Sitemap control revealed this document on Sitemap templates which appears to give you control over the html markup
I'll spend some time with this and see if I can put together a sample. or if you beat me to it let me know! :)
Thanks for this mate. I've been in touch with support and they suggest looking into the jQuery 'wrap' function, however that's not really feasible in the long run unfortunately.
Still struggling with this. Mainly because of the poor code that the Telerik SiteMap control spits out...
I want to keep my HTML as clean as possible
e.g.
<div class="five-col lm0"> <h4>Product overview</h4> <ul> <li><a href="/web-content-management.aspx">Web content management</a></li> <li><a href="/mobile-web.aspx">Mobile web</a></li> <li><a href="/ecommerce.aspx">Ecommerce</a></li> <li><a href="/email-campaign-management.aspx">Email campaigns</a></li> <li><a href="/social-networking.aspx">Social networking</a></li> <li><a href="/web-content-management-for-marketers/optimization-and-conversion.aspx">Web Analytics</a></li> </ul> <ul> <li><a href="/asp-net-cms-for-developers/highlights.aspx">Features for developers</a></li> <li><a href="/web-content-management-for-marketers/highlights.aspx">Features for marketers</a></li> <li><a href="/asp-net-cms-features-for-it-managers/highlights.aspx">Features for IT managers</a></li> <li><a href="/full-features-list.aspx">Full features list</a></li> </ul></div><ul style="width:16%;" class="rsmList rsmColumn rsmLevel rsmThreeLevels"> <li class="rsmItem"><a href="solutions" class="rsmLink">Solutions</a> <ul class="rsmList rsmLevel1"> <li class="rsmItem"><a href="solutions/email" class="rsmLink">Email</a></li> <li class="rsmItem"><a href="solutions/mobile" class="rsmLink">Mobile</a></li> <li class="rsmItem"><a href="solutions/social" class="rsmLink">Social</a></li> <li class="rsmItem"><a href="solutions/sales-recovery" class="rsmLink">Sales Recovery</a></li> <li class="rsmItem"><a href="solutions/web" class="rsmLink">Web</a></li> <li class="rsmItem"><a href="solutions/communicator-connect" class="rsmLink">Communicator® Connect</a></li> <li class="rsmItem"><a href="solutions/strategic-experts" class="rsmLink">Strategic Experts</a></li> <li class="rsmItem"><a href="solutions/features" class="rsmLink">Features</a> <ul class="rsmList rsmLevel2"> <li class="rsmItem"><a href="solutions/features/for-designers" class="rsmLink">For Designers</a></li> <li class="rsmItem"><a href="solutions/features/for-it-professionals" class="rsmLink">For IT Professionals</a></li> <li class="rsmItem"><a href="solutions/features/for-marketeer" class="rsmLink">For Marketeer</a></li> </ul> </li> </ul> </li></ul>Stephen I finally got a chance to spend some time with this. The sitemap templates do allow you to take better control over the elements, including adding an <h3> around the top level menu items.
However, it does this by wrapping that element in a div inside the original parent LI item.
this is simply by design; the sitemap template will always render as a nested collection of ul elements, with the css classes defined inline.
In fact, this is how all the rad controls work. this is what I originally meant when I said the controls are not templateable. if you are attempting to completely change how the basic "skeleton" html is rendered, this is not yet possible.
Disabling the embedded style sheet will only prevent the loading of the internal css file resource for basic laying out (this is the css that makes it layout horizontally on the page) if you wanted to take complete control over the styling of the existing css classes with your own css.
Finally, just as an example, this is what I modified in the navigation template to get the h3 tag on the top-level items:
<sf:ConditionalTemplate Left="NavigationMode" Operator="Equal" Right="SiteMapInColumns" runat="server"> <navcontrols:SitemapNavigationSiteMapControl ID="siteMapControl_sitemapincolumns" runat="server" MaxDataBindDepth="2" Skin="Sitefinity"> <LevelSettings> <telerik:SiteMapLevelSetting Level="0"> <NodeTemplate> <h3 class="Header"><%# Eval("Title") %></h3> </NodeTemplate> <ListLayout RepeatDirection="Vertical" RepeatColumns="10" /> </telerik:SiteMapLevelSetting> </LevelSettings> </navcontrols:SitemapNavigationSiteMapControl> </sf:ConditionalTemplate><div id="T5A4BA6E3009_ctl00_ctl00_siteMapControl_sitemapincolumns" class="RadSiteMap RadSiteMap_Sitefinity"> <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;"> <li class="rsmItem"><div class="rsmTemplate"> <h3 class="Header">Home</h3> </div></li> </ul><ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;"> <li class="rsmItem"><div class="rsmTemplate"> <h3 class="Header">News</h3> </div><ul class="rsmList rsmLevel1"> <li class="rsmItem"><a class="rsmLink" href="news/page-a">Page A</a></li><li class="rsmItem"><a class="rsmLink" href="news/page-b">Page B</a></li> </ul></li> </ul><ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;"> <li class="rsmItem"><div class="rsmTemplate"> <h3 class="Header">Blog</h3> </div><ul class="rsmList rsmLevel1"> <li class="rsmItem"><a class="rsmLink" href="blog/page-a">Page A</a></li><li class="rsmItem"><a class="rsmLink" href="blog/page-b">Page B</a></li><li class="rsmItem"><a class="rsmLink" href="blog/page-c">Page C</a></li> </ul></li> </ul><input id="T5A4BA6E3009_ctl00_ctl00_siteMapControl_sitemapincolumns_ClientState" name="T5A4BA6E3009_ctl00_ctl00_siteMapControl_sitemapincolumns_ClientState" type="hidden"> </div>