More in this section

Forums / General Discussions / Amend Sitemap HTML?

Amend Sitemap HTML?

6 posts, 0 answered
  1. Stephen
    Stephen avatar
    4 posts
    Registered:
    15 Aug 2011
    30 Apr 2012
    Link to this post
    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>

    Now this is all well and good, however I need to delve deeper and amend some of the code e.g.  I need to amend...

    <li class="rsmItem"><a class="rsmLink" href="solutions">Solutions</a>

    ...to look like...

    <li class="rsmItem"><h3><a class="rsmLink" href="solutions">Solutions</a></h3>

    Is this possible - if so, how? Thanks for any help you can throw my way.
  2. Stephen
    Stephen avatar
    4 posts
    Registered:
    15 Aug 2011
    02 May 2012
    Link to this post
    Shameless bump...
  3. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    02 May 2012
    Link to this post
    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! :)
  4. Stephen
    Stephen avatar
    4 posts
    Registered:
    15 Aug 2011
    03 May 2012
    Link to this post
    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.

    I'll have a look at this and I'll post any success I have here - if you could do the same I'd appreciate it!
  5. Stephen
    Stephen avatar
    4 posts
    Registered:
    15 Aug 2011
    04 May 2012
    Link to this post
    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>

    ...but I'm having to deal with using terrible !important CSS styles to overwrite the following...

    <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>

    I've tried putting in EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" into the SiteMap control in the hope that it would remove these styles from being added but no luck.
  6. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    04 May 2012
    Link to this post
    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>

    which resulted in the following sitemap html:
    <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>


    it's not exactly the markup you were looking for, but it does allow you to add the heading inline with the control.

    the only alternative is to build a simple control using the Sitefinity Pages API and build out the markup manually, so that you have complete control of the markup.

    hope this is helpful!
6 posts, 0 answered