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

Forums / Designing & Styling / Overriding RadTabStrip styling

Overriding RadTabStrip styling

8 posts, 0 answered
  1. Jeremy
    Jeremy avatar
    4 posts
    Registered:
    26 Jul 2012
    04 Nov 2011
    Link to this post
    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".

    http://localhost:49753/client/Telerik.Web.UI.WebResource.axd?compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2011.2.712.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen%3adb70bfda-5025-40e2-ae2f-653debb823509%3a8cee9284%3a92753c09%3a7d245c43%3bTelerik.Sitefinity.Resources%2c+Version%3d4.2.1733.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a4034d617-0538-40c6-a3aa-22552%3a44911412%3ab5bf473e%3acc007e78

    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.

  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    09 Nov 2011
    Link to this post
    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
    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. Jeremy
    Jeremy avatar
    4 posts
    Registered:
    26 Jul 2012
    09 Nov 2011
    Link to this post
    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.
  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    14 Nov 2011
    Link to this post
    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
    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. Chris
    Chris avatar
    49 posts
    Registered:
    20 Jul 2010
    01 Dec 2011
    Link to this post
    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.
  6. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    02 Dec 2011
    Link to this post
    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.
    <sf:ConditionalTemplate ID="ConditionalTemplate4" Left="NavigationMode" Operator="Equal" Right="VerticalSimple" runat="server">
              <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_verticalsimple"
                    EnableEmbeddedBaseStylesheet="false"
                    EnableEmbeddedSkins="false"
                    runat="server"
                    Orientation="VerticalLeft"
                    MaxDataBindDepth="1"
          Skin="Sitefinity">
              </navcontrols:SiteMapNavigationTabStrip>
    </sf:ConditionalTemplate>


    All the best,
    Jen Peleva
    the Telerik team
    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. roxanne
    roxanne avatar
    1 posts
    Registered:
    02 Jul 2014
    07 Jul 2014 in reply to Jen Peleva
    Link to this post
     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?
  8. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    09 Jul 2014
    Link to this post
    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
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
8 posts, 0 answered