Web 2.0 font sizes with RadInput

If you’ve spent much time visiting “web 2.0” sites, you know that large font sizes are totally “in vogue” for data entry forms. Not only are they easy for all audiences to read, but they also imply a certain level of simplicity on a website. In fact, there are even some UX experts suggesting larger font sizes are better now that high-resolution monitors are the norm and not the exception.

If you’ve got a “beautifully designed” web 2.0-style site, though, and you’re working with RadInput, you know that the default skins “force” their own font size. What do you do if you want the powerful real-time input validation of RadInput and your big web 2.0 fonts?

Fortunately, the problem is easy to solve with a very slightly customized RadInput skin (which is available at the bottom of this post). Essentially, the custom skin just removes the CSS “font-size” declarations from the RadInput Default skin, enabling your RadInput controls (which includes textboxes configured with RadInputManager) to inherit the font-size from your site’s main CSS definition. The effect transforms a form with RadInput from this:

To a form with RadInput’s inheriting the larger page font size:

Now you can take advantage of all the power RadInput and RadInputManager provide without disrupting your “web 2.0” look and feel. To use the custom skin (again, provided below), you simply need to follow these steps:

• Copy the “Input.Basic.css” and “Input” folder in the attached ZIP to your App_Themes folder
• Make sure your page is configured to use the Theme containing your custom skin (via the Page-level Theme property)
• On your RadInput or RadInputManager controls, set EnabledEmbeddedSkins to False and set the Skin property to “Basic”

And that’s it! I hope you enjoy the custom skin and I hope this helps those of you working with “web 2.0” designs better leverage RadInput.

Download custom skin “Basic” for RadInput