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.
Unfortunately, activation email could not send to your email. Please try again.

CSS styling

Thread ID:

Created:

Updated:

Platform:

Replies:

132119 Aug 15,2017 09:04 AM Aug 16,2017 07:31 AM Dashboard Platform 1
loading
Tags: Dashboard Viewer
Edmund
Asked On August 15, 2017 09:04 AM

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

Bharath Natarajan [Syncfusion]
Replied On August 16, 2017 07:31 AM

  
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;