SiteMap with different font style - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

SiteMap with different font style

  • SiteMap with different font style
  • Hi,

    I need to change the layout of a sitemap a little bit.
    The top level should get a other font color than the sub items and a padding is needed.
    What would you suggest to make this layout?

    Thanks

    Andre
  • Andre,

    Custom style can be added to the site via themes. Just in case, here is some example CSS to get you going.

    Hope that helps!
  • Hi Tim,

    thanks for your reply but that does not solve my problem.
    I styled some vertical menus and this work pretty nice.
    But the sitemap has tons of nested <ul><li>.. <ul><li>..</li></ul></il></ul> - and I find now way to style ejust the parent one.
    Here's the sample output what I mean:
    <pre class="code "><code id="post-preview-questionCommentPreviewInlineCode20-0-1"><div id="width: 1020px;sitemap">
    <div id="FooterPlaceHolder_T35A3336A003">
    <div id="ctl00_FooterPlaceHolder_T35A3336A003_ctl00_ctl00_siteMapControl_sitemapincolumns" class="RadSiteMap RadSiteMap_Sitefinity">
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="mainpage">MainPage</a>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="testseite">Testseite</a>
    <ul class="rsmList rsmLevel1">
    <li class="rsmItem">
    <a class="rsmLink" href="testseite/subholder2">SubHolder2</a>
    </li>
    <li class="rsmItem">
    <a class="rsmLink" href="testseite/subholder1">SubHolder1</a>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder1">Placeholder1</a>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder2">PlaceHolder2</a>
    <ul class="rsmList rsmLevel1">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder2/subholder3">SubHolder3</a>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder4">PlaceHolder4</a>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder3">Placeholder3</a>
    </li>
    </ul>
    <ul class="rsmList rsmColumn rsmLevel rsmTwoLevels" style="width:10%;">
    <li class="rsmItem">
    <a class="rsmLink" href="placeholder5">Placeholder5</a>
    </li>
    </ul>
    <input id="ctl00_FooterPlaceHolder_T35A3336A003_ctl00_ctl00_siteMapControl_sitemapincolumns_ClientState" type="hidden" name="ctl00_FooterPlaceHolder_T35A3336A003_ctl00_ctl00_siteMapControl_sitemapincolumns_ClientState">
    </div>
    <script type="text/javascript">
    function radMenuOnClick(sender, args)
    var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
    args.get_item().get_attributes().setAttribute("ExpandOnClick", "true")
    args.get_item().open();
    function radMenuOnOpening(sender, args)
    var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
    if(state != "true")
    args.set_cancel(true);
    args.get_item().get_attributes().setAttribute("ExpandOnClick", "false")
    </script>
    </div>
    </div></code></pre>

    And now only MainPage, TestSeite, PlaceHolder1 ... etc. should have an other color ...

    Andre
  • Andre,

    For that example source, this should get you there. I'm using the child selector of CSS to select only .rsmLinks that are in an .rsmItem that is a child of an .rsmLevel

    .RadSiteMap .rsmLevel > .rsmItem .rsmLink color:#c9278c; font-size:10px;

    -Tim
  • 334140_Sitemap.jpg
    Tim,
    no
    .RadSiteMap .rsmLevel > .rsmItem .rsmLink color:#c9278c; font-size:10px;
    has no effect.
    Only when the styles are !important it has effect - but the matter is that all items are changed than not only the parent ones.

    As the parent are bold by default output there seems to is a way for - but I can't find ...
  • Tim,

    with your hint it works fine now:
    .RadSiteMap .rsmLevel > .rsmItem .rsmLink color: #3379a9 !important; padding-left: 5px;
    .RadSiteMap .rsmLevel > li .rsmItem .rsmLink color: #666666 !important;

    Thanks

    Andre