Overriding Widget Styles

Often it is necessary to override predefined CSS styles of the widget. Styles are defined globally and are part of the dashboard theme, but thanks to widget structure it is possible to override most of the parts of the widget CSS styles.

Returning to the image that shows general structure of the widget(see picture below) it will became clear that there are just few segments that are important:

Parts of our interest are Widget Title, Widget Body and Widget Footer. There are three appropriate CSS classes that allow accessing these parts. To access mentioned parts of the widget following CSS selectors will be used:

• For Widget Header - div.widget-header
• For Widget Title - div.widget-title
• For Widget Body - div.widget-content-wrapper
• For Widget Content - div.widget-content
• For Widget Footer - div.widget-footer

But, as far as there is no mechanism to uniquely identify widgets with permanent ID so that it could be usable in the widget's style-sheet few little tricks are required for achieving this goal.

For setting custom styles open already built “HelloWorld” widget's folder and add new CSS file with the name “helloworld.css” to it.

Now we need to define CSS class that will distinguish HelloWorld widget from other widgets, “helloworld” will be perfecto choice for this example. Now open newly created CSS file and copy and paste following CSS code:

div.helloworld div.widget-header {
    background: #333;
}
 
div.helloworld div.widget-title {
    color: #fff;
}
 
div.helloworld div.widget-content-wrapper {
    margin: 0;
    background-color: #999;
}
 
div.helloworld div.widget-content p {
    padding: 8px;
    text-align: center;
    color: #333;
    font-size: 2em;
}
 
div.helloworld div.widget-footer {
    background-color: #666;
    padding: 8px;
}
 
div.helloworld div.widget-footer p {
    color: #fff;
    font-weight: bold;
    text-align: center;
}

Now open “helloworld.js” file and replace “this.onload” method with following JavaScript code:

this.onload = function() {
 
    //add "helloworld" class name to the widget instance        
    $(this).addClass('helloworld');
 
    //set initial content    	
    this.setContent('<p>Hello World!</p>');
 
    //add some HTML content to the widget's footer
    this.addToFooter('<p>Testing Footer Style</p>');
 
};

Thats it, after refreshing widget page you will see result shown on the picture below: