Changing a Widget's Background Color
Using Java Script:
- Edit the dashboard script
- We will use the 'dashboard.style.setPalette(param1, param2)' function in order to set the colors of the dashboard.
First parameter will be the colors in an array, the second parameter is a boolean that indicates if the current widgets should be affected by the change or not, if set to true current widgets will be affected. - The colors can be in hexadecimal representation..
code:
widget.on('ready', function(se, ev){
$(element).css('background-color','#628687'); //changes the widget's background
$('widget-header' ,element).css('background-color','#628687'); //changes the widget's title background
})
For Pivots the code would be:
widget.on('ready', function(se, ev){
setTimeout(function(){
$('div.p-container td', element).css('background-color','yellow')
$('div.p-foot', element).css('background-color','yellow')
$('div.p-mid', element).css('background-color','yellow')
}, 500)
})
Example:
Before:
After:
4. Refresh the webpage.
-
Hi Guys
I have just upgraded to version 6.6.1
The background directly behind the text in a widget does not change colour now. Although closer to the edge of the widget it does change colour. Please see below:
Neither of the codes below seem to work:
widget.on('ready', function(se, ev){
$(element).css('background-color','#f5f5f5'); //changes the widget's background
$('widget-header' ,element).css('background-color','#f5f5f5'); //changes the widget's title background
})
/*
widget.on('ready', function(se, ev){
if (window.navigator.userAgent.indexOf('phantom') == -1)
{
$(element).css('background-color','#f5f5f5'); //changes the widget's background
$('table',element).css('background-color','#f5f5f5');
$('widget-header' ,element.parent()).css('background-color','#f5f5f5'); //changes the widget's title background
}
})
*/ -
Hi Simon,
Since version 6.6.1, indicator widgets are generated using SVG instead of canvas and can be styled using the Indicator Theme plugin. In order to style indicators:
1. Download Indicator Theme from Sisense Plugins list and unzip the file into your plugins folder.
The zip file contains a plugin called "indicatorTheme" and a resource folder for images that can be in use in indicators.2. For each indicator you wish to style, add the below widget script:
widget.on('domready', function (w) {
var instance = w.indicatorInstance;
var options = {
backgroundColor: 'rgb(163, 73, 164)',
color: 'white'
};var canvas = instance.getCanvas();
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
var indicatorTheme = new prism.IndicatorTheme('booking.png', options);instance.setOptions(indicatorTheme.options);
instance.setRendererFunc(instance.type, indicatorTheme.render.bind(indicatorTheme));instance.draw();
}); -
Hi Glenys,
After discussing your request with our Professional Services team, here is how we can help:
1) To make this work, please leave the place where the image is set to an empty string (please see the example below):
// The first parameter is the url of the image to add to the indicator. The image should be placed under: /plugins/Resources/logo
// In case its not relevant set as an empty string
var indicatorTheme = new prism.IndicatorTheme('booking.png', options);2) Great suggestion on customizing the font size! Unfortunately, further customization of this plugin require our Professional Services team attention.
Therefore, I recommend reaching out to your Customer Success Manager, Korey Martin, and he'll be happy to assist you with your request.
Hope it helps.
Thanks,
Oxana
-
Hi, I tried to change the some charts and filter plugins background but there is gap backgrounds between textbox and filter plugin like below.
"Select KPI Type" is Filter Plugin
"Company Overview & Benchmark" is a Textbox but as you can see there is gap bottom of the Textbox background color.
We can't change/play the TextBox's script with Edit Script so that I need to play with the Filter plugin's background color which will be same alignment with the Textbox background color.
How can I do that, can you please help about this JS script
Filter plugin script :
widget.on('ready', function(se, ev){
$(element).css('background-color','#1972DB'); //changes the widget's background
})
Please sign in to leave a comment.
Comments
8 comments