Changing the Color of the Bars at the Top

In this customization scenario, you change the color of the top horizontal bars and apply the customization to all the pages of MicroStrategy Web. This customization does not use the color themes provided by MicroStrategy; instead it modifies only the relevant CSS file. The two bars are the header and path page sections so this customization modifies the selectors responsible for assigning color values to these page sections.

Before customization:

After customization:

This customization can be accomplished using either of the following methods:

• Deploying the plug-in provided with MicroStrategy SDK 

• Using the Web Customization Editor to create a plug-in

Deploying the plug-in provided with MicroStrategy SDK 

MicroStrategy SDK provides a plug-in (ZIP file) that can simply be extracted to the plugins folder to view the customization in MicroStrategy Web. The following steps guide you in locating the plug-in and deploying it.

1. Access the plug-in: JSP version or ASP .NET version. 

2. Extract the plug-in to the plugins subfolder inside the MicroStrategy Web installation folder.   

3. Launch MicroStrategy Web to view the customization.

Using the Web Customization Editor to create a plug-in

MicroStrategy SDK provides a Web Customization Editor that can be used to create a customization plug-in. The following steps guide you in creating the plug-in and deploying it. 

1. Launch the Web Customization Editor. 

2. Click on CSS inside the CSS Settings view to expand the hierarchical tree. The expanded list comprises the different CSS files used in MicroStrategy Web. 

3. Navigate to MicroStrategy Web Styles->style->mstr. 

4. Click on mstr.css to expand the selectors defined within this CSS file. 

5. Right-click on .mstrHeader and select New Property. 

   • Enter background and #996633 !important in the Property and Value text fields respectively. Note the use of !important to override other definitions for the .mstrHeader property available in the MicroStrategy Web color themes. 

   • Make sure the Apply to All Pages radio button is selected, and click OK. The new background property gets added under the .mstrHeader selector inside a newly created CSS file. global.css, under CSS->Customized Web Styles->style. 

6. Right-click global.css (under CSS->Customized Web Styles->style) and select New Selector. 

   • Enter .mstrPath in the text field for Selector. 

   • Make sure the Apply to All Pages radio button is selected, and click OK. 

7. Right-click .mstrPath and select New Property. :

   • Enter background and #996633 !important in the Property and Value text fields respectively. Note the use of !important to override other definitions for the .mstrPath property available in the MicroStrategy Web color themes. 

   • Make sure the Apply to All Pages radio button is selected, and click OK. 

8. Launch MicroStrategy Web and view the customization.

See Also

• CSS Files