Customizing the Navigation bar

Hi.

I have a horizontal navigation bar on my simple test website, with no layers. If we look at the navigation bar for a website such as Apple's Website, how do I:

1. Make the front and last item on the navigation bar a rounded rectangle rather than a normal rectangle?

2. Make one of the items on the navigation bar (such as the home button) show an image rather than text?

3. Embed another control, such as a search box, into the final item of the navigation bar?

I've tried overriding the widget with Sitefinity thunder, but I see no documentation on this so I have no clue which class to override, which properties/methods to override or whether I'm making the solution far too complicated and should be using CSS instead.

Any help would be much appreciated.
Thanks!
Kurren Nischal

1) If you're using the default kendo controls, then the first and last items in lists have the following classes.  k-first, k-last.  So you can use those to style those elements separate from the others...use the css border-radius property.  Use firebug to look at them.

2) Option1: jQuery...we can't set custom fields on pages yet so there's no way to define it on the page properties.  So if you just need "home" to be an image just find and modify with jquery when the script runs to create the menu.
Option2: If it's "Home" you want as an image, then uncheck show in navigation for that page.  Then in the page template add the list item manually into the UL and just do a template as seen here: demos.kendoui.com/.../index.html

3) See Option2 from #2...the UL is in the template, you can add whatever you want to it

...this all assumes you're using 6.0.  Pre 6.0 you're kinda screwed.

Hi Steve

Thank you for your reply.

I am using 6.1, and I'm using the default navigation bar in the widgets that sitefinity give you. If these are Kendo controls, do you know where I can find more information on the classes such as the ones you mentioned? I can't find navigation anywhere in the Kendo API reference.

Thanks,
Kurren

Don't get caught up in the "Why aren't the classes documented anywhere" mindset, old way of thinking :)

Download firefox, install firebug, then just right-click on the menu and Inspect Element.  You'll be able to see the markup and classes and modify everything (on the fly).  When you get it how you want, move the CSS styles over to your SF project (so clearly don't build the whole menu like that as every refresh wipes all changes, but it'll let you "play" without needing to edit css on sitefinity and hit f5 a billion times)

Have a look: screencast.com/.../NFUy181mKAU2

Okay so I was looking for k-first in the list, didn't find it, guess the core\default style doesn't use it.  However if you put that in your sitefinity CSS file, it'd show up to modify on the fly.