SiteMap with different font style - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 07-Feb-2012 00:00

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

Posted by Community Admin on 08-Feb-2012 00:00

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!

Posted by Community Admin on 08-Feb-2012 00:00

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

Posted by Community Admin on 08-Feb-2012 00:00

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

Posted by Community Admin on 08-Feb-2012 00:00

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

Posted by Community Admin on 09-Feb-2012 00:00

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

This thread is closed