ASP.NET Interface Controls - Changing the font-size / height

In order to change the font-size or the height of an Interface Control, you need to modify the stylesheet used by the control. The css styles can be found in the style.css file located in the corresponding style folder that is used by the application. To change the font-size, locate these styles: "font-size: 10px;" and change them as you wish. For example, for the Textbox control you need to modify these CSS classes:

.ob_iTIE /* Input Element */ ,
.ob_iTCN /* Normal State - container */,
.ob_iTIO /* Over State - container */,
.ob_iTIA /* Active State - container */,
.ob_iTID /* Disabled State - container */.

To change the height of the Interface Controls you need to create new background images for the controls, that have a larger/smaller height than the standard ones. To increase the performance all the Interface Controls are using CSS sprites to load the background images for all the states (normal, focused, pressed, disabled, etc.). This makes them load faster, but creating a new style is a bit more complicated. Having the existing images (from the premiere_blue and grand_gray styles) as a template, you need to create similar images, containing sprites for all the states of a control.

Because the new sprites have different dimensions than the ones in the default styles, you need to update all the background-position styles from the CSS file beeing used, based on the width/height of each sprite.

For example, if you change the height of the textbox sprites from 17px to 25px, you need to update the "background-position" style in the following CSS classes:
.ob_iTCN .ob_iTL /* Normal State - left */,
{
background-position: 0px 0px;
}
.ob_iTCN .ob_iTC /* Normal State - content */,
{
background-position: 0px -100px;
}
.ob_iTCN .ob_iTR /* Normal State - right */,
{
background-position: -10px 0px;
}
.ob_iTCD .ob_iTL /* Over State - left */,
{
background-position: 0px -25px;
}
.ob_iTCD .ob_iTC /* Over State - content */,
{
background-position: 0px -125px;
}
.ob_iTCD .ob_iTR /* Over State - right */
{
background-position: -10px -25px;
}
.ob_iTCA .ob_iTL /* Active State - left */,
{
background-position: 0px -50px;
}
.ob_iTCA .ob_iTC /* Active State - content */,
{
background-position: 0px -150px;
}
.ob_iTCA .ob_iTR /* Active State - right */,
{
background-position: -10px -50px;
}
.ob_iTCO .ob_iTL /* Disabled State - left */,
{
background-position: 0px -75px;
}
.ob_iTCO .ob_iTC /* Disabled State - content */,
{
background-position: 0px -175px;
}
.ob_iTCO .ob_iTR /* Disabled State - right */,
{
background-position: -10px -75px;
}
 
For any questions send us a support request.

"I would like to tip my hat to you on your response time...holy buckets, I have never had someone respond that fast. Thank You!!"

Bryan Spann

Random testimonial   All testimonials

obout.com
obout.com Home
News
Interface Controls Home 
Interface Controls Home
Download
Site Map
Examples - 55
Appearance - 2
Live Styles
Different Styles New
Common Features - 3
Width
Enable / Disable
Reset Values New
Button - 6
Default Button
PostBackUrl
Client-Side Events
Server-Side Events
Server-Side Commands
Client-Side Manipulation
Checkbox - 6 New
AutoPostBack
Linked CheckBoxes with Tri-States
Client-Side Events
Server-Side Events
Client-Side Manipulation
Linked Fields New
Dropdown List - 8
Height
MenuWidth
Multiple Rows and Columns New
AutoPostBack
Linked Fields New
Client-Side Events
Server-Side Events
Client-Side Manipulation
Image Button - 7
Enable specific states
Default Button
PostBackUrl
Client-Side Events
Server-Side Events
Server-Side Commands
Client-Side Manipulation
Radio Button - 5 New
AutoPostBack
GroupName
Client-Side Events
Server-Side Events
Client-Side Manipulation
Textbox - 11
Auto Complete
AutoPostBack New
MaxLength
MaxLength with Counter New
MaxLength with Auto Focus New
TextMode
WatermarkText
Linked Fields New
Client-Side Events
Server-Side Events
Client-Side Manipulation
Integration - 7
Cascading Dropdown Lists
With ASP.NET Validators
Inside Grid
Textbox with DatePicker
Inside User Controls New
Using ASP.NET Themes/Skins New
Create User Wizard New
Knowledge Base - 1
Knowledge Base
Documentation - 22
Server-Side
OboutButton
OboutButtonCssSettings
OboutCheckBox
OboutCheckBoxClientSideEvents
OboutCheckBoxCssSettings
OboutDropDownList
OboutDropDownListClientSideEvents
OboutDropDownListCssSettings
OboutImageButton
OboutRadioButton
OboutRadioButtonClientSideEvents
OboutRadioButtonCssSettings
OboutTextBox
OboutTextBoxClientSideEvents
OboutTextBoxCssSettings
Client-Side
OboutButton
OboutCheckBox
OboutDropDownList
OboutImageButton
OboutRadioButton
OboutTextBox
ChangeLog
Tutorials - 2
Configuration
Using the correct path
Appearance
Changing the font-size / height