[Solved] MVC Editor CSS Style of Custom Button

[Origin1 Technologies]

Having trouble getting a custom image to display on a custom button on the Editor control. 

Tried several things but no matter what the default gear looking icon is displayed. Seems like such a simple thing yet no matter how I set the CSS style it is ignored.

Couple items of disclosure.

My Content structure is as follows. "/Content/Themes/MyTheme

In the "My Theme" folder is the Site.css stylesheet.

Folders inside "MyTheme" are as follows:

Images/Backgrounds
Images/Buttons
Images/Layout

My button resides in the "Images/Buttosn" directory where the full path would be:

"/Content/Themes/MyTheme/Images/Buttons/myimage.png"

So for my style I've tried the following:
Per the example:
background-image: url('@Url.Content("~/Content/Themes/MyTheme/Images/Buttons/myimage.png") ');  

   Typical styling.
background-image: url('Images/Buttons/myimage.png');

Event tried putting the image in the darn root of the site but no joy! 

[Origin1 Technologies]

No response really? Is this that tough?

Seems like this should be a simple question. Surprised it doesn't work as the demo explains.

Hoping someone has a response on this. As simple as it is this is kind of a deal breaker if I can't wire up needed custom controls/tools.

[Atanas Korchev]

Hello Origin1,

 As our online example shows you only need to set the background image:

.t-editor .t-html {
background-image: url('/aspnet-mvc/Content/Editor/CustomTools/insert-html-icon.png');
}

We can't be sure why this does not work in your case as you have not provided any code to show your configuration. You can use a tool such as FireBug or IE developer toolbar to inspect the CSS applied to your custom tool and see if the right CSS has been loaded. You can also check if the background image is being requested at all.

Regards,

Atanas Korchev
the Telerik team

[Origin1 Technologies]

Here is the markup.

      @{ Html.Telerik().EditorFor(model => model.PostContent)
                                .Name("PostContent")
                                .FileBrowser(settings => settings
                                .Browse("Browse", "ImageBrowser")
                                    .Thumbnail("Thumbnail", "ImageBrowser")
                                    .Upload("Upload", "ImageBrowser")
                                    .DeleteFile("DeleteFile", "ImageBrowser")
                                    .DeleteDirectory("DeleteDirectory", "ImageBrowser")
                                    .CreateDirectory("CreateDirectory", "ImageBrowser"))
                                
                                 .HtmlAttributes( new { style = "height: 445px;" })  
                                 .Tools(t =>  
                                        t.Separator()
                                        .Custom(s => s.HtmlAttributes(new { @class = "t-html", onclick = "htmlSource(event)" })))
                                                                    
                                 .Render();     
                 
                 }

The structure of the CSS is quite detailed in the original post. yes I've already looked at the debugging sources using multiple developer tools. Still no joy. I'm missing something simple here. I'm thinking it has something to do with how it is resolving. My "Site.css" is nested inside /Content/Themes/MyTheme/Site.css. With an Images folder inside that "MyTheme" directory. Nested inside that are folders that include a "Buttons" folder which is where edit_html.png button resides. So the full path would be "/Content/Themes/MyTheme/Images/Buttons/edit_html.png" In the Site css. that is relative to this path:

.t-editor .t-html
{
background-image: url('Images/Buttons/edit_html.png');
}

[Origin1 Technologies]

Here is the CSS that is being displayed. Looks like .t-tool-icon is overriding it. The CSS style I'm passing is ignored.

 Screenshot of CSS from Chrome dev tools. 

[Origin1 Technologies]

interesting link and just a shot in the dark I decorated the CSS with the !important attribute.

    .t-editor .t-html
    {
      background-image: url('Images/Buttons/edit_html.png') !important;  
    }  

This seems to work however it seems odd that the default overrides this styling unless the !important attribute is decorated.

Maybe the default styling is hitting after my custom style and overriding or something.

Regardless I don't see how this would be the desired result.

UPDATE:
So I would consider this issue closed however if I run into trouble when adding additional buttons I'll revisit and post here.

For the record I've been reluctant to use Telerik tools in the past as I feel they can be bloated. However I must say this editor is pretty easy to wire up and for the immediate need it is working really well. The point is I've very happy with it.

As a side note:
Open Access however I moved away from and back to NHibernate. Would love to see further development on Open Access though. A little young yet but all and all my reintroduction to Telerik has been positive for those that happen to read this.