Format Widget Title

[intapiuser]

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:

widget.on('ready', function(w,e){ 
prism.activeWidget.title='My New Title' 
})

[noe_datacubed]

I have tried this option but my widget titles did not change, can you provide screenshots of what you did if possible?

[Wojtek]

This script effect is only visible once you switch to dashboard  view mode rather than design mode.

Hope this helps.

Wojtek

[AlisterB]

That's great, do you know how to increase the height of the title panel to match the font size?

[Wojtek]

I 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 ?