We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

CSS styling

I am having a number of issues with Dashboard designer

  • Can you please send me a Asp.Net MVC 5 example with a Dashboard that you can click on a specific widget that will navigate to another dashboard
  • Is it possible to change the look and feel of main container page of dashboard via css, change text fonts and sizes, in the designer I could not find any capability to change text size etc.

 I am supplying a Dashboard screen image with a number of points highlighted in red

  • 1 SALES can the font and font size be changed via CSS
  • 2 CHANNELS can the font and font size be changed via CSS
  • 3 Top Bar can size be changed via CSS
  • 4 People since inception can the font and font size be changed via CSS

General what can be changed on Dashboard as far as look and feel



Attachment: wiCover2_95b6fb6f.zip

1 Reply

BN Bharath Natarajan Syncfusion Team August 16, 2017 11:31 AM UTC

  
Hi Edmund, 

Please find the following response for your queries, 

Can you please send me a Asp.Net MVC 5 example with a Dashboard that you can click on a specific widget that will navigate to another dashboard 

Here we have linked a dashboard with Grid widget of a primary dashboard. 
Is it possible to change the look and feel of main container page of dashboard via css, change text fonts and sizes, in the designer I could not find any capability to change text size etc. 

Yes, you can change the text font settings and sizes via CSS by setting values to  the respective property with respect to the class referred on your html file . Please find the following code snippet regarding that, 
If you need to change the size of label text/change the font family: 
.e-dashboardviewer .e-dbrd-label-control[id=dashboard_Widget_Label_2] span{        
                                            //  Here “dashboard” refers the id of the whole container div 
                                           font-size : 14px !important; 
                                           font-family : Times New Roman !important; 
                                           } 
 
If you need to increase the size of the banner: 
.e-dashboardviewer.e-js .e-dbrd-banner{ 
                                           height : 60px;                                 // will increase the size of the top bar 
                                           line-height : 40px !important;    // will align the icons with respect to size changes 
                                           } 
 
If you need to change the font family of the widget title/change the size: 
.e-dashboardviewer .e-dbrd-control-container[data-widget-id=Gauge_2] .e-control-title{ 
                                           font-size : 30px; 
                                           font-family : Times New Roman;  
                                           } 
General what can be changed on Dashboard as far as look and feel 
You can customize the dashboard and the its style using the API customThemeSettings, please find the following help documentation which detailed about that, 

Please let us know if you need further assistance on this. 

Regards, 
Bharath N 


Loader.
Live Chat Icon For mobile
Up arrow icon