Overriding RadTabStrip styling

First, I'm a Sitefinity noob

I'm attempting to apply a very simple set of styles to an even simpler menu in Sitefinity 4.2.

I've watched videos (for clearly older versions of sitefinity) and have figured out how to set the Wrapper Class (Skin) setting for the menu so that I can begin styling.

I can even make changes to the css and have those reflected so I know how to "talk" to the elements on the page.

So what's the problem? I am constantly fighting the inheritance of the css styles from the auto-generated stylesheet. I want to float or align or inline or just about everything one way and the following stylesheet tells me "I don't think so".

localhost:49753/.../Telerik.Web.UI.WebResource.axd

I can !important everything but someone please tell me I'm a silly noob and that there is a "Please stop helping me" checkbox I'm missing that will let me apply my styles in peace.

Hi Jeremy,

Let me start with this: it’s a short journey from a Sitefinity noob to a Sitefinity ninja, so feel free to ask questions and we'll be glad to help you get there. :)

The !important statement can be used to add weight to a declaration. It's a way to have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. However, there's a cleaner and easier approach when it comes to styles in Sitefinity. What you need to do to style your navigation is to set a wrapper class to it and add the required styling properties to the your stylesheet. All your properties should be declared between the brackets of your wrapper's class. What's more important is the way your class needs to be defined in your stylesheet. The correct syntax is:

 .[name of control, used for this navigation type] _ [name of wrapper class] styles

For example, if your wrapper class name is custom and you have a horizontal navigation without dropdowns (RadTabStrip), that's how the stylesheet rule should look like:

.RadTabStrip_custom styles

This might seem a bit confusing. I've attached a screenshot. Hope it makes it clear for you. Also, take a look at  this blog post. I believe that you're going to find it useful.  Lastly, you can always use Telerik's Visual Style Builder, which comes with a user-friendly interface and generates the required css properties for you.

Kind Regards,
Jen Peleva
the Telerik team

Thanx for the response and the documentation I've found basically explained all of that so I feel very comfortable with what you've explained however that's not where I was really having a problem to begin with.

The issue is that Telerik is auto-generating a stylesheet that I can't just "turn off". This auto-generated stylesheet has a default set of styling that conflicts with what I want to do. In fact Telerik's style sheet (from an inheritance standpoint) is taking precedence (sometimes) unless I use !important.

Attached is a screen grab from Firebug that illustrates my point I think. You can see the auto generated stylesheet plus various attributes (with strikethrough) that I not being applied because I've had to go back into my stylesheet to re-apply the default settings (with !important).

I guess I should have asked the question a different way. Is there a way to turn off Telerik's default stylesheet properties?

And honestly the answer at this point is academic because I've got everything looking the way I'd like but for future reference just being able to start from scratch would be nice particulary for dead simply menuing. If I want to really create something complicated I can use the Style Builder which is a nice tool.

Hi Jeremy,

I understand your point. Actually, you can disable the embedded resources for the RadControls, but this will eventually cause issues, since these embedded styles are responsible for the proper functioning of the RadControls. Hence, it is not recommended to do that. You can lose some of the embedded styles by changing the theme of your template from Basic to a custom one, created by you. Also, by defalut you should be able to set your own styles to the menu, without using the !important tag, since your external styles are loaded after the embedded ones. Sometimes, however,  you would have to use !important to add weight to you styles.

Regards,
Jen Peleva
the Telerik team

I've been having this same problem with styling controls in Sitefinity since I started using it over a year ago. I don't understand why there isn't an option to disable just the default css that sitefinity demands must be used. Using !important should not be the solution but I'm forced to use it. It's extremely frustrating as a designer when I know that styling a widget in any of the free CMS's out there is simple and straight forward. I want to disable all styles being applied from the file Telerik.Web.UI.WebResource.axd please provide a step by step guide to inform us how to do this.

Hi Chris,

To disable the basic CSS, you need to use an external template for Navigation widget.It has to be set to your navigation by entering the widget's designer, expanding "Design settings" section and writing the path to your external template in "Custom template path" field (I have attached the template). In the fourth condition set EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins properties to false and Skin property to your own skin name.

 Hi, I 've been trying to do this, but I don't see this "Custom template path" field in the Navigation widget settings anymore? where do I attach the NavigationControl.ascx file now?

Hello roxanne,

Which Sitefinity version you are using, as in Sitefinity 6.1 a new Navigation widget is introduced.
If so and in order to use the old one you could activate it by following that article.

Regards,
Svetoslav Manchev
Telerik