Navigation Modification

Hello,
I am trying to modify the navigation's CSS of my template but when I attached the CSS class to it from the CSS class in the edit mode it does not change anything.  The new CSS class is being built from telerik stylebuilder.  Can someone please guide me on this. Can I know where specifically should I save the CSS file?

Hi Vishika,

The Telerik Stylebuilder is a tool that can create styling for the Telerik RAD Controls. As of Sitefintiy 6.1, the default navigation widget in Sitefinity is not based on the RAD Controls, but on KendoUI HTML5 controls, as they are more lightweight and easier to style. We have dedicated this section of our documentation to describe in detail how you can style the current navigation widget.

Hope this helps!

Regards,
Grisha 'Greg' Karanikolov
Telerik

Hello Grisha,

Thank you very much for the reference document but I have already tried it and I had an error message saying that the server for RAD navigation is not found.  All the videos and help that I had a look at were for Sitefinity 6.1 and I am using Sitefinity 6.2, Can you suggest me any other help please.

Hi Vishika,

Could you please share the exact error message? I'm not sure what to recommend as I'm not sure what the problem was - I suppose you're using the KendoUI based navigation, but the error you mentioned is a bit puzzling.

Regards,
Grisha 'Greg' Karanikolov
Telerik

Hello Grisha,

The error message is as follows "Unknown server tag 'navigation:RadMenu'." I have been following the tutorial on www.sitefinity.com/.../customize-the-navigation-widget. I am using the navigation template of Horizontal with Drop Down menus.

Hi Vishika,

as i mentioned, you are probably using the KendoUI based controls, not the RAD Controls, so you can disregard the last example in the section I showed you. Let me know if the other customizations you made work or not. 

Regards,
Grisha 'Greg' Karanikolov
Telerik

Hello Grisha,

Yea I used both for RAD and KendoUI but none is working.  Can you please help me to modify the navigation appearance in Sitefinity 6.2.  In the 6.1 version it was working. Give me a brief description of what should I used to modify it.

Hello Vishika,

Please find enclosed sample styling for the Sitefinity Dropdown KendoUI menu and let me know if this works for you.

.topnav
  /* Main navigation */

  float: right;
  clear: both;
  margin: 15px 0 0 0;

.topnav .k-menu
  border: 0;

.topnav .k-menu .k-item
  border: 0;
  text-transform: uppercase;
  font-weight: 600;

.topnav .k-menu .k-item.k-state-hover
  background: #fff;

.topnav .k-menu .k-item.k-state-hover .k-link
  color: #00b4c9;

.topnav .k-menu .k-item .k-group
  border: 1px solid #eee;
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3);
  padding: 10px 10px 10px 0;

.topnav .k-menu .k-item:first-child .k-group
  min-height: 265px;
  padding: 10px 321px 0 0;
  background: #ffffff url(../img/promo1.jpg) no-repeat right top;

.topnav .k-menu .k-item .k-item
  margin: 0 10px;
  font-weight: 400;
  text-transform: none;
  padding: 5px 40px 5px 0;
  text-align: left;
  border-bottom: 1px solid #eee;

.topnav .k-menu .k-item .k-item.k-state-hover
  background: #e0f2f5;
  border-bottom: 1px solid #93e2eb;

.topnav .k-menu .k-item .k-item.k-state-hover .k-link
  color: #105a65;

.topnav .k-menu .k-item .k-item .k-link
  color: #000;
  font-size: 16px;

.topnav .k-menu .k-item .k-item .k-link.sfSel
  color: #aaa;
  font-weight: normal;
  font-weight: 400;

.topnav .k-menu .k-item .k-link
  color: black;
  font-size: 12px;


This CSS is applied to a KendoUI based horizontal navigation with dropdowns, with the class .topnav applied to it like this:


If you need further assistance, please do not hesitate to get back to us at your convenience!

Regards,
Grisha 'Greg' Karanikolov
Telerik

Hello Grisha,

Thank you very much for the sample codes I have tried it and it's working.

Regards,
Vishika

HeyVishika,

I'm glad it helped! Cheers!


Regards,
Grisha 'Greg' Karanikolov
Telerik

Hello Grisha,

Hey I need your help buddy, I want to change the color of the background of a content block, how can do it? If I use CSS class what CSS ID should I use.

Regards,
Vishika

Hi Grisha,

New to forum so be kind.. :)
I went to your link on the KendoUI controls and that helped me collapse my side nav tree view menu.
www.sitefinity.com/.../customize-the-navigation-widget
 Thanks!!
But my big question now is I need to have that little gray arrow that points to the menu items. You know, the arrow is pointing to the right when it is on a menu item and the arrow is pointing down when you open up a subnav.
I believe I have the gray arrow graphic but I don't know how to incorporate it into the Kendo tree view.
I have attached a screen capture of the page..you will see with no gray arrows next to the menu items.
Any and all help will be appreciated.

Tony

@Vishika,

typically all Content Blocks wrap their content in a div with class "sfContentBlock", but that will style all content blocks within your website. You can verify that by inspecting the output code of Sitefinity.

It's easy to drop a layout block in your page and drop your content block in there. Each layout block has the option to define its class name(s), so that's another alternative.

And last, but not least, you can just wrap the whole content from your content block in your own "div" element and assign it any class you like.

@Tony

no worries, I try to be kind at all times :-)

you need the
<span class="k-icon k-minus"></span>
and
<span class="k-icon k-plus"></span>
classes here.

This is the default styling which you can override:

Hi Grisha,

That sounds like what I need but I inspected the nav code and that span class is already there. It is like it is working but without the icons being displayed. When I move my mouse over the area where the gray icon should be, it gives me the hand to tell me that I can click on it to expand or collapse. I just don't see the icon graphic. Hmmm..?? Here is the website.
sf.apwwyott.com/products

Obviously I am new to Sitefinity, coming from Dreamweaver and WordPress worlds. I took your code above and pasted it into my Default template folder in the Global folder in styles.css. But Inspecting the code in Chrome, I see that the k-icon code is in a file called:  
sf.apwwyott.com/Telerik.Web.UI.WebResource.axd

Sorry for the newbie questions but where can I edit this file?

Since I pasted it in my global styles.css file, it is now being shown in the Inspector from my styles.css file and not the long file name above. I don't know if that is bad or not but still no icons being displayed.

It is 8:35am Thursday and I will be working on this all day so this might change as I do trial and error.
I truly appreciate your help.
Thank you, Tony

Hi Tony,

If you inspect your website you'll see that this image:

background-image: url("/WebResource.axd?d=dJx-mfCXQ49ZYHeEnpn1AWZZiSmr8-QR3tbB5d6EodttNN-LruT-yf6inCC6o3DaJXgCB6KurS-45imGqo4t32xPqmcfk5yZ3NyDtPTe6JBJSQagT6GLP25Ieb8VRo-J7xgDGY7rUTQ5VwAoYjn5IsUZ-Y8ozpY120eNHAy3pGbA6LgvkfKJVfNFsSsR_kbkpSUwMlLA0neK3ZSvfWsCDA2&t=635180537340000000");

Awesome Grisha!!!
That fixed it. I placed my own graphic file in that css area but it did not work...hmmm. wonder why.
But your sitefinitysprite.png file worked. Don't know how that works as it grabs the triangles out of that file with all those icons. But THANK YOU!!!
Tony

So Grisha,

If I see this code (see below) again when I am inspecting elements with Chrome or Firebug, does it mean that the image or styles did not get loaded?

background-image: url("/WebResource.axd?d=dJx-mfCXQ49ZYHeEnpn1AWZZiSmr8-QR3tbB5d6EodttNN-LruT-yf6inCC6o3DaJXgCB6KurS-45imGqo4t32xPqmcfk5yZ3NyDtPTe6JBJSQagT6GLP25Ieb8VRo-J7xgDGY7rUTQ5VwAoYjn5IsUZ-8ozpY120eNHAy3pGbA6LgvkfKJVfNFsSsR_kbkpSUwMlLA0neK3ZSvfWsCDA2&t=635180537340000000");

Please see the attached image on a page inspect and look at the lower right hand side at the names and locations of the css being shown. Does this also mean that these files were not loaded?

How do images and css files get loaded?

Thank you so much for your help.