CSS Widget Title Background Image

Follow the steps below to add a custom icon to the title of a widget.

Requirements

Dimensions of your icon (height & width)

How It Works

The technique adds padding to the left of the widget title and inserts a background image. You get the advantage of having a custom image for each widget.

Instructions

1. Copy (ctrl-c) and paste (ctrl-v) the CSS code provided below into the bottom of your commmunity's Advanced Theme Editor (located in the Control Panel under THEME).
2. Upload your icon image to your community image gallery
3. Get the "Image Path" by copying the image download link (i.e. Firefox - right click > Copy Link Location)
4. Paste the Image Path into the CSS code so that it replaces the text "IMAGE_PATH_HERE" - Example Image Path: http://www.igloosoftware.com/download/gallery/icons/calendarpng?attachment=1
5. Click "Publish" to save your changes

Copy The Code Below: 16px Icon

Copy The Code Below: 32px Icon

Copy The Code Below: 64px Icon

Applying Your New Icon To A Widget

1. Edit page
2. Edit the widget you want the icon to be applied to
3. In the pop-up window select the Appearance tab

   

4. Add the class name to the class field i.e. widget_title_icon
5. Update and publish your page

How Does It Look?