Skin image problem

[François Martel]

Hi,

I don't understand how things works with images load by the css of the panelbar. I've used the default skin that I have modified and it's work well. But I don't understand how your css sprites works :

.RadPanelBar_ServicesEtu .rpLink
{
    background-color: #fdfdfd;
    background-image: url('PanelBar/RootItemBg.gif');
    border-color: #ebebeb;
}

For this example, you load "RootItemBg.gif" where there are three states of button. How he can know what state to load when there are no positionning numbers in the statement like :

#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}

I've read this articles http://www.alistapart.com/articles/sprites/ to know how css sprites work but I don't understand your methods.

Thanks.

[Paul]

Hi François,

The background positioning is set via the base stylesheet, i.e.

PanelBar.css

/* <background positioning> */
.RadPanelBar .rpLink,
.RadPanelBar .rpExpanded
{
    background-position: 0 0;
}

.RadPanelBar .rpFocused,
.RadPanelBar .rpLink:hover,
.RadPanelBar .rpExpanded:hover
{
    background-position: 0 -200px;
}

.RadPanelBar .rpSelected,
.RadPanelBar .rpSelected:hover
{
    background-position: 0 -400px;
}

.RadPanelBar .rpFirst .rpLink,
.RadPanelBar .rpFirst .rpExpanded
{
    background-position: 0 -1px;
}

.RadPanelBar .rpFirst .rpFocused,
.RadPanelBar .rpFirst .rpLink:hover
{
    background-position: 0 -201px;
}

.RadPanelBar .rpFirst .rpSelected,
.RadPanelBar .rpFirst .rpSelected:hover
{
    background-position: 0 -401px;
}

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

[François Martel]

Ok thanks, but if I set the EnableEmbeddedSkins to "false" and I want to base my skin on default, I must take "PanelBar.Default.css" and "PanelBar.css" to copy them in my css folder of my website to modify them as I wish? At this moment, I have only take a copy of "PanelBar.Default.css".

Here it's said at step four : "copy the default RadPanelBar skin files from the installation directory to the "Green" directory; copy both the \PanelBar directory that contains the images for this skin and the PanelBar.Default.css file that defines the skin styles."

http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html

How can I change the background position if I only copy this css and not the base stylesheet? I've tried to copy it in my css folder but it's seem to not recognize it.

[Paul]

Hello François,

Yes, if you, for some reason, need to disable the embedded skins of a RadControl, you should set the EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet properties to false. More information can be found at

How skins work
Creating custom skins 

Kind regards,
Paul
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.

[François Martel]

Ok, it's because in this links, it's doesn't talk about the "EnableEmbeddedBaseStylesheet" attribut. Is there some doc to know the changes to make to this base stylesheet to be use by my page (rename all skin suffixes in the CSS class names)?

[Alex Gyoshev]

Hi François Martel,

The base stylesheet has no suffixes, so it will not require changing. The state of the online documentation is very bad - we're currently working on fixing that - and this is why this property is omitted.

Regards,
Alex
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.

[François Martel]

Ok thanks. I have another request... I'm trying to modify all the states of the buttons in my panelbar and my menu but I can't know exactly what, in the images (Panelbar : Expandable.png, RootItemBg.gif, SubItemStates.png, Menu : rmSprite.png, rmVSprite.png) are each states. It's long to check in the css files what are the background position for each state and check this in the image. Can you take this images and mark on them what are each state, for the panelbar and the menu (default skin).

Thanks.

[Alex Gyoshev]

Hello François,

We are currently writing the sprite explanation help articles. I'm attaching the sprite explanation for the rmSprite image (horizontal sprite for RadMenu). We'll update this thread as soon all the articles are ready - sorry for the inconvenience.

All the best,
Alex
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.