Customize Widget Header in Blox

Follow

Tripti Jaiswal

October 23, 2019 11:02

Want to customize the widget header (change font style,font weight...etc) in Blox widget.

We have the Style widget title plugin,but it's not showing up in Blox.

Also, tried below script to customize the Widget Header.But Not working with Blox.

/********************************************************/
/********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);
})

0

• 

  Tripti Jaiswal October 23, 2019 12:45

  Use the below script at widget level.

  Also,customization will get displayed on dashboard not inside widget edit.

  widget.on('ready', function(w,e){
  var color = '#000000';
  var fontSize = '16px';
  var fontWeight = 'bold';
  var $widgetTitle = $('.widget-title__holder', element.parent());
  var newCSS = {
  'color':color,
  'font-size':fontSize,
  'font-weight':fontWeight
  }
  $widgetTitle.css(newCSS);
  })

  0

  Comment actions Permalink
• 

  Delsaran Bigglesworth October 23, 2019 18:00

  I found this the other day.

  const widgetElement = prism.$ngscope.appstate === 'dashboard' ? 
  $('widget[widgetid="YOURWIDGETIDHERE"]') : undefined;

  and the when you do your Jquery, just pass in widgetElement. Like this

  $('.widget-title__holder', widgetElement).css({
  
  'color':color, 'font-size':fontSize, 'font-weight':fontWeight
  
  });

  This should make it so that just the title of the one widget is styled.

  0

  Comment actions Permalink

Please sign in to leave a comment.