Popup Edit Form styling

[Kevin Price]

I have created a skin called "purple_grid" - basically, it is the default skin with a few purple images thrown in. I've gotten everything working except:
.RadGrid_purple_grid .rgEditForm .rgHeader
        {
               background-image:url('Grid/gradient_35.png');
        }

I'm trying to have the edit form popup have the same header style as the command cell DIV.RadGrid_purple_grid .rgCommandCell {

    BACKGROUND-IMAGE: url('Grid/gradient_35.png');
    color: #ffffff !important;   

}

and have tried prefixing with DIV/TD/TR to no avail. Suggestions?

[Dimo]

Hello Kevin,

You have not specified background-position style for the popup edit form header, which means that it inherits the RadGrid headers' background position. If you use a sprite image for the main headers, then probably the gradient_35.png image is applied, but not seen, as it is being offset upwards or downwards.

If you still need assistance, please send us your RadGrid custom skin.

Kind regards,
Dimo
the Telerik team

[Kevin Price]

Interesting that the sprite file created (using the Visual Style Tool) does not contain the gradient png I uploaded to use. The css for all the other elements points directly to the filename and not a location in the sprite. Are you saying the only way to change the caption/title bar for a pop-up form is through the sprite file?

[Dimo]

Hi Kevin,

I am not sure I understand what you say, but here are some additional remarks.

>> Interesting that the sprite file created (using the Visual Style Tool) does not contain the gradient png I uploaded to use.

The Visual Style Builder does not modify sprite images by adding or removing parts from them.

>> The css for all the other elements points directly to the filename and not a location in the sprite.

In some cases the background image styles pointing to the image, and the background position styles specifying the location of the image part in the sprite, are in separate CSS rules. This is done for optimization purposes.

>> Are you saying the only way to change the caption/title bar for a pop-up form is through the sprite file?

No. I meant to say that you should specify explicit background position to the popup edit form header, not just a background image style:

.RadGrid_purple_grid .rgEditForm .rgHeader
{
      background-image: url('Grid/gradient_35.png') ;
      background-position: 0 0 ;
}


All the best,
Dimo
the Telerik team

[aykut]

This is old post but subject is relevant.

What I I have another radgrid inside edit popup form ? setting rgHeader style changes things for both grid.

[Peter Milchev]

Hello Aykut,

You can use use a more specific CSS selector, for example if the .rgHeader is a direct child of .rgEditForm: 

.RadGrid_purple_grid .rgEditForm > .rgHeader {
    background-image: url('Grid/gradient_35.png');
    background-position: 0 0;
}

Here is a list of the more specific style selectors with an explanation:

• https://www.w3schools.com/cssref/css_selectors.asp;

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Peter Milchev
Progress Telerik