Modifying icons on the default Home page

This scenario shows you how to customize the icon that let users access the History List from the default Home page. This customization is performed by modifying the CSS file that renders the icons on the default Home page. You can extrapolate from the steps in this scenario to customize the icons used to access other locations such as Shared Reports, My Reports, and so on.

Before customization:

After customization:

This customization can be accomplished in either of the following ways:

• Using the plug-in provided for you:

  This method lets you view the customization right away, without having to do anything except deploying the plug-in provided with the MicroStrategy SDK.  

• Creating the plug-in yourself using the Web Customization Editor:

  This method gives you hands-on experience in performing this customization, as it steps you through the process of creating and deploying the plug-in.

Using the plug-in provided for you

The MicroStrategy SDK provides an out-of-the-box plug-in (ZIP file) that changes the icon used for the History List on the default Home page. Follow the simple steps below to deploy the plug-in and view the results in MicroStrategy Web. 

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

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

3. Restart your web server.  

4. Launch MicroStrategy Web, select a project, and view the customization.

Creating the plug-in yourself using the Web Customization Editor

If you want to understand how the History List icon is customized on the default Home page, follow the steps below to create the plug-in and deploy it. 

1. Place the image file for the new icon you want to use in a location where MicroStrategy Web can access it.  

2. Launch the Web Customization Editor.  

3. Create a new plug-in and give it a meaningful name.  

1. On the Application Settings tab, click the Select Plug-in icon.:

   
   

2. On the Select Plug-in dialog box, click New and enter a meaningful name for the plug-in, such as ModifyingIconsDesktopPage.  

3. Click OK.  

4. On the Application Settings tab, expand MicroStrategy Web Configuration to view the list of settings that can be modified to perform customizations.  

• Expand Pages to view the list of pages used in MicroStrategy Web.  

1. Expand desktop (Desktop), then expand CSS, then expand MicroStrategy Web, then expand mstr.  

2. Expand pageDesktop.css to view the rules defined in the CSS file for the default Home page.  

   • Expand .mstr-dskt-lnk.inbox.mstr-dskt-icn to view the properties defined for this rule. You modify an existing property that sets the background position for the History List icon on the default Home page.

     1. Double-click background-position to open the CSS Property dialog box.  

     2. Change the Value to 0px 0px.  

     3. For Apply to, select This Page.  

     4. Click OK.  

   • Right-click .mstr-dskt-lnk.inbox.mstr-dskt-icn and choose New Property. You add a new property that sets the new image used for the History List icon on the default Home page.

     1. Enter background-image as the Property.  

     2. Click Utils at the bottom of the dialog box.  

     3. For Apply to, select This Page.  

     4. Click Image and navigate to the new image that replaces the out-of-the-box History List icon.    

     5. Click OK. The new background-image property is added under the .mstr-dskt-lnk.inbox.mstr-dskt-icn rule.

5. A new plug-in folder, with the name you gave it, now exists in the plugins folder of your MicroStrategy Web installation directory. Restart your web server to apply the plug-in.  

6. Launch MicroStrategy Web, select a project, and view the customization.

See Also

• Fundamentals of Customization: Data Presentation, Styles and Layout Definitions