Want UI/CSS Support

[Vargis]

Firstly am very fresh to this components. I already used css to lay asp:labels and asp:textboxes etc ..even grid control and calender cntrls in asp.
We need UI help to design a big project which have lot of labels and its Associated Input fields to lay ...2 column ..3 column upto 4
So how we have writte our CSS.

I just go thru the a page which is fully filled with telerick controls. And i found we cant change their color or margins or paddings thru CSS. Only we can control its width from an external CSS file. Also dropdowns are rendering inside a table so i cant control its width with SELECT tag.

Also i found that in grid if column increase width also increase will break layout ..Pls help me
Thanks in Adv
 
UI Designer

[Bozhidar]

Hi,

I am not quite sure what you would like to do as you didn`t provide any project or more detailed information. As I understand, you would like to build a layout containing a lot of asp texttboxes, dropdowns and other form elements using any of the Telerik Input controls such as RadInput, RadFormDecorator and RadButton. You would like also to change margin, padding, color and background color, but you have problems to override the existing values for that properties.

In that case, you have two options, the first one is to chose any of the existing predefined embedded Telerik skin and to implement small changes, but you should keep in mind that this is a custom solution, that could break the control layout and behavior, and in that case we could not provide reasonable support. The second options is to create custom skin for the controls that you are going to use and to chose your preferred color palette, but margin/padding would be override in that case also, that leads us to the already explained situation with the possibility to break the control layout and behavior.

In the first situation, in order to override the already existing CSS, you need to use heavier CSS slectors than those used in the base and skin specific files.

Each of the controls included in the RadControls for ASP.NET AJAX suite is styled with two CSS files that are loaded in a certain order. The first one - ControlName.css , also called base stylesheet contains CSS properties and values that are common for all skins, i.e it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In the general case, when creating a custom skin for a control this file should not be edited, unless the custom skin needs different sizes, padding and/ or margins.

The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, i.e - FormDecorator.Default.css. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties, and references to images, colors, borders and backgrounds.

To understand selectors heaviness better, I am pasting you an explanation I gave to another customer a few time ago. It is for another control, but the logic is the same:

To make the selecotr heavier, you should use one more HTML element in the selecotr, or ClassName or ID, or !important.

Each of them has some values - HTML element = 1, class name=10, ID=100, important=10 000.

Let`s use for example my previous post - the original selecotr that should be overwritten was:

.RadDock .rdCenter .rdCommands a = 31 (3 class names x 10 = 30 + one HTML element <a> = 1)

I have override it with the following:

.RadDock .rdCenter ul.rdCommands a = 32 (3 class names x 10 = 30 + two HTML elements <a> and <ul> = 2)


If I was using the selector without UL they would be with equal height, but because we want to override the CSS coming from the DLL, which will be loaded after our CSS customizations, it would be overriden if the selectors heaviness is equal.

So, when you have selectors with equal height, the latest loaded will be allied.

If I want to make the selector heavier than 32, I could use the following:

.RadDock .rdCenter ul.rdCommands li a  - it will give me 33 or

div.RadDock_Bluefin .rdCenter ul.rdCommands li a - 34 or

div.RadDock_Bluefin .rdTable .rdTop .rdCenter ul.rdCommands li a - which will give me really heavy selecotr of 54...and still I can make it heavier....

div.RadDock_Bluefin table.rdTable tr.rdTop td.rdCenter ul.rdCommands li a - which will be 57...

Using ID will make the selecotr much more heavier (+100) and using !important will give +10 000.

And when you are using Telerik controls usually you don`t need to override base styles with your Custom Skin, but when you want to do that, in your case with the size, margin, padding of the asp text boxes, you should use heavier selector than the one used in the base CSS file.

The second options is to use Telerik Visual Style Builder which gives you the opportunity to create custom skin just for a few minutes. You could find useful Meet the Visual Style Builder that gives the steps to use it, there is also a video tutorial to make things more clear. Note that the style builder will change for you colors, background colors, font sizes, but not margin, padding, height or other base style properties.

The following simple code, shows how to override and change some of the basic CSS rules for an asp text box decorated by RadFormDecorator:

<!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>
    <style type="text/css">
        .RadForm_Web20.rfdTextbox input.rfdDecorated[type="text"]
        {
            background-color: Yellow;
            height: 33px;
            border: 3px solid blue;
            padding: 6px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
        Skin="Web20" />
        <asp:TextBox runat="server"></asp:TextBox>
    </form>
</body>
</html>

All the best,
Bozhidar
the Telerik team