
Kevin Price
Top achievements
Rank 1
Kevin Price
asked on 24 Jun 2010, 03:31 PM
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?
.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?
5 Answers, 1 is accepted
0
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
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0

Kevin Price
Top achievements
Rank 1
answered on 25 Jun 2010, 01:32 PM
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?
0
Accepted
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
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0

aykut
Top achievements
Rank 1
answered on 21 Aug 2019, 05:51 PM
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.
What I I have another radgrid inside edit popup form ? setting rgHeader style changes things for both grid.
0
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:
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.
Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.