Dock style properties

4 posts, 0 answers
  1. Dan Miller
    Dan Miller avatar
    23 posts
    Member since:
    Jul 2010

    Posted 16 Jul 2010 Link to this post

    Is there a way to turn off all the font styles that a raddock generates? I have the following configuration on my page:
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:Label ID="LabelAdmin" runat="server" Text="" />
        <telerik:RadDockZone ID="RadDockZoneContentBlock1" runat="server" MinHeight="50px" MinWidth="100px" BorderStyle="None">
            <telerik:RadDock ID="RadDockContentBlock1" runat="server" DockHandle="None" DefaultCommands="None" OnClientInitialize="SetHandleDock" DockMode="Docked">
                <ContentTemplate>
                    <div id="Handle_ctl00_ContentPlaceHolder1_RadDockContentBlock1" style="cursor: move;">
                        <uc1:ContentBlock ID="ContentBlock1" ContentID="1" runat="server" />
                    </div>
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockZone>
    </asp:Content>

    I have attached 2 images to this, the "correct style.png" is how it is supposed to look on the page. The "wrong style.png" is how it looks when i create the same page using the above layout. If I move the content blocks outside the raddock it looks just fine, as well I used firebug and turned of some skins and styles on the raddock and the preview firebug shows looked correct as well. I have tried turning on and off pretty much every property I can find for raddocks but nothing fixes the problem.
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 20 Jul 2010 Link to this post

    Hello,

    You should create a custom skin and change the font of the .RadDock .rdContent class in your base skin file (Dock.css) .
    Another suggestion is to override the .RadDock .rdContent css class, e.g.
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server">
                <telerik:RadDock ID="RadDock1" runat="server">
                    <ContentTemplate>
                       some text
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        </div>
          
        </form>
    </body>
     <style type="text/css">
            .RadDock .rdContent
                {   
                    font: normal 15px Tahoma !important;
                }
        </style>
    </html>
    Hope this helps!

    Regards,
    Petio Petkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan Miller
    Dan Miller avatar
    23 posts
    Member since:
    Jul 2010

    Posted 20 Jul 2010 Link to this post

    It says if the EnableEmbeddedSkins  property is set to false you will have to register the needed CSS files by hand. Does this not mean that all telerik skin stylesheet settings for that control are to be ignored? If this is not the case then what is the point of the EnableEmbeddedSkins  property? Is there no other property that provides this functionality?
  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 21 Jul 2010 Link to this post

    Hello Dan,

    If you want to apply some small changes, it is not necessary to disable Skin Specific styles or Base styles. In your case, if you want only to remove the RadDock borders, and to change the font styles, you should overwrite the CSS rules in the head section of your document:

    <style type="text/css">
        .RadDock .rdTop .rdLeft,
        .RadDock .rdTop .rdRight,
        .RadDock .rdTop .rdCenter,
        .RadDock .rdBottom .rdLeft,
        .RadDock .rdBottom .rdRight,
        .RadDock .rdBottom .rdCenter,
        .RadDock .rdMiddle .rdLeft,
        .RadDock .rdMiddle .rdRight
        {
            background-image: none !important;
        }
         
        div.RadDock .rdContent
        {
            font-family: "Trebuchet MS", "Lucida Grande", serif !important;
            font-size: 12px !important;
        }
    </style>

    But if you like to remove all the visual styles from a Skin, you actually will need to create a new custom skin. Than you should set EnableEmbeddedSkins="false" to the DockZone and all RadDocks:

    <telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="false" Orientation="Horizontal" Width="650" EnableEmbeddedSkins="false">
                    <telerik:RadDock ID="RadDock1" runat="server" DockHandle="None" DefaultCommands="None"
                        OnClientInitialize="SetHandleDock" DockMode="Docked" Width="200" Style="margin-right: 10px;" EnableEmbeddedSkins="false">

    EnableEmbeddedSkins="false" will ignore all Telerik skin specific style sheets.

    The next step will be to create your Custom Skin, in which you will set all background colors, sprite images and another skin specific styling that exists in Telerik provided skins. In case you want to change some layout-specific settings, you will need to change the base CSS file, where all margin, padding, font and another settings are set, common for all Skins. I would suggest you to overwrite these settings in your custom Skin file with stronger selectors, because if you change the base CSS file to fit the design of your custom skin, you will break the layout of all other embedded skins.

    In Tutorial: How to Create Custom RadDock Skin is described the process of creating custom skin and applying it to your page.

    Regards,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top