Format Widget Title
Introduction
This post will give the JavaScript necessary to format the Widget Title.
Purpose/Benefits
When formatting your dashboard, manipulating the Widget Title to match your other formatting will give the dashboard a more personalized feel.
Example
Steps
Use the JavaScript below to manipulate the title.
/********************************************************/
/********Change Widget Title Font and Size**********/
/********************************************************/
widget.on('ready', function(w,e){
var color = '#ffcb05';
var fontSize = '20px'
var fontWeight = 'bold'
var $widgetTitle = $('widget-title', element.parent());
var newCSS = {
'color':color,
'font-size':fontSize,
'font-weight':fontWeight
}
$widgetTitle.css(newCSS);
})To change a widget's title altogether use:
4 comments
Wojtek
·3 years agoI actually have the same problem, maybe someone here will be able to help. So just to clarify, once font is past size 22px it is not visible in full. You can still increase font but its bottom gets cut off. see below I highlighted where it occurs.![]()
Anyone has any ideas how to fix it ?
AlisterB
·3 years agoThat's great, do you know how to increase the height of the title panel to match the font size?
Wojtek
·3 years agoThis script effect is only visible once you switch to dashboard view mode rather than design mode.
Hope this helps.
Wojtek
noe_datacubed
·3 years agoI have tried this option but my widget titles did not change, can you provide screenshots of what you did if possible?