+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Navigation Modification

Navigation Modification

17 posts, 0 answered
  1. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    02 Dec 2013
    Link to this post
    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?
  2. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    03 Dec 2013
    Link to this post
    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
    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
  3. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    04 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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.
  4. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    04 Dec 2013
    Link to this post
    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
    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
  5. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    04 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    Hello Grisha,

    The error message is as follows "Unknown server tag 'navigation:RadMenu'." I have been following the tutorial on http://www.sitefinity.com/documentation/documentationarticles/customize-the-navigation-widget. I am using the navigation template of Horizontal with Drop Down menus.
  6. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    04 Dec 2013
    Link to this post
    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
    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
  7. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    05 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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.
  8. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    13 Dec 2013
    Link to this post
    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
    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
  9. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    16 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    Hello Grisha,

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

    Regards,
    Vishika
  10. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    16 Dec 2013
    Link to this post
    HeyVishika,

    I'm glad it helped! Cheers!


    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    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
  11. Vishika
    Vishika avatar
    9 posts
    Registered:
    21 Nov 2013
    18 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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
  12. Tony
    Tony avatar
    57 posts
    Registered:
    04 Dec 2013
    19 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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.
    http://www.sitefinity.com/documentation/documentationarticles/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
  13. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    19 Dec 2013
    Link to this post
    @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:

    .k-treeview .k-icon, .k-scheduler-table .k-icon {
        background-color: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    I don't believe you need all these styles, but you can experiment to see which ones you need. And if you assign a CSS class to your menu, you'd be able to use that as additional selector, so that your rules have priority above the default built-in ones.

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    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
  14. Tony
    Tony avatar
    57 posts
    Registered:
    04 Dec 2013
    19 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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.
    http://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:  
    http://sf.apwwyott.com/Telerik.Web.UI.WebResource.axd?compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d6.1.4700.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a6b071be6-0037-40cd-9ddd-b4306dfd727b%3a7a90d6a%3a83fa35c7%3a850288ef%3a44911412%3ab5bf473e%3acc007e78%3bTelerik.Web.UI%2c+Version%3d2013.1.417.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen%3a38d7db1e-d3bf-44c8-8ec4-ec2917fcd015%3a580b2269%3a92753c09%3bTelerik.Web.UI.Skins%2c+Version%3d2013.1.417.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen%3ad16e8365-294c-4b33-9cbf-b70fd757bfd2%3a6c8ef648%3a7d245c43

    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
  15. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    20 Dec 2013
    Link to this post
    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");

    does not get found. Apparently this embedded resource is not loaded for some reason, so I'd replace the image called here with my own or if you want to do this with minimum effort, just put the attached image to your /img folder and reference that. More specifically:


    and then the CSS would look like this:
    .k-icon, .k-tool-icon, .k-grouping-dropclue, .k-drop-hint, .k-column-menu .k-sprite {
        background-image: url("../img/sitefinitysprites.png");

    if this doesn't work, try

    .k-icon, .k-tool-icon, .k-grouping-dropclue, .k-drop-hint, .k-column-menu .k-sprite {
        background-image: url("../img/sitefinitysprites.png") !important;

    Hope this helps :-)

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    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
  16. Tony
    Tony avatar
    57 posts
    Registered:
    04 Dec 2013
    20 Dec 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    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
  17. Tony
    Tony avatar
    57 posts
    Registered:
    04 Dec 2013
    23 Dec 2013
    Link to this post
    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.
17 posts, 0 answered