This is a migrated thread and some comments may be shown as answers.

Custom toolbar button images not showing up when using external css file

1 Answer 89 Views

Editor

This is a migrated thread and some comments may be shown as answers.

William Baker asked on 20 May 2010, 07:34 PM

For some reason, when I place the css style for a custom toolbar button image in an external css and reference that external css file either through an @Import or <link>, the button images don't show up.

    
            <head> 
        
               <style> 
        
                  @import url(css/toolbar_images.css);  
        
               </style> 
        
               <link href="css/toolbar_images.css" type="text/css" rel="StyleSheet"></link>  
        
            </head>

But if I put the actual css styles inside the aspx document in a <style> element, the images show up. Is this a known issue?

    
            <head> 
        
                <style> 
        
                    .reTool .AlignmentOptions  
        
                    {  
        
                        background-image: url(img/justify_left.gif);  
        
                        background-position: center !important;  
        
                        background-repeat: no-repeat !important;  
        
                    }  
        
                    .reTool .InsertTimeOptions  
        
                    {  
        
                        background-image: url(img/insert_time.gif);  
        
                        background-position: center !important;  
        
                        background-repeat: no-repeat !important;  
        
                    }  
        
                </style> 
        
            </head>

1 Answer, 1 is accepted

answered on 21 May 2010, 12:45 PM

q12010sp2.zip

Hi William Baker,

To load the icons from a css file you should correct their paths, e.g.

.reTool .AlignmentOptions
{
    background-image: url(../img/justify_left.gif);
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.reTool .InsertTimeOptions
{
    background-image: url(../img/insert_time.gif);
    background-position: center !important;
    background-repeat: no-repeat !important;
}

For your convenience I have attached my test project.

All the best,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.