Custom toolbar look and feel.

[pmoney pmoney]

Hey is there a way that I can redesign the look and feel of the toolbar using css or whatever?
Need help!

[pmoney pmoney]

If it also possible to resize the image of the icons used in the buttons setting the width or height and to have the text at the bottom of they image?

[Dobromir]

Hi Pmoney,

You can create and register a custom skin in order to modify its appearance - detailed tutorial of how to do this is available here.

By design the generated HTML code for the toolbar has the following structure:
DIV (toolbar wrapper) > UL (group of tools) > LI (a specific tool wrapper) > A (a specific tool) > SPAN (tools icon/background container)
which cannot be changed - in order to modify the look of the toolbar you need to modify the representing CSS classes for each element. Information regarding the CSS classes' names is available in the following help article: RadEditor CSS Classes and Their Use.

In addition, RadEditor is using sprites in order to minimize the transferred data during load and optimize its performance but you can use custom images as tools icons, e.g.:

{
    background-image: url(./CustomIcons/BoldIcon.jpg);
}

Note that, the tool name is used as a CSS class for its representing HTML element.

In order to have text displayed inside the button you need to set the property ShowText to true in the tool declaration, e.g.:
in line: 

<telerik:EditorTool Name="Bold" ShowText="true">

using tools file :

<tool name="Bold" showtext="true" />

When this property is set to true the class name that is applied to this tool's <a> element have a suffix _text added to its name and the text is inside a new <span> element with classname .reButton_text (see the attached screenshot).

I hope this information helps.

Best wishes,
Dobromir
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.

[pmoney pmoney]

Thanks alot!
Where can I find the css files needed in the examples that you pointed me too?
editor.Default.css and window.Default.css...

[pmoney pmoney]

Hey guys I found the answer:
http://www.telerik.com/help/aspnet-ajax/editor-css-classes-and-their-use.html

For those who need to know.

[pmoney pmoney]

Hey, I went through the steps to create a custom skin but the editor just loads up blank...
What am I doing wrong?
Do I have to put the skin folder in a specific directory???

Please help.

[Rumen]

Hi Pmoney,

You can see how to load the external RadEditor skins in this KB article:
Registering an external skin of RadEditor.

Best wishes,
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.