Using Telerik ASP.NET AJAX Controls with css frameworks

[Yoly]

Hi.

I've been having some trouble getting the ASP.NET Ajax Controls to look as they should with certain CSS Stylesheets.  I've been mostly been "hacking" by trial/error the base CSS files for some sites and somewhat have gotten the controls to look similar to what they should although not achieving the exact look and feel they have with "standard" CSS stylesheets.  

I know this this because of the way CSS cascade their styles, but I would like to know if there is a way to either have the stylesheets for the controls "override" the site styles for the elements that the controls use, or if you could provide us with stylesheets for each skin to "reset" the telerik controls styles.

One example of this could be seen by using the Telerik ASP.NET Controls with  with the popular bootstrap css framework (http://twitter.github.com/bootstrap).  But other style sheets, buying a website template, for example, also results in the same behavior.

Is there a way around this?

Thanks.

[Princy]

Hi,

I suppose you want to apply your CSS instead of the embedded one. try whether putting the keyword !important for the overridden settings changes the behavior. This approach is used to provide a higher priority to your custom settings so that they cannot get overridden by the default embedded settings.  Please take a look into this documentation for more information.

Hope this helps.

Regards,
Princy.

[Yoly]

Princy thanks for your reply.

What I really want to know is how to get the controls to display properly with different stylesheets.
What I'm looking for is some kind of "base.css" for the AJAX controls that will have them display properly, since I really don't know what would I have to override from my website's CSS.  From what I could gather from the link you provided I would have to know what to change for each style.  I don't know what is causing the controls to display as they do, so I don't know what I should change in the stylesheet.

For a long time we've been using some kind of base.css for websites to standarize the basic stylesheet look for each browser, so our design is coming from the same base in all browsers and have it look the same.  I suppose Telerik has a similar approach for their controls?  What type of styles each control is assuming we have.  For example, if I have changed the <ul><li> for the whole site, the controls that render based on these elements, what style are they asuming we are starting with?

[Galin]

Hi Yolanda,

The RadControls are compatible with the Bootstrap framework and other popular CSS frameworks as Blueprint. Also, using globally styles as color, background or other visual styles for all html elements will not break the functionality of RadControls. But I can strongly recommend you to avoid globally styling the position and dimension. Also, avoid using of !important as well.

I hope this helps.

Regards,
Galin
the Telerik team

[Allen]

I realize this is an ancient post, but has a demonstration project with Telerik + Tailwind.css been created at any point?  Thank you.

[Vessy]

Hi Allen,

We have not tested our controls with Tailwind and we do not have an integration project with Telerik and Tailwind. I examined the base styles coming from the Tailwind framework and they contain plenty of global CSS selectors (using tag elements), so it is possible for our controls also to be affected by these styles.

If you decide to try integrating them on you own, it will be really appreciated if you share your experience and the issues faced during this process (if any).

Kind regards,
Vessy
Progress Telerik