Problem with Custom Skin

7 posts, 1 answers
  1. Omar
    Omar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 09 Feb 2012 Link to this post

    I built a custom skin from the "Black" Standard skin using the Visual Style Builder, but when the CSS are generated the images are loaded using ImageHandler.ashx, so I have this on my CSS files: 
    background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&
    file=btn_corner_unselect.png&t=1824754566');
    
    The problem is that ImageHandler.ashx is failing to load the images because the complete skin is under App_Themes, I put all the stuff here because I'm using the skin as a theme so I don't need to register the CSS files, exists some way to fix this using the skin under this folder? Best Regards.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 10 Feb 2012 Link to this post

    Hello,

    Could you tell us which browser did you use to get that result? Coudl you also try to create the same skin using Firefox, as while testing Visual Style Builder FireFox seems to be the most friendly browser to it  (and I have never get such an error with that browser)?

    Once you have the results lets us know what happened.

    Kind regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Omar
    Omar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 10 Feb 2012 Link to this post

    Hello Bozhidar,

    Thanks for your quick response!

    Ok, I'm going to be more specific on all that I did.

    1. Using firefox 9.0.1 I have created a custom skin based on the "Black" included with Telerik. The only change I did was using the "Fine Tune" tab of the Visual Style Buider change the button control to use a custom background image, the tool saved my changes and when I download my zip file, I have checked if the new images exists and the CSS file include the reference to that images, and the so far everything is ok.
    2. After that I registered the custom skin using the following method: http://tv.telerik.com/watch/aspnet/visualstylebuilder/create-custom-skin-radpanelbar-with-vsb (in the folder App_Themes to avoid the manual registration of the CSS Files).
    3. I have tried to do all of this with the only difference of not using images and everything works perfect.
    4. The Issue is that the reference created on the CSS file to the image is not working:
    background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&
    control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');
    5. When I reviewed the network traffic I realized that the ImageHandler.ashx can't find the image because is on the special folder App_Themes that is not allowed.
    6. My biggest question is if exists some way to allow the ImageHandler.ashx get the images from that folder or another solution that works without have to register manually the CSS.

    Best Regards.
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 10 Feb 2012 Link to this post

    Hello,

    Could you please send me your custom skin and a simple sample ASPX code that reproduces the issue. I`ll check it locally to find what should be the problem.

    In my opinion this is a wrong generated CSS background image path. The background image path should look like that:

    .RadButton_test .rbToggleCheckbox,
    .RadButton_test .rbToggleCheckboxChecked,
    .RadButton_test .rbToggleCheckboxFilled,
    .RadButton_test .rbToggleRadio,
    .RadButton_test .rbToggleRadioChecked
    {
            background-image:url('Button/ToggleSprite.gif');
    }

    This is taken just now from a RadButton skin created with Visual Style Builder using FireFox version 10.0.

    Kind regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Omar
    Omar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 10 Feb 2012 Link to this post

    The attached files are the content of "Button" folder that is the only change on my custom skin and the following is the CSS generated under the name "Button.BEEnterprise.css":

    /* RadButton Black Skin */
     
    .RadButton_BEEnterprise.rbSkinnedButton,
    .RadButton_BEEnterprise .rbDecorated,
    .RadButton_BEEnterprise.rbVerticalButton,
    .RadButton_BEEnterprise.rbVerticalButton .rbDecorated,
    .RadButton_BEEnterprise .rbSplitRight,
    .RadButton_BEEnterprise .rbSplitLeft
    {
    	background-image:url('Button/ButtonSprites.gif');
    }
     
    .RadButton_BEEnterprise .rbToggleCheckbox,
    .RadButton_BEEnterprise .rbToggleCheckboxChecked,
    .RadButton_BEEnterprise .rbToggleCheckboxFilled,
    .RadButton_BEEnterprise .rbToggleRadio,
    .RadButton_BEEnterprise .rbToggleRadioChecked
    {
    		background-image:url('Button/ToggleSprite.gif');
    }
     
    .RadButton_BEEnterprise .rbDecorated,
    .RadButton_BEEnterprise .rbVerticalText
    {
    	color#ffffff;
    }
     
    .RadButton_BEEnterprise .rbDecorated:hover,
    .RadButton_BEEnterprise.rbVerticalSkinnedButton:hover .rbVerticalText
    {
    	color#d97a4e;
    }
     
    .RadButton_BEEnterprise.rbSkinnedButtonChecked .rbDecorated,
    .RadButton_BEEnterprise.rbSkinnedButtonChecked:hover .rbDecorated
    {
    	color#fa7537;
    }
     
    .RadButton_BEEnterprise.rbToggleButton,
    .RadButton_BEEnterprise.rbToggleButton.rbDisabled,
    .RadButton_BEEnterprise.rbToggleButton.rbDisabled:hover
    {
    	color#ffffff;
    }
     
    .RadButton_BEEnterprise.rbToggleButton:hover
    {
    	color#d97a4e;
    }
     
    .RadButton_BEEnterprise.rbDisabled .rbDecorated,
    .RadButton_BEEnterprise.rbDisabled:hover .rbDecorated
    {
    	color#d1d1d1;
    }
     
    .RadButton_BEEnterprise.rbLinkButton
    {
    	border1px solid #666666;
    	background-color#2e2e2e;
    	color#ffffff;
    	text-decorationnone;
    }
     
    .RadButton_BEEnterprise.rbLinkButton:hover
    {
    	background-color#4f4f4f;
    	color#d97a4e;
    }
     
    .RadButton_BEEnterprise.rbLinkButtonChecked,
    .RadButton_BEEnterprise.rbLinkButtonChecked:hover
    {
    	background-color#73706f;
    	color#fa7537;
    }
     
    .RadButton_BEEnterprise.rbLinkButton.rbDisabled,
    .RadButton_BEEnterprise.rbLinkButton.rbDisabled:hover
    {
    	background-color#6b6b6b;
    	border1px solid #000000;
    	color#d1d1d1;
    }
     
    .RadButton_BEEnterprise.rbLinkButton:hover .rbSplitLeft,
    .RadButton_BEEnterprise.rbLinkButton:hover .rbSplitRight
    {
    	background-color#2e2e2e;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitRight
    {
    	border-left1px solid #cccccc;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitRight:hover
    {
    	background-position-126px -137px;
    	background-color#333333;
    	border-left1px solid #cccccc;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitRight:active,
    .RadButton_BEEnterprise.rbLinkButton .rbSplitRight:focus
    {
    	background-color#666666;
    	border-left1px solid #cccccc;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitLeft
    {
    	border-right1px solid #cccccc;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:hover
    {
    	background-color#333333;
    	border-right1px solid #cccccc;
    }
     
    .RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:active,
    .RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:focus
    {
    	background-color#666666;
    	border-right1px solid #cccccc;
    }
     
    /* IE6 Fix, should be important to override the joint selectors */
    *html .RadButton_BEEnterprise.rbLinkButton,
    *html .RadButton_BEEnterprise.rbLinkButton:hover
    {
    	border1px solid #666666 !important;
    }
     
     
     
     
     
     
     
     
     
     
     .RadButton_BEEnterprise .rbDecorated {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');
    
    	background-position0% 0pt;
    
    	font-familyArial;
    
    }
    
     .RadButton_BEEnterprise.rbSkinnedButton {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_unselect.png&t=1824754566');
    
    }
    
     .RadButton_BEEnterprise:hover .rbDecorated {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_hover.png&t=1824754566');
    
    	width76px;
    
    	background-repeatrepeat-x;
    
    }
    
     .RadButton_BEEnterprise:hover.rbSkinnedButton {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_hover.png&t=1824754566');
    
    }
    
     .RadButton_BEEnterprise:active .rbDecorated {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_hover.png&t=1824754566');
    
    	colorrgb(0, 0, 0);
    
    }
    
     .RadButton_BEEnterprise:active.rbSkinnedButton {
    
    	background-imageurl('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_hover.png&t=1824754566');
    
    }
    
     .RadButton_BEEnterprise:hover .rbDecorated {
    
    	width76px;
    
    }
    
    
    To reproduce the error just create the Button folder and put this files inside, also create the CSS file with the name above, then put the CSS file and the Button folder inside a folder named "BEEnterprise" and include it into a new WebForm project (even not inside the App_Themes folder, just in the root), then in the WebConfig type:
        <appSettings>
            <add key="Telerik.Skin" value="BEEnterprise"/>
            <add key="Telerik.EnableEmbeddedSkins" value="false"/>
        </appSettings>

    Also create an aspx page and register the css of the button control in that page, drag and drop a telerik button and the skin is not applied, I'm using chrome to view the application, with the network traffic monitor of chrome you will see that ImageHandler.ashx is not found.

    Best Regards.
    
    
  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 13 Feb 2012 Link to this post

    Hi,

    For some reason the VSB rendered a wrong background image path:

    background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');

    it should be:

    background-image: url(Button/btn-body-unselect.png);

    Attached is a small project, containing your files and fixed CSS.

    Note, that your RadButton custom skins does not use the image sprites based on the embedded skin as it is described at: RadButton Custom Skin Tutorial. It may cause some conflicts or / and wrong visual appearance.

    As for the Visual Style Builder, we will test it to find why it generates the wrong background-image paths.

    Greetings,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Omar
    Omar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 15 Feb 2012 Link to this post

    Thanks very much for your answer!

    That's was helpful!

    Best Regards.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017