This is a migrated thread and some comments may be shown as answers.

Popup Edit Form styling

5 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
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?



5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Jun 2010, 12:46 PM
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
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
Dimo
Telerik team
answered on 28 Jun 2010, 08:53 AM
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
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.
0
Peter Milchev
Telerik team
answered on 26 Aug 2019, 11:45 AM

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. 

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: 

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.
Tags
Grid
Asked by
Kevin Price
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Kevin Price
Top achievements
Rank 1
aykut
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or