This is a migrated thread and some comments may be shown as answers.

Dock style properties

3 Answers 150 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Dan Miller asked on 16 Jul 2010, 10:54 PM

wrong-style.png

correct-style.png

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.

3 Answers, 1 is accepted

answered on 20 Jul 2010, 12:16 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 21 Jul 2010, 02:46 PM

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