DP Widgets Plus

Screenshots

This is not an individual widget, in addition to adding numerous extremely useful options for each widget: the icon/banner/image and link to it The link to the title Sub title Custom CSS class name More custom content applied to the end of widget You can also specify the postion and float attribute of the icon to output a variety of widgets. Usage DP Widget Plus generates friendly markup for custom styling in your own stylesheet. Before using DP Widget Plus, the HTML markup of each widget usually like this: <div id="widget-xxx" class="widget"> <h3 class="widget-title">Widget Title</h3> <!-- Different output for each widget --> </div> After using DP Widget Plus(We assume that all options of DP Widget Plus has been used), the HTML markup of a widget will like this: <div id="widget-xxx" class="widget"> <h3 class="widget-title"> <a href="#" class="widget-icon"><img src="" /></a> <span class="widget-main-title">Widget Title</span> <span class="widget-sub-title">Widget sub title</span> </h3> <!-- Different output for each widget --> <div class="widget-footer"></div> </div> So, you can style the output with these CSS selectors: <style type="text/css"> .widget-icon{} .widget-icon img{} .widget-main-title{} .widget-sub-title{} .widget-footer{} </style>