Skip to main content
BuyLog In
ASP.NET Web Forms Controls
Search in…
Docs > Common Concepts > CSS Image Sprites > Default Implementation of CSS Sprites in DevExpress Themes
A newer version of this page is available. .
All docs
V19.2
ASP.NET Controls and MVC Extensions
Prerequisites
What's Installed
Common Concepts
Web.config Modifications
Callback Exception Handling
Client-Side Functionality
Cookies Support
Appearance Customization - Theming
Icon Collection
Performance Optimization
CSS Image Sprites
CSS Image Sprites Overview
Default Implementation of CSS Sprites in DevExpress Themes
Using Custom CSS Sprites
Data Annotation Attributes
Supported Document Types
Accessibility Support
Right to Left Support
HTML Encoding
SharePoint Support
Mobile Support
Office Document Management
Cloud Storage Account Management
Web Farm and Web Garden Support
ASP.NET WebForms Controls
ASP.NET MVC Extensions
Localization
Redistribution and Deployment
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

Default Implementation of CSS Sprites in DevExpress Themes

  • 2 minutes to read

All built-in DevExpress ASP.NET Themes utilize CSS image sprites. Each theme includes “sprite.png” and “sprite.gif” files with composite images (the latter is required for IE6 support, since this browser does not support transparent PNG files). Individual image settings are stored within ‘sprite.css’ files.

The following table illustrates image settings for the Aqua Theme. It displays the file structure, the content of the ‘sprite.png’ file and the content of the sprite.css file (truncated for demonstration purposes).

File Structure:

CSS-Sprites-Aqua-GridView.png

Note that not all images are combined in a sprite image. Animation (such as ‘Loading.gif’) and repeated background images are stored as standalone files.

File ‘sprite.png’:

   sprite-Aqua-GridView.png

File ‘sprite.css’:

... /* truncated */
.dxGridView_gvDragAndDropArrowDown_Aqua,
.dxGridView_gvDragAndDropArrowUp_Aqua,
...
.dxGridView_gvHeaderFilter_Aqua,
... 
{
    background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.png")%');
    -background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.gif")%>'); /* for IE6 */
    background-repeat: no-repeat;
    background-color: transparent;
}

...

.dxGridView_gvDragAndDropArrowDown_Aqua {
    background-position: 0px 0px;
    width: 11px;
    height: 9px;
}

.dxGridView_gvDragAndDropArrowUp_Aqua {
    background-position: 0px -17px;
    width: 11px;
    height: 9px;
}

...

.dxGridView_gvHeaderFilter_Aqua {
    background-position: 0px -36px;
    width: 19px;
    height: 19px;
}

... /* truncated */

Default sprite images and sprite CSS files are stored as resources within the ASPxThemes Assembly. This implementation provides optimal application performance, because CSS image sprites reduce the number of requests for images, and resource file compression (such as scripts and CSS files) minimizes traffic.