I am working for a client who requires the use of different icons displayed instead of the default ones in the editor toolbar.
The icons he has created are 30px x 30px so they are larger than the default ones used in the CommandSprites.gif. They are also seperate images for each button not like the line of buttons in the CommandSprites.gif.
So far I have managed to display each of them them via CSS as follows:
.rade_toolbar.MySkin .Save
{
background-image: url(MySkin/ToolBarImages/Save.png);
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
.rade_toolbar.MySkin .Print
{ ..... etc...
And in the Editor declaration area I have done the following:
<telerik:RadEditor ID="RadEditor1" runat="server" EnableEmbeddedSkins="False" Skin="MySkin">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool name="Save" text="Save" ShowIcon="true" />
<telerik:EditorTool name="Print" text="Print" ShowIcon="true" />
etc...
The problem is, I have searched every help file, every forum, the online documentation etc. but nothing decribes the structure of the CSS that is used for the toolbar in the editor. My client is using Telerik RadControls for ASP.NET Ajax version 2008.03.1409.20.
I want to use some of the CSS used in the Vista skin and have copied this to a file called MySkin however all the info I have been reading seems to be for all different versions of these skins and editors and not much of it makes sense.
Just a Clear explaination as to how to do what I am doing here would be much appreciated by anyone. I would like to place the icons where I want them on the top (which I have had some success with) and use some of the CSS structures originating from the vista skin.
Please note: I am not asking about how to do custom buttons here, that is already understood, I need to replace the existing CommandSprites.gif buttons with my own custom made icon buttons that are 30px x 30px
1 Answer, 1 is accepted
0
Hi Graeme,
You may examine the html structure of any of the controls we provide by using either Internet Explorer Developer Toolbar or FireBug. These are excellent tools that I strongly recommend for code troubleshooting. If you haven't already, give them a try. You are right, that the documentation is quite poor, but we are planning to create skinning tutorials for RadControls for ASP.NET AJAX, as there were such for the classic controls.
Actually, your styling is alright, but the new settings are not applied, because they are overridden by our styles, that are generated sfter your style information. To force your settings, simply use the !important statement after each property value, i.e:
.rade_toolbar.MySkin .Save
However, please, have in mind that the new dimensions of the buttons are bigger than the default ones, and this will certainly lead to other problems, as we do not support custom toolbar sizes.
Greetings,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You may examine the html structure of any of the controls we provide by using either Internet Explorer Developer Toolbar or FireBug. These are excellent tools that I strongly recommend for code troubleshooting. If you haven't already, give them a try. You are right, that the documentation is quite poor, but we are planning to create skinning tutorials for RadControls for ASP.NET AJAX, as there were such for the classic controls.
Actually, your styling is alright, but the new settings are not applied, because they are overridden by our styles, that are generated sfter your style information. To force your settings, simply use the !important statement after each property value, i.e:
.rade_toolbar.MySkin .Save
{
background-image: url(MySkin/ToolBarImages/Save.png) !important;
background-position: center !important;
background-repeat: no-repeat !important;
width: 30px !important;
height: 30px !important;
}
However, please, have in mind that the new dimensions of the buttons are bigger than the default ones, and this will certainly lead to other problems, as we do not support custom toolbar sizes.
Greetings,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.