Using the new Blidget Pro, you can now create widgets with transparent headers and footers… meaning that the widget inherits the background of the webpage it is sitting upon. Here’s how to create widget headers and footers like the one below:

Use a Transparent Image

In order to have your widget’s header and/or footer have transparency, the graphical asset must have transparency. That means that you will need to use or construct images accordingly. If you are using Adobe Photoshop for instance, be sure to turn the background layer off (you will see white and gray checkers) and save the file in a PNG format. For instance:

Configure the Border, Header & Body

Now that you have your image, you can configure the border and header:

1. Border: leave the “Color” field empty; this will remove the border from your widget
2. Header Color: leave the “Color” field empty as this is the background color (which you want to be clear!)
3. Upload Header Image: insert your graphic’s image and, if it is sized precisely, set the positioning to “none”
4. Set the Header Height: input the height (in pixels) of your image
5. Set the Body Padding: make sure the the “top” field is at “0″. This places the widget body directly beneath the image

Using the Starbucks example and the above steps, you will end up with this:

Customize the Remainder of the Widget

Just as you normally would, you can now:
- select the widget’s layout
- add a custom footer or body background
- add tabs and set labels

As long as you see the white and gray checkers in your sample widget, you will know that image is transparent! In this example, I gave the widget body and footer a solid green fill to match the Starbucks logo’s green:

Some Other Samples

Learn more about the Blidget Pro and read other Tutorials

Popularity: 1% [?]