Styling the Navigation Widget

I've been searching around trying to find out how we style the widgets (and navigation in particular) and having gone down the wrong route with RadControls, and Telerik Style Builder for sometime, I finally discovered all of this documentation is no longer relevant to version 7.  So, how to do this is Version 7+ with Kendo UI?

I used the kendo theme builder here:

demos.telerik.com/.../

And copied the entire CSS file to the Global folder of my Master Template Theme.  However, this doesn't seem to be enough to get the Navigation to use this style fully.

Looking in the Navigation Template it seems like I need to change something here so that it uses the CSS created via ThemeBuilder, but what and how?  I tried to find some documentation on using the output of ThemeBuilder in Sitefinity which seems an obvious thing to want to do, but didn't come across anything?

Any help much appreciated!

<sf:ResourceLinks id="resLinks" runat="server" UseEmbeddedThemes="true" Theme="Basic">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="true" />
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    <sf:ResourceFile JavaScriptLibrary="KendoWeb" />
</sf:ResourceLinks>

I'm doing the same thing this morning, I cant get it to work either, even using a common skinid.

If you delete the line starting <sf:ResourceFile Name="Telerik.Sitefinity.Resources.../> then this seem to work better.  I'm guessing because it doesn't load the basic css file for the Kendo UI and allows the generated Kendo UI to work better.  But it doesn't work perfectly still.

Hello David,

In order to see how to style the Navigation, you can check the following documentation article:
http://docs.sitefinity.com/style-and-customize-the-navigation-widget

You can also take a look on the styles used in the widget here:
http://docs.sitefinity.com/css-classes-navigation-widget

I hope that the information is useful.

Regards,
Svetoslav Manchev
Telerik

Hi Svetoslav,

I've read these links the problem is they do not answer the question of how to apply a Kendo skin/theme.  I do not want to spend hours trying to skin a navigation widget manually via CSS, understanding each and every component that makes up a skin of a navigation unit (I don't have the time) - I've purchased a CMS for jobs such as these.  I'm looking at the navigation widget at the moment, but I want all widgets to be themed with the Theme Builder, with a consistent theme.

I want to do this using the tools created by Telerik for this job, the Kendo UI skin/theme builder - which should allow me to skin all the Sitefinity widgets without having to do this one by one manually I had hoped?

There used to be video and articles of how to do this using Telerik Theme Builder and RadControls, but there is no information it seems of how to do this using the new Kendo UI controls and Kendo UI Theme Builder, quickly and easily?  Without manually having to hack CSS.

If I can search and replace the Kendo Theme Builder CSS file, then it would be useful to have the necessary class/id swaps for this to work properly written up in an article.  Then everyone will be able to use the Kendo UI Theme Builder and just apply it to their Sitefinity Project.

Hi David,

In order to use the predefined Kendo UI Menu themes you can take a look on the following article than you can change the theme used in the template loading the respective style sheets as described.

Regards,
Svetoslav Manchev
Telerik

Hi Svetoslav,

Thanks for this link, it helps a little, but I'm still confused about the best practice of using the ThemeBuilder with Sitefinity.

My understanding was that I should take the CSS output from the ThemeBuilder and add this to the Global directory of my Master Template in order for the CSS to be automatically processed.

However, each Widget seems to programmatically overwrite the CSS in it's own template?  What is the best practiced here?

Also, the link mentioned that there is a default set of CSS for Kendo UI as well as the skin css generated from ThemeBuilder.  Where can I download the default CSS file and should I also place this in the Global folder of my Master Template?

I am quite new to using Sitefinity so baby steps would be appreciated on how best to implement the output of the ThemeBuilder.

After downloading the kendo.bootstrap.css and addeding this to the Global directory with the Kendo.skin file generated by the Theme Builder, I ran into the same problem that this was still getting overridden in the widget it appeared.

I added the class 'topnav' to the widget and then did a search (.k-menu) and replace (.topnav .k-menu) on the kendo.skin.  To ensure I wasn't going to get overridden by the widget.

However the problem comes down to the fact that the CSS generated by Teleriks Kendo ThemeBuilder, is incompatible with Teleriks Sitefinity, as it doesn't generated the necessary CSS to style the widget.  For example .k-menu .k-item, .k-menu-horizontal.k-widget > .k-item is generated by Sitefinity code, but there is nothing to match this with in the kendo.skin.css generated by the Themebuilder and therefore it uses the standard CSS of the widget (I wasn't getting overridden  it just didn't exist in the either the bootstrap or the kendo.skin CSS files).

What this all means I'm guessing is that if you are using Sitefinity 7 then there is no compatible Themebuilder anymore?  As the previous Themebuilder was for RAD controls, and the new Kendo Themebuilder does not generate the necessary CSS code to be used with Sitefinity?

Please can someone from Telerik confirm this, as I've spent many hours of my time coming to this conclusion and want to  put this to bed.

Gave up using the Themebuilder and just put some CSS together that seems to work OK.  Depressed, but time to move on.  No idea whether this is the best way to do it, but there is so little information out there on how to do this who knows.  I did see a few posts in the forums of others that have styled the navigation this way so I followed their lead.  I've posted my CSS just in case it helps someone else get there quicker (remember to set the CSS class on the navigation to topnav in this case):

.topnav .k-menu background-color: transparent;
.topnav .k-item font-size:14px; background-color: #e6edf2; border-color: white;
.topnav .k-item a color: #91979f;
.topnav .k-group .k-item a color: #91979f;
.topnav .k-group .k-state-hover background-color: #0fa1d5; border-color:white;
.topnav .k-group .k-item background-color:#2e343e
.topnav .k-state-hover background-color: #0fa1d5; border-color:white;
.topnav .k-state-border-down background-color: #0fa1d5
.topnav .k-state-border-down a color: white
.topnav .k-item a:hover color: white;​

Hi David,

Thank you for the provided solution to the community.

Regards,
Svetoslav Manchev
Telerik

David,

I can't tell you how many hours i wasted trying to figure this out...thank you so much for your post.