+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Where do I define classes for Widget Icons?

Where do I define classes for Widget Icons?

8 posts, 1 answered
  1. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    17 Nov 2011
    Link to this post
    I want to set a custom icon onto my custom user control widget.

    I can change the widget icon by changing its 'CssClass':
    Admin > Settings > Toolboxes > PageControls > Sections > (ToolboxSection) > Tools > (Widget Name) > CssClass

    I can change the default icon to any of the built in widget icons by using an existing CssClass name from a built in widget.

    Is there a way to define my own CssClass and include my own widget icon image? I'm guessing that the image the 'background image' set in the CSS. So in order to include my own image, I would just need to know where to define new CSS classes. Any idea where the admin CSS is located?

    I think this would be a cool tip to include in Sitefinity Steve's How To Repository! :-)

    Thanks,
    Dan
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    17 Nov 2011
    Link to this post
    Whoopsy :)  Yeah that would be a good one

    Good news is you don't need to edit\define a custom admin CSS, just add the new class name to the loaded theme!

    So like you did: http://www.screencast.com/t/SGYeSosh42
    ...add the class to the widget item

    Then it should just be as simple as defining a class like
    .customIconTest{
       background: url("image.png") no-repeat 0 0 !important;
    }

    .
    **EDIT** FYI when I make my own I use a sprite with all the new custom icons...better user experience :)
    Answered
  3. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    17 Nov 2011
    Link to this post
    So I add the CSS rule to the CSS file for my front end site?

    ...not a special Admin back end css file?
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    17 Nov 2011
    Link to this post
    FUNNY YOU MENTION THAT! :)

    Yeah, your public css\theme is loading in the backend right...so any class you define in that can change (or bork) the editor :)

    It's not loading in an iframe, the editor bits are just like a jquery splitter around the page.
  5. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    17 Nov 2011
    Link to this post
    LOL -- OK, I was just asking because well... I had the same exact concern as you. ;-)

    When I take off my 'best practices - this could blow up on me' hat, and put on my practical 'Just git'er done!' cap, it makes sense I suppose.

    Thanks a lot. My coworkers will really appreciate some custom icons on these widgets I'm putting together. And thanks for adding it to your list. I've bookmarked that page.
    Dan
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    17 Nov 2011
    Link to this post
    No, thank you :)

    Gave me a chance to go update that page quick...sorted the items and added a "new" class based on the publication date to the template!....perhaps that should also be in that list...hmmm
  7. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    17 Nov 2011
    Link to this post
    For the sake of completeness, here is some more detailed info:
    (because I don't want to have to remember this again in 2 months. ;-)

    1. Create an Icon Image
    If you want to make your custom icons look similar to the built in Sitefinity widget icons, it appears that you will need to begin with a template image (see attached example) that includes the box and shadow image, and paste your image into the box. The shadow box has 3 pixels of transparent space on the top and left sides.

    Likewise you can avoid the shadow box look as well, your choice. If possible output to an 8-bit PNG to save space while retaining icon clarity.


    2. Create a Class Name in Admin Toolbox Settings
    When you create a custom icon class, make sure it isn't likely to conflict with something else. I recommend using your OWN prefix, don't use the 'sf' prefix that the out of the box icons use.

    Examples: .widFeedReaderIcn or .widgetFeedReaderIcon or .customFeedReaderIcon

    Enter this new class into:
    Administration > Settings > Advanced > Toolboxes > Toolboxes > PageControls > Sections > (the section name) > tools > (the widget name) > CssClass


    3. Add a CSS rule to your front end theme style sheet
    Create that CSS class in your style sheet used for the front end theme. As discussed above, Sitefinity will ignore the rule on the front end site assuming that you don't use those classes in your publicly facing pages, and will apply it to the back end administrative interface. As needed. This CSS rule will look something like this:

    .widFeedReaderIcn {
       background: url("/yourfilepath/custom-icon.png") no-repeat 0px 0px !important;
    }

    CSS note: If you inspect the widget button DOM, you will see that there are MANY applicable CSS rules marked with !important;. Be as it may, you'll need to remember to use !important here too, or else your rule will be ignored for more important applicable rules.

    Security note: anyone who can see your front end website can ALSO see this rule. Therefore, be discrete in what kinds of comments and names you use here. This is one area where details about your backend administration is visible to the front end population. Not likely to be a problem, but something to keep in mind.



    4. Fun With Sprites
    If you have multiple custom icons, it is best to use CSS sprites to help load the button images faster. To accomplish that, you will need to start with a template such as the attached sprite example and add your own icon graphics.

    Then you will create separate button class names using the steps above until you get to the CSS rules. At that point, you will need to calculate the pixels to the left and top edges of each button and adjust the background X,Y coordinates accordingly. Since this is a background image, much like the quirky new Apple mouse scroll, the numbers will be opposite of what is intuitive. ;-)

    Examples:
    /* This button is already the top and left most image, so we use 0,0 */
    .widTopButtonIcn {
       background: url("/yourfilepath/custom-sprites.png") no-repeat 0px 0px !important;
    }
     
    /* move the image up 37 pixels to center on the middle button, will vary depending on your source image */
    .widMiddleButtonIcn {
       background: url("/yourfilepath/custom-sprites.png") no-repeat 0px -37px !important;
    }
     
    /* move the background image up 74 pixels for the last button. Again, your results depend on your source image */
    .widBottomButtonIcn {
       background: url("/yourfilepath/custom-sprites.png") no-repeat 0px -74px !important;
    }
     
    /* if you had a second vertical row of sprites, you would need to shift the X coordinate accordingly. it would be -53px using my example image, to skip the 1st column. Your results vary depending on your input image. */

    5. Refresh the page to view the results.

    Have fun! Please comment if you notice any bugs or have additional useful tips related to these custom buttons.
  8. Jonathan
    Jonathan avatar
    26 posts
    Registered:
    23 Jul 2012
    11 Dec 2012
    Link to this post
    Sorry to resurrect this post, but just wanted to pass on a big thanks to you, Dan. Just needed to do just this, and your post got me there.

    Cheers

    Jonathan
8 posts, 1 answered