Skin image problem

8 posts, 1 answers
  1. François Martel
    François Martel avatar
    8 posts
    Member since:
    Oct 2008

    Posted 13 May 2009 Link to this post

    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.



  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 May 2009 Link to this post

    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.
  3. François Martel
    François Martel avatar
    8 posts
    Member since:
    Oct 2008

    Posted 14 May 2009 Link to this post

    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.
  4. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 May 2009 Link to this post

    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.
  5. François Martel
    François Martel avatar
    8 posts
    Member since:
    Oct 2008

    Posted 14 May 2009 Link to this post

    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)?
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 15 May 2009 Link to this post

    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.
  7. François Martel
    François Martel avatar
    8 posts
    Member since:
    Oct 2008

    Posted 15 May 2009 Link to this post

    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.
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 18 May 2009 Link to this post

    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.
Back to Top