Custom Style for Each Navigation Node - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 17-May-2011 00:00

How would someone go about recreating the attached image with using the Navigation Controls in SF? As you can see, there is a custom style for EACH node, as well as a style for the selected node (slightly taller than the rest). Is it even possible? Thank you.

Posted by Community Admin on 18-May-2011 00:00

Hi Amir,

You can easily achieve this with CSS. Here is a code for coloring the menu as in your design:

.RadTabStrip, .RadTabStrip .rtsUL

font-family: Arial;

text-transform:lowercase;

font-size: 15px;

height: 40px;

background-color: white;

.RadTabStrip .rtsUL .rtsLI

position:relative;

float:left;

.RadTabStrip .rtsUL .rtsLI .rtsLink

color: white;

margin-top: 11px;

background-color: black;

line-height: 29px;

.RadTabStrip .rtsLI+.rtsLI abackground-color: #3552a6;

.RadTabStrip .rtsLI+.rtsLI+.rtsLI abackground-color: #66be3e;

.RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI abackground-color: #ba4fa0;

.RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI+.rtsLI abackground-color: #f01914;

.RadTabStrip .rtsUL .rtsLI .rtsLink.rtsSelected

padding-top: 11px;

margin-top: 0px;

Here is the final result:

Also you can use jQuery to add a class to every item with .eq() function:

$(document).ready(function()

$('.RadTabStrip ul'). eq(0).addClass('first-item'); // or "home"

)

Best wishes,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 18-May-2011 00:00

Thank you Jordan,

The CSS route is the best for us, however, I am still having some issues.

I created a user control with the following markup:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" EnableEmbeddedSkins="false"

EnableEmbeddedBaseStylesheet="false" EnableSubLevelStyles="false" DataSourceID="SiteMap" MaxDataBindDepth="1">

</telerik:RadTabStrip>

<asp:SiteMapDataSource runat="server" ID="SiteMap" StartFromCurrentNode="false" ShowStartingNode="false"

StartingNodeOffset="0" />

and placed in my masterpage as such:

<%@ Register Src="~/UserControls/Navigation/Menu.ascx" TagName="Menu" TagPrefix="uc2" %>

.....................

<uc2:Menu ID="Menu1" runat="server" />

This worked, except that it:
1. Ignored the "Show In Navigation" property on the pages. All pages at the root level shown, regardless of that property.
2. We also have a requirement to keep the tab "selected" even if the page is a sub-page of the root node. The current setup does not do this.

So, I tried grabbing a navigation widget and setting the custom template to my menu.ascx file (and removed the "DataSourceID" parameter from the RadTabStrip). This caused:

1. The menu to respect the show in navigation property (which is good), BUT
2. The selected state no longer appeared, even at the root level.
3. I presume that we'd still have the sub-pages issue in this scenario as well.

Thank you again.

**EDIT** Please ignore attached image. That requirement was taken care of.

Posted by Community Admin on 19-May-2011 00:00

That's a handy bit of css Jordan, I didn't realise that you could keep adding to the rtsLI.

Posted by Community Admin on 25-May-2011 00:00

Anything?

Posted by Community Admin on 28-May-2011 00:00

Hello Amir,

If you are using the Navigation Control in the vertical navigation mode which shows only top level pages you can create a control template for it and bind to the TabDataBound event. This event is executed for each menu item that is going to be displayed and you can assign it special CSS class:

<%@ Control Language="C#" AutoEventWireup="true"%>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>

<script type="text/C#" runat="server">

protected void Page_Load()

this.siteMapControl_horizontalsimple.TabDataBound += new Telerik.Web.UI.RadTabStripEventHandler(siteMapControl_horizontalsimple_TabDataBound);

void siteMapControl_horizontalsimple_TabDataBound(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

//assing custom class to each tab.

e.Tab.CssClass = "myCss";

</script>

<navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontalsimple" runat="server" Skin="Sitefinity">

</navcontrols:SiteMapNavigationTabStrip>

You should set the control template from the Design Settings for this mode.

All the best,
Radoslav Georgiev
the Telerik team

This thread is closed