MicroStrategy ONE

Customizing CSS Files

Several Web browsers offer developer tools to inspect, edit and monitor CSS properties for various elements on a Web page. You should be familiar with using such tools before attempting any CSS-related customizations in MicroStrategy Web.

Also, MicroStrategy Web uses Sprite for rendering several images on its Web pages. Examples of such images include report toolbar icons and icons used on Folder Browsing pages. If you are replacing these images, it is advisable to use corresponding Sprite images adhering to relative position and sizes of MicroStrategy images.

Using the Web Customization Editor

CSS-related changes can be made from the Application Settings as well as the CSS Settings views of the Web Customization Editor. Whether you use the Application Settings view or the CSS Settings view is only a matter of preference since the end result is that the same CSS files get customized irrespective of which View is used. Using the Web Customization Editor to make CSS customizations is the most effective way and minimizes the amount of work required to maintain and upgrade a customized MicroStrategy Web application over time.

Typically, if you know the MicroStrategy Web page to customize, you can directly use the Application Settings view since all pages are displayed individually in this View under the Pages setting. Every page contains a CSS node that includes a custom CSS file (syntax: pageNamePage.css) and the default CSS files used by the page.

The Web Customization Editor provides a Search MicroStrategy Objects functionality that can be used to find CSS files, rules and properties used in MicroStrategy Web.

A typical workflow for making CSS-related customization changes is as follows.

  1. Identify whether the CSS change is specific to a single MicroStrategy Web page or is applicable globally to all MicroStrategy Web pages.  

  2. Use a developer tool to identify the CSS elements such as name of the CSS file, selector and property that are responsible for the aspect of the GUI that you want to customize  

  3. If the CSS change is specific to one or few  MicroStrategy Web pages, go directly to the CSS node for that page in the Application Settings view. You can make your CSS changes to the custom CSS file under PageName->CSS->Customizations or you can search for the default CSS file under PageName->CSS->MicroStrategy Web and make CSS changes to it. In the latter case, the end result is that even though you think you are modifying the actual CSS file, the Web Customization Editor is making the CSS changes to the custom CSS file (which is the same as the former option).  

  4. If the CSS change is applicable globally to all MicroStrategy Web pages, you can directly make CSS change to global.css under CSS Settings (view)->CSS->Customized Web Styles->style or you can search for the actual CSS file under CSS Settings (view)->CSS->MicroStrategy Web Styles and make CSS changes to it by selecting the Apply to All Pages option. In the latter case, the end result is that even though you think you are modifying the actual CSS file, the Web Customization Editor is making the CSS changes to the custom CSS file (which is the same as the former option).  

  5. View your customization in MicroStrategy Web.

Specifying the location to custom CSS files

All custom CSS files are saved in the plugins folder inside the appropriate customization plug-in. There are several instances while using the Web Customization Editor that you need to specify the path to the  custom CSS files. You can use either of the syntax given below for specifying the location of these custom files. Replace pluginName with then name of your customization plug-in.

../plugins/pluginName/style/reportPage.css

See also