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

Forums / Developing with Sitefinity / Applying user defined CSS to the Navigation control

Applying user defined CSS to the Navigation control

5 posts, 0 answered
  1. Shekar
    Shekar avatar
    35 posts
    Registered:
    11 Mar 2011
    23 Aug 2011
    Link to this post
    Hello Team,

    how i can add my own css settings to the existing Navigation control. i want to change the existing look and feel and mouse over effect of the navigation control, so i created a new CSS and added the class name in the Wrapper class input field but it is not reflecting. kindly guide me to apply user defined css to existing Navigation control.
  2. Boyko Karadzhov
    Boyko Karadzhov avatar
    56 posts
    Registered:
    05 Dec 2016
    23 Aug 2011
    Link to this post
    Hello Shekar,

     See if the attached file helps. You can add your CSS file either by the CSS widget or by creating a custom theme. Note the class name in the CSS file.

    Best wishes,
    Boyko Karadzhov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. Shekar
    Shekar avatar
    35 posts
    Registered:
    11 Mar 2011
    23 Aug 2011
    Link to this post
    Thanks for the reply,

    can you please guide me how to add a CSS file for navigation controls.

    Thanks for your support 

  4. Boyko Karadzhov
    Boyko Karadzhov avatar
    56 posts
    Registered:
    05 Dec 2016
    24 Aug 2011
    Link to this post
    Hello Shekar,

    1. Save your CSS file in App_Data\Sitefinity\ folder of your project.
    2. Lets say your custom class is called custom. In your CSS file it has to look like this:

    .RadTabStrip_custom {
       // you definition here
    }

    This depends on the Rad Control being used for navigation. By default it's RadTabStrip.

    3. Add the CSS widget from the toolbox to your page.

    4. Click on the widget to open it's designer.

    5. Click on the "Select" button and choose your CSS file.

    6. Check if the is "App_Data\" in the URL. If there is - delete it.

    8. Click "Save".
    7. Click Edit your navigation control.
    8. Expand "Design Settings".

    8. Type your css class name int the "Wrapper CSS class" field.
    9. Click "Save".

    You should be able to see your CSS applied to your navigation control. Greetings,
    Boyko Karadzhov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  5. Shekar
    Shekar avatar
    35 posts
    Registered:
    11 Mar 2011
    24 Aug 2011
    Link to this post
    Hello Boyko,

    Thanks for the pictorial presentation, it was really helpful, the problem was the the Class name, by viewing the source code i came to know that the control id is RadMenu and when i changed the class name in the css file to .RadMenu_Custom it worked.

    Thanks again for the support.
5 posts, 0 answered