The appearance of each and every web control produced by Developer Express can be customized using CSS classes. This approach is the best choice if you need centralized control over the appearance of several controls or the entire site.
The CssFilePath and CssPostfix properties enable you to define a control's custom appearance using a separate CSS file.
CSS customization is a tedious task, especially for multi-element components like our ASP.NET GridView or Scheduler. To minimize the effort required to setup a style sheet, we allow you to instantly get our default sample CSS file for any control using the View CSS Sample item from that control's smart tag.
In the invoked dialog, you can specify the desired postfix for all style class names within the file.
For example, if two ASPxTextBox controls need to be styled differently via CSS, then this can be accomplished by using two different CSS files in the following manner:
- Within the control's smart tag (or the control's designer), click the "View CSS Sample" command to see a sample CSS file that provides default appearance for our controls.
- Supplement CSS class names in every CSS file with a specific postfix (some style explanatory text) unique for the file. Note that a class name and a postfix provided should be separated by the underline symbol - this is our internal requirement.
- Copy the sample CSS file's contents to your custom CSS files.
- Set the CSSFilePath and CSSPostfix properties of each ASPxTextBox control to the corresponding CSS file path and class name postfix (the CSSPostfix property should be assigned exactly to a postfix name without using a separator underline symbol).
We use a similar approach when applying AutoFormats to our controls. Therefore, when the Glass AutoFormat is applied to an ASPxTextBox editor, the editor's CSSFilePath property points to the corresponding CSS file that contains the AutoFormat's style settings ("~/App_Themes/Glass/{0}/styles.CSS"), and the CSSPostfix property is assigned with a postfix "Glass", which is the AutoFormat's name. The "{0}" parameter in the CSSFilePath property's value is only used internally by our AutoFormats. This value is dynamically substituted with an appropriate string ("Editors", "GridView", "Web", etc.) depending upon the control to which an AutoFormat is applied.