Where do I define classes for Widget Icons?

Posted by Community Admin on 03-Aug-2018 18:16

Where do I define classes for Widget Icons?

All Replies

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 17-Nov-2011 00:00

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 :)

Posted by Community Admin on 17-Nov-2011 00:00

So I add the CSS rule to the CSS file for my front end site?

...not a special Admin back end css file?

Posted by Community Admin on 17-Nov-2011 00:00

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.

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 17-Nov-2011 00:00

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.

Posted by Community Admin on 11-Dec-2012 00:00

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

This thread is closed