How to write CSS for Telerick html controls like label, textbox, combos, textarea etc

[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 to write 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 am attaching a sample page in our present ASP application
Thanks in Adv
 
UI Designer

[Vargis]

Too bad no responds from telerik

[Galin]

Hi Vargis,

You can add margin to the wrapper of the RadInput Control with the following CSS rule

.RadInput
{
    margin: 5px 10px;
}

Also, the padding should be set on the input element, e.g.

html body .RadInput input.riTextBox
{
    padding: 2px 5px;
}

Additional, please refer to the following styling demo and blog post
http://demos.telerik.com/aspnet-ajax/input/examples/appearance/styles/defaultcs.aspx

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

I hope this helps.

All the best,
Galin
the Telerik team

[Vargis]

Thanks Galin
We are going to buy this controls but your team support is too slow.

Your  answer is not at all

Please see our CSS structure


/* To divide a page into 2 column */

.div2col-S,.div2col-M,.div2col-L, .div2col-bothlbl {width:47.5%;margin:0 0 0 1.5%;}

/* To Align Label and other input fields
In .div2col-S Label width occupies 20%
In .div2col-S Label width occupies 30%
In .div2col-S Label width occupies 40%
*/

.div2col-S span, .div2col-S label {float:left; width:20%}
.div2col-S input[type=text], .div2col-L textarea {float:left; width:72%}
.div2col-S select {float:left; width:73%}


.div2col-M span, .div2col-M label, .div2col-M a {float:left; width:30%}
.div2col-M input[type=text], .div2col-M textarea{float:left; width:60%}
.div2col-M select {float:left; width:61%}


.div2col-L span, .div2col-L label {float:left; width:40%}
.div2col-L input[type=text], .div2col-L textarea {float:left; width:52%}
.div2col-L select {float:left; width:53%}

So we dont hav to put width on every element. Becoz of putting dimensions in Percentage(%) instead of Pixels(px) elements wil adj according to screen size it will increase or decrease

[Galin]

Hello Vargis,

Please note, there is no guaranteed response time for the forum posts.

However, based only on the provided CSS rules I am not quite sure that I correctly understand the case you are describing. Could you please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case.

Looking forward to your reply.

Greetings,
Galin
the Telerik team

[Vargis]

Thanks for your reply.
Now I had achieved wat i want to do. Percentage is worked .Also no need to call a css class on every telerik field/control.
Its all from an external css globally.