Customising images in a skin

[Michael Dunbar]

I've started a new thread for this as I don't appear to be getting anywhere. It was discussed previously but I don't want to hijack someone elses thread.

I have modified the WebBlue skin for the splitter. I am using the latest version of the splitter - released yesterday. All my CSS amendments are working as expected but the arrow buttons to collapse and expand the radpane on the splitbar are not appearing. Before I installed the latest version I was getting the default images for webblue from the web resource. I want my custom images to appear.

My folder structure is as follows (and may be the problem but is not really negotiable in the context of the project):

App_Themes/Cks/RadControls/Splitter/Skins/Cks/ (Cks being the renamed skin and all refs to webblue in the stylesheets have been amended so that is working ok)

The image names are as they were originally: splitbar_collpase_h.gif and splitbar_expand_h.gif

How do I get this to work please? It's starting to annoy me that something so simple is taking so long to resolve.

<telerik:RadSplitter ID="rspSplitter" runat="server" Width="100%" Height="100%" HeightOffset="138" Skin="WebBlue" EnableEmbeddedSkins="False">

Help!

[Tsvetie]

Hello Michael Dunbar,
The first thing that I notice is that you have not set the Skin property of the RadSplitter to the name of the new skin - Skin="Cks".

Another thing is that the RadSplitter has four images for the SplitBars - two for Vertical splitters and two for Horizontal splitter - please make sure that you have replaced the correct images.

Apart from these suggestions, everything seems correct. In case the problem persists, I will really appreciate it, if you could take the time to send us a running project, even not so simple.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

What does the image path need to be exactly?

[Tsvetie]

Hi Michael Dunbar,
The images path is set in the CSS file of the skin you are using, in the class, applied to the element. For example:

.RadSplitter_Default .collapseBarCollapse
{
    cursor: pointer;
    width: 3px;
    height: 27px;
    text-align:center;
    background: url(Splitter/splitbar_collapse_h.gif);
}

.RadSplitter_Default .collapseBarExpand
{
    cursor: pointer;
    width: 3px;
    height: 27px;
    text-align:center;
    background: url(Splitter/splitbar_expand_h.gif);
}

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

Thanks very much... got there!

Perhaps I didn't read the documentation properly, or perhaps it needs a bit more detail, but how is one supposed to know the element class names? Are they listed somewhere?

Works a treat now anyway, so thanks for the help (again).

[Tsvetie]

Hello Michael Dunbar,
Generally, the CSS files of the skins of our controls contain comments that should help you understand to which elements do the CSS classes apply. However, I am not quite sure whether having a topic in the documentation, in which all the CSS classes are listed with explanation to which HTML element the class is applied, would be helpful.

For cases like yours, when you just what to check the name of the class that is applied to a certain HTML element, you can use a tool - for example for IE, you can use the Internet Explorer Developer Toolbar.

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center