KB Article T108065
Visible to All Users

How to correctly apply a custom background color to a specific visual element of the themed control or extension

Description:
This KB Article addresses the following situation:

You are using our components with the applied default or custom theme (see Appearance Customization - Theming). You decided to change the background color of components or their parts and got unexpected results. For example:

ASPx
<dx:ASPxMenu ID="ASPxMenu1" runat="server" BackColor="Red" Font-Size="Large"> ...

results into:

ASPx
<dx:ASPxGridView ID="ASPxGridView1" runat="server"> <SettingsBehavior AllowFocusedRow="True" /> <Styles> <FocusedRow BackColor="Red" /> </Styles>

results into:


Answer:
This behavior occurs because elements of our component can be rendered with help of CSS Image Sprites defined at the theme level. As a result, both the background color and background image are applied to the same element. You can use the approach illustrated in the How to inspect CSS rules KB article to examine the generated HTML in order to check this behavior. For example:

The solution to this issue is to avoid/customize the "background"  CSS rule generation. All our components have the corresponding BackgroundImage setting in their style section. You can use it to override the background image. For example, we can rewrite the previous samples as follows:

ASPx
<dx:ASPxMenu ID="ASPxMenu1" runat="server" BackColor="Red" Font-Size="Large"> <BackgroundImage ImageUrl="empty.png" /> ...
ASPx
<dx:ASPxGridView ID="ASPxGridView1" runat="server"> <SettingsBehavior AllowFocusedRow="True" /> <Styles> <FocusedRow BackColor="Red"> <BackgroundImage ImageUrl="empty.png" /> </FocusedRow> </Styles> <Columns> ...

Of course, you need to put the empty.png image file to your website's root directory. The rendering result should be as follows:


Finally, please note that we demonstrated only one possible approach. You can use many different approaches to achieve the same result. For example, you can declare separate CSS rules (see ASPxGridView - Modify Focused Row color and CSS background-image property):

CSS
.dxmLite_DevEx .dxm-main { background: red; }
CSS
.dxgvFocusedRow_DevEx { background: red; }

Note that in this scenario, you do not even need to specify the color at the markup level because these CSS rules define the color and empty background image simultaneously. This solution is targeting the DevEx theme. In case of other themes, you need to modify the CSS rule postfix based on a specific theme.

Alternatively, you can implement specific server-side logic (see ASPxGridView - Only a part of a row is painted with the correct color assigned to the e.Row.BackColor property in HtmlRowPrepared event if text wraps with column) to avoid undesired side-effects of the default sprite images. Or, you can create a custom theme that is the most flexible solution.

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.