heow to remove css styling of built in widgets entirely and use my own - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

heow to remove css styling of built in widgets entirely and use my own

  • heow to remove css styling of built in widgets entirely and use my own
  • Hi,
    for example, I got navigation widget (rad tab strip) and I want to use my own css, however even if I disable theming, tab strip get some classes (rtsLevel rtsLevel1 etc) which override my css settings, for example padding, font size. I know that perhaps I can bypass this by using custom ascx, or using !important in my css file, but is there any cleaner way?

  • Hi Robert

    I used my own master pages referencing their own stylesheet and then added and selected a theme with a stylesheet containing no items (to stop the basic theme stylesheet from over-riding everything).

    This was the only way I could get control of the pages and stop my own styles from being over-ridden.

    We tried ot use the inbuilt templates and make themes but had terrible stylesheet caching  (resaving the web.config file after every style sheet update was not an option for us

    To get sitefinity styles out of the master stylesheet we saved the page from the browser and took what we needed from saved css file.

    I hope someone will tell me that we have got this all wrong and that there is an easier way...

    Best Regards

  • Hi Ian,

    thank you for your insight, I agree there should be an easier way to do this. The problem of rad controls is that they use rather 'aggressive' css styles, they wrap everything multiple times with span div and I don't know what else.. There should be an option to turn off these styles, so that they produce just clean html.

  • @Robert,

    Officially trying to clean out a RadControl remains cumbersome and there's no way to clean out the produced html (<li><span><div>).

    The easiest way to clean up the 'theming' is to use stylebuilder.telerik.com and create an empty skin and attach that to your RadControl. This should hold all the style elements so you can easily override them (or as intended build your style there visually).

    If you add this to your custom theme, you'll have all the default Sitefinity CSS stripped and just the clean (or correct) RadControl CSS. 

    If you're still not satisfied, there is a crude sort of cheat but it's not Backend Page Editor friendly  and you should consider this suggestion as a proof-of-concept:

    In the root of your website, open the web.config file and add the following 2 lines to the <appSettings> section:
      <add key="Telerik.EnableEmbeddedSkins" value="false" />
      <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />

    Go to the Sitefinity folder (root/Sitefinity not the one under App_Data) and create a web.config file and add this:

    <?xml version="1.0" encoding="UTF-8"?>
       <add key="Telerik.EnableEmbeddedSkins" value="true" />
       <add key="Telerik.EnableEmbeddedBaseStylesheet" value="true" />

    What this basically does is kill all the RadControls styling for everything other than the Sitefinity folder (because we created the 2nd web.config to reactivate it).

    The entire Sitefinity backend runs from instancename/.../ so this basically will only effect your live site. However page edit runs on the actual page url, so you'll have to add a custom stylesheet to fix the page editor. It's probably one afternoon wasted, but then you're set for life.  I'm not saying the suggestion is useful, I'm just showing what can be done :)


    As to what's easier:
    Like I mentioned before, I always start with a clean custom theme (actually working on a .LESS / HTML5boilerplate.com Sitefinity enhanced setup atm) and use Stylebuilder to style any RadControls. The Stylebuilder usually gets me 90% on the way and the finishing touches are added through firebug/manually !important overrides.

  • Hi Jochem,
    thank you much for elaborating on all possible ways how to solve this :)
    In fact I use the approach with !important you mentioned, but will consider the one with two web.config files, it sounds interesting, perhaps most suitable for bigger projects with advanced themes. I'll bookmark this:)

  • Hey Robert,

    Be careful though with the 2 web.config's - it's totally untested and unsupported. It would be far 'better/safer' to use something like 
    <sfMap:SitefinitySiteMapDataSource runat="server" ID="SitefinitySiteMapDataSource1" ShowStartingNode="false" />

    and combine it with a repeater to build out a clean <ul><li> list without classes at all...
    You might want to keep an eye out for the 'Random Site Controls' by Steve McNiven-Scott (MVP Steve here on the forums). He's working on clean navigation controls with KendoUI.

  • Similarly to what Jochem just suggested, I have also created a custom nav widget. I am not an expert with the SiteMap object, but I have found that this works....at least until someone builds a better menu widget that outputs plain ole HTML.

    I'm not suggesting this a solution, just as a different way of doing what Jochem mentioned with the SitefinitySiteMapDataSource. We wanted a widget that provided a nav list as related to the current page. A nav tree with a "You are here" type of highlight.

    I pull the sitemap from here:

    var provider = SiteMapBase.GetSiteMapProvider("FrontendSiteMap");
    var currentNode = provider.CurrentNode;

    And then use the currentNode as the basis for building a simple unstyled <ul> list.

    To get child pages:
    if (currentNode.HasChildNodes)
        foreach (SiteMapNode node in currentNode.ChildNodes)
             // Using node.Url and node.Title you can build out the <li> child page links here

    For siblings - the easiest route was grabbing the parents' children

    if (currentNode.ParentNode != null)
        var siblingNodes = currentNode.ParentNode.ChildNodes;
        foreach (SiteMapNode node in siblingNodes)
            // can build sibling pages here using node.Url and node.Title
            // additionally you can test if node.Url == currentNode.Url to find the current page and apply a special class

    And then from there, you can loop through all parent generations as far as you want by using the same method for siblings, but for currentNode.ParentNode.ParentNode... Just make sure you check of the node is not null first.

    I don't have sample code for that, as we only care about the immediate parent page, the siblings, and any children. We didn't want an entire tree as we have many unrelated subsections from the root.
  • Hey Robert.  I struggled with this for a while.  In the end I adding a made up skin name in the Design Setting field on the nav widget UI.  It appears that SF tries to pull the styles for this non-existent skin file.  Since SF is looking for styles that belong to "xyzskin" it does NOT load the original CSS.

    So, now the page pulls in our custom CSS to style the nav widget.
  • This works great for me. I just needed a simple <ul><li> list.

    <sfMap:SitefinitySiteMapDataSource runat="server" ID="SitefinitySiteMapDS"  ShowStartingNode="false" />
                    <asp:Repeater  ID="Repeater_MainNav" runat="server" DataSourceID="SitefinitySiteMapDS">
                            <ul class="nav nav-tabs">
                                <li><a href='<%# Eval("Url") %>' runat="server"><%#Eval ("Title") %></a></li>

    Does anyone know how to emulate the functionality of the RadMenu when it adds the class "rtsSelected" to the current selected li? My thinking is in within the repeater, in the itemtemplate place a literal control. Then use ItemDataBound to do the check. I'm just not sure what to access at that point in the code-behind.

  • Hello Jochem,

    When you talk about the:
    "Go to the Sitefinity folder (root/Sitefinity not the one under App_Data) and create a web.config file and add this"

    Can you be more specific as to where this is?

    Also, can you go into more detail about:
    "However page edit runs on the actual page url, so you'll have to add a custom stylesheet to fix the page editor."



  • 353864_sfv502800---sitefinitycheat.PNG
    Hey Jonathan,

    Euhm... well just to be absolutely clear, the 2nd web.config 'cheat' is just a proof-of-concept to show how far you can bend the rules. So just to be clear

    disclaimer: use at your own risk - it's not advised, recommended or 100% tested.

    Having said that, if you take a look at the screenshot you'll see the folder structure. In the case of the screenshot, the sitefinity.v502800 is the root folder of the project, where the web.config sits.

    The suggestion I made was adding a web.config in the 'Sitefinity' folder, as shown on the right. The web.config file is basically telling IIS to use these setting from this folder onward.

    So for the entire site (/web.config) you disable embedded skins and stylesheets, but by adding the second web.config (Sitefinity/web.config) you enable it for everything inside the 'Sitefinity' folder.

    When browsing your website you go to http://localhost (so the /web.config is active). When accessing the backend through a browser you go to http://localhost/sitefinity/ (so the /Sitefinity/web.config is active).

    The only exception to this is when you edit a page in Sitefinity, because that url is localhost/.../Edit (there's no /Sitefinity in the url). Since editing a page doesn't happen under the /Sitefinity folder, your embedded Styles and Skins are disabled.

    Naturally the backend page editor of Sitefinity does rely on those, so you'd be forced to manually load them...

    As I said before, it's just a way to bend the system. This proof doesn't get rid of any clutter nor produce clean mark-up. The only thing it does is make sure that none of the classes are applied because the embedded skin/styles aren't loaded.

    It's far better, safer and easier to avoid using RadControls for navigation widgets if you want a simple ul/li.

  • Brilliant post!!
    Every posters are master mind in designing styles..........:-)
    <a href="mppglobal.com">ecommerce solutions</a>

  • Thanks @Jochem,,

    Your suggestion works for me in the same issue.

    In my application, default telerik style was applied in all pages even in blank pages. But after adding some keys in <appSetting> its resolved.


    Harsh Patel

  • Perfecto!