+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / SiteMap with different font style

SiteMap with different font style

6 posts, 1 answered
  1. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    07 Feb 2012
    Link to this post
    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
  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    08 Feb 2012
    Link to this post
    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!
  3. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    08 Feb 2012
    Link to this post
    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
  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    08 Feb 2012
    Link to this post
    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
    Answered
  5. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    08 Feb 2012
    Link to this post
    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 ...
  6. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    09 Feb 2012
    Link to this post
    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
6 posts, 1 answered