Forums

Skip Navigation LinksHome / Developer Network / Forums / Sitefinity: Designing & Styling > SiteMap with different font style

SiteMap with different font style

  • Andre avatar

    Posted on Feb 7, 2012 (permalink)

    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

    Reply

  • Posted on Feb 8, 2012 (permalink)

    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!

    Reply

  • Andre avatar

    Posted on Feb 8, 2012 (permalink)

    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

    Reply

  • Answer Tim MVP avatar

    Posted on Feb 8, 2012 (permalink)

    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

    Reply

  • Andre avatar

    Posted on Feb 8, 2012 (permalink)

    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 ...
    Attached files

    Reply

  • Andre avatar

    Posted on Feb 9, 2012 (permalink)

    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

    Reply

Skip Navigation LinksHome / Developer Network / Forums / Sitefinity: Designing & Styling > SiteMap with different font style