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
}) -
One thing you can consider is tweaking the card view scripts available here
We created a free plugin out of these scripts so you can apply it to an entire dashboard and all widgets, for this see our card view plugin
Feel free to reach out for ay support or assistance
qbeeq.pl
Sisense partner of the year 2019
Please sign in to leave a comment.
Comments
10 comments