Follow

[AppInsights] Features - Advanced Styling: Using custom CSS to style your dashboards

Design and styling play an important role in promoting a metrics driven culture.  At AppInsights, we’ve worked hard to provide a clean and sharp design structure so that your KPIs remain legible and visually appealing, even after years of use.

However, we understand that some customers have unique design preferences that they’d like to incorporate into their dashboard environments.  That’s why we offer our Advanced Styling feature, which will allow experienced designers to drive consistency between their AppInsights dashboards and custom brand assets (logos, fonts, colors, etc).

Below is a primer on how this works as well as some quick examples to get you started:

Please note: we recommend that our Advanced Styling feature only be used by AppInsights customers with significant experience and/or background with the CSS stylesheet language.  While it is possible to target and modify almost every element of your AppInsights dashboards, it is also possible to trigger an application crash if certain classes and properties are misused.  Our team supports only the changes / script snippets provided below.

If you are unfamiliar with CSS, but would still like to modify the stylistic elements of your dashboard, we recommend your use of our Basic Styling feature.


To get started, navigate to the large gear icon at the top right of your AppInsights dashboard environment and select the “Advanced Styling” menu.

advance_styling_custom_css_1.png

This will open a new window with a large text area that acts as an in-app CSS stylesheet.  If you are an experienced CSS designer, once you’ve identified the appropriate classes / properties that you would like to modify, you can follow standard syntax and structure to begin making changes.

advance_styling_custom_css_2.png

For the less experienced, we’ve provided some basic CSS snippets below that should satisfy most of the stylistic changes you may be interested in making.  Feel free to cut and paste these samples directly into your stylesheet after making any specific property changes (i.e. font or color preferences).  Once you’ve made your desired changes, be sure to hit the “Apply CSS” button, otherwise your CSS scripts will not be applied / saved.

Please note that using the snippets as they are presented below will target ALL widgets across ALL dashboards.  If you’d like to target individual widgets on your dashboards for more targeted styling changes, you’ll need to make note of its unique CSS identifier.  This can be found by navigating to the gear icon at top right of your widget and selecting the “Edit Widget Settings” menu.  From there, navigate to the “Widget Settings” tab and navigate to the bottom where you will find the CSS ID (“w_XXXXXX”).

advance_styling_custom_css_3_original.png

advance_styling_custom_css_4.png

To target a specific widget, simply add the relevant CSS ID prior to the class you intend to change.  For example, the first snippet below would only change the Widget Title for widget “w_712650” to 2em relative size, the second snippet would change all Widget Titles to the 2em size.

#w_712650 .wgt-title-container {
    font-size: 2em !important;
}

.wgt-title-container {
    font-size: 2em !important;
}


One final note before providing these code snippets: you must include the “!important” string after modifying any CSS property.  This ensures that the existing styling will be over-written by your custom class and property changes.

Change dashboard background color

.lt-dashboard {
    background-color: #707070 !important;
}


Before

advance_styling_custom_css_5_original.png

After

advance_styling_custom_css_6_original.png

Change dashboard text style

.lt-dashboard {
    font-family: Tahoma, sans-serif !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
}


Before

advance_styling_custom_css_7_original.png

After

advance_styling_custom_css_8_original.png

Change widget title text style

.wgt-title-container {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    color: #6eecff !important;
    font-size: 1.5em !important;
}


Before

advance_styling_custom_css_9_original.png

After

advance_styling_custom_css_10_original.png

Change widget background color
When using the .wgt-container tag to target an individual widget, please do not include a space between your widget identifier and the element tag.  For example:  #w_712650.wgt-container

.wgt-container {
    background-color: #236e78 !important;
}


Before

advance_styling_custom_css_11_original.png

After

advance_styling_custom_css_12_original.png

Change widget radius (corners rounded vs. square)
When using the .wgt-container tag to target an individual widget, please do not include a space between your widget identifier and the element tag.  For example:  #w_712650.wgt-container

.wgt-container {
    border-radius: 10em !important;
}


Before

advance_styling_custom_css_13_original.png

After

advance_styling_custom_css_14_original.png

Add widget border and color
When using the .wgt-container tag to target an individual widget, please do not include a space between your widget identifier and the element tag.  For example:  #w_712650.wgt-container

.wgt-container {
    border: 2px solid #ffffff !important;
}


Before

advance_styling_custom_css_13_original.png

After

advance_styling_custom_css_16_original.png

All snippets included

advance_styling_custom_css_17_original.png

/*CHANGE DASHBOARD BACKGROUND COLOR*/
.lt-dashboard {
    background-color: #707070 !important;
}

/*CHANGE DASHBOARD TEXT STYLE*/
.lt-dashboard {
    font-family: Tahoma, sans-serif !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
}

/*CHANGE WIDGET TITLE TEXT STYLE*/
.wgt-title-container {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    color: #6eecff !important;
    font-size: 1.5em !important;
}

/*CHANGE WIDGET BACKGROUND COLOR*/

.wgt-container {
    background-color: #236e78 !important;
}

/*CHANGE WIDGET RADIUS*/

.wgt-container {
    border-radius: 10em !important;
}

/*ADD WIDGET BORDER AND COLOR*/ 

.wgt-container {
    border: 2px solid #ffffff !important;
}


A reminder: once you’ve entered any of the above snippets into your Advanced Styling window, be sure to hit the blue “Apply CSS” button, otherwise your code will not be saved and no changes will be made.

advance_styling_custom_css_18_original.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request