Custom Skin for RadSpell check is not working

[Muralidharan Ramakrishnan]

Dear Telrrik,

 

I am trying to put custom skin for RadSpellCheck, even I gave enable embed skin false and uploaded the skin CSS file and image in the theme folder, I am not getting the applied skin properly. Please see the attachments for more information

 
pelase find the list of below images

http://www.hrdpower.com/downloads/spell/Spell%20Address%20List%20in%20Solution%20Explorer.JPG
http://www.hrdpower.com/downloads/spell/Spell%20Half%20Visible.JPG
http://www.hrdpower.com/downloads/spell/Spell%20link%20address%20has%20to%20be%20addressed%20in%20%20Master%20Page.JPG
http://www.hrdpower.com/downloads/Spell%20Source%20Code.JPG


 

Regards,

Vinod

[Martin]

Hi Muralidharan Ramakrishnan,

RadSpell does not have its own skinning, but gets its look and feel from a couple of other controls - RadWindow and RadFormDecorator. RadWindow is used to style the window looks of the control, while FormDecorator styles its inner part - the spellchecker itself - its buttons and input fields.

In order to style RadSpell, you should:

1. Register your RadWindow skin in the head of your webpage, using the link tag.
2. Create a custom skin skin for RadFormDecorator, and include it in your project.
3. Create a new .css file and name it DialogCss.css and include it in the project
3. In  DialogCss.css regsiter the following CSS files using the @import directive:

1. FormDecorator.css
2.FormDecorator.SkinName.css
3. Spell.css

i.e:

@import url('Path/To/Spell.css');
@import url('Path/To/FormDecorator.css');
@import url('Path/To/FormDecorator.SkinName.css);

You may use our online skin converter (http://converter.telerik.com/skinconverter/) that converts pre Q1.2009 skins to the new rendering and the new CSS classnames we have recently introduced.


Sincerely yours,
Martin Ivanov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Tim Gallagher]

What do you do with the DialogCss.css file?  We have the telerik Control embedded in a custom control and it seems to pick up the default Skin regardless of the settings.

[Martin]

Hello Tim Gallagher,

Please, make sure that:

1. You've set EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false"
2. You've set Skin="SkinName"
3. You have imported the files from my previous message via the DialogsCssFile property. RadSpell is loaded in an iframe, which means that the required CSS files have to be imported manually.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim Gallagher]

Trying to use this to override the size of the dialog, but its not resizing.  I place this in one of the files that is imported with my DialogCss.css file but its not overriding the default settings for that class?

 

.RadWindow.RadWindow_MyCustomSkin.rwNormalWindow.rwTransparentWindow
{
    width: 600px;
    height: 400px;
}

I am also trying to style the title pane of the dialog, any hints on what class needs overridden there and how to do it?  Cannot figure out how to override the inline style

[Rumen]

Hi Tim ,

You can resize the RadSpell Window using the following code:

         using Telerik.Web.UI;
         ...
        RadDialogOpener dopener = (RadDialogOpener)RadSpell1.FindControl(string.Format("{0}dialogOpener", RadSpell1.ClientID));
        dopener.DialogDefinitions["SpellCheckDialog"].Width = Unit.Pixel(1000);
        dopener.DialogDefinitions["SpellCheckDialog"].Height = Unit.Pixel(1000);

You can download a sample project from here.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tony]

I am trying to reference the dialog in Page_Load but its returning null.

Also, the link to the example project broken so I can see a working example.

I'm using the 2012.2.815.40 release - is there a better/newer way to resize the RadSpell dialog?

[Rumen]

Hi,

You can find attached the missing project, but indeed the code in it does not work for the latest version.

To resize the spellchecker dialog you can use the following code:

<telerik:RadSpell OnClientLoad="OnClientLoad" ID="RadSpell1"  runat="server" ControlToCheck="txtData"/>
<script type="text/javascript">
    function OnClientLoad(spell) {
        var dialogOpener = spell.get_dialogOpener();
        dialogOpener._dialogDefinitions.SpellCheckDialog.Width = "1000px";
        dialogOpener._dialogDefinitions.SpellCheckDialog.Height = "1000px"
    }
</script>

All the best,
Rumen
the Telerik team

[Tony]

Thank You that worked.

[Harikrishnan]

I have a problem with Rad Spell. I have to chnage Spell-Dialog box needs to be add french langauge.

Attached image for the reference