Stuart Hemming
Top achievements
Rank 2
Rank 2
Stuart Hemming
asked on 16 Aug 2011, 01:10 PM
Please see the attached screenshots.
The first is of a form shown in a popup RadWindow. The application is using the Black skin. Note that the background colour of the form is the correct colour for the Black skin. This happens automagically; I didn't make it happen. The second shows the RadSpell dialog opened. Note the background colour.
Looking at the generated HTML, it seems that my RadWindow form applies the class .rfdZone to the <html> element (I have a RadFormDecorator on the page, is that why?) whereas the RadSpell dialog doesn't.
It looks a bit pants.
Is it possible to change it?
--
Stuart
The first is of a form shown in a popup RadWindow. The application is using the Black skin. Note that the background colour of the form is the correct colour for the Black skin. This happens automagically; I didn't make it happen. The second shows the RadSpell dialog opened. Note the background colour.
Looking at the generated HTML, it seems that my RadWindow form applies the class .rfdZone to the <html> element (I have a RadFormDecorator on the page, is that why?) whereas the RadSpell dialog doesn't.
It looks a bit pants.
Is it possible to change it?
--
Stuart
4 Answers, 1 is accepted
0
Hello Stuart,
This is the way the RadSpell dialog is designed - it has a white background by default in all skins. What you can do to override this is to add a custom CSS file that will be loaded in the page that the RadSpell opens:
and in it apply the rules needed to achieve your desired look. For this example I simply made the whole background black:
but you can use a tool like FireBug to examine the output HTML and apply more complex customizations if you like.
All the best,
Marin
the Telerik team
This is the way the RadSpell dialog is designed - it has a white background by default in all skins. What you can do to override this is to add a custom CSS file that will be loaded in the page that the RadSpell opens:
<telerik:RadSpell runat="server" ID="RadSpell1" Skin="Black" ControlsToCheck="Textbox1" DialogsCssFile="custom.css" />and in it apply the rules needed to achieve your desired look. For this example I simply made the whole background black:
html, body, form { background-color: Black; } .RadSpell { background-color: Black; }but you can use a tool like FireBug to examine the output HTML and apply more complex customizations if you like.
All the best,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 17 Aug 2011, 02:22 PM
Marin,
Thanks for the info.
Sadly, life's never simple.
The app that I'm using RadSpell on uses a radSkinManager and the individual users can specify the skin they want to use, so I need to beable to cater for all of the available skins.
I thought I had a solution by setting the DialogCssFile to point to a CSS file populated like this ...
But the form isn't completely populated by the RadSpell control (see the attached screen shot).
So then I tried checking the Skin value of the RadSpell control, but this is set after OnPreRender so always reads "Default".
--
Stuart (who God, quite clearly, is not fond of)
Thanks for the info.
Sadly, life's never simple.
The app that I'm using RadSpell on uses a radSkinManager and the individual users can specify the skin they want to use, so I need to beable to cater for all of the available skins.
I thought I had a solution by setting the DialogCssFile to point to a CSS file populated like this ...
.RadSpell.RadSpell_Office2010Black {background-color: #E5E5E5;} .RadSpell.RadSpell_Black {background-color: #292929;}But the form isn't completely populated by the RadSpell control (see the attached screen shot).
So then I tried checking the Skin value of the RadSpell control, but this is set after OnPreRender so always reads "Default".
--
Stuart (who God, quite clearly, is not fond of)
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 17 Aug 2011, 04:07 PM
The RadSpell control is dynamically added to the page as part of another control (a simple editor), and so I've been able to get around the problem by exposing a "Skin" property on the containing control and using that to populate the DialogCssFile property of the RadSpell control, like this ...
Now, whilst that works it still doesn't look like a.n.other dialog skinned using the standard method.
I'd like to make the following suggestions:
--
Stuart
protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); if (!String.IsNullOrWhiteSpace(skin)) { checker.DialogsCssFile = String.Format("~/Stylesheets/RadSpellDialog_{0}.css", skin); } }Now, whilst that works it still doesn't look like a.n.other dialog skinned using the standard method.
I'd like to make the following suggestions:
- Provide (at least as an option) a mechanism to allow the dialog to be correctly skinned. By this I mean, for example, ensure that the textboxes (which I note are, actually, textboxes) are coloured in the way that textboxes would normally be.
- Provide access to the passed in skin value so that it can be queried during the normally available events in the control's life-cycle.
--
Stuart
0
Hello Stuart,
I believe there is an easier way to achieve this coloring without using multiple CSS files. You could simply make the selectors more specific so that each skin activates only one of them, for example:
You can add the other skins you are using with their custom colors. Note the nullifying of the heading at the beginning of the page. This is what enables you to remove the white space.
As for your later questions - I would ask you to explain in greater detail what you mean with "correctly" skinning the RadSpell dialog. This control has the design we have intended and I believe that it is correct. If you wish to modify if further you can use the DialogsCssFile property and provide a custom stylesheet. If you have something concrete in mind I would ask you to send us a screenshot which displays the behavior you would expect as default.
Also what should the normal color of a textbox be? I believe white is the default one and it is so in the RadSpell. If you examine the rendered HTML you will see that the RadFormDecorator does not decorate the textboxes there. This means that you can provide your custom settings in the DialogsCssFile if you wish to modify our default ones to match your needs.
As for accessing the skin - for example in the Page_Load event of the page you can access the skin of the RadSpell by simply using RadSpell1.Skin.
Best wishes,
Marin
the Telerik team
I believe there is an easier way to achieve this coloring without using multiple CSS files. You could simply make the selectors more specific so that each skin activates only one of them, for example:
div.RadSpell h4 {margin-top: 0;} .RadSpell_Black {background-color: #292929;} .RadSpell_Office2010Black {background-color: #E5E5E5;} .RadSpell_Hay {background-color: Green;}You can add the other skins you are using with their custom colors. Note the nullifying of the heading at the beginning of the page. This is what enables you to remove the white space.
As for your later questions - I would ask you to explain in greater detail what you mean with "correctly" skinning the RadSpell dialog. This control has the design we have intended and I believe that it is correct. If you wish to modify if further you can use the DialogsCssFile property and provide a custom stylesheet. If you have something concrete in mind I would ask you to send us a screenshot which displays the behavior you would expect as default.
Also what should the normal color of a textbox be? I believe white is the default one and it is so in the RadSpell. If you examine the rendered HTML you will see that the RadFormDecorator does not decorate the textboxes there. This means that you can provide your custom settings in the DialogsCssFile if you wish to modify our default ones to match your needs.
As for accessing the skin - for example in the Page_Load event of the page you can access the skin of the RadSpell by simply using RadSpell1.Skin.
Best wishes,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.