MicroStrategy ONE
Modifying the Font properties on the Folder Browsing Pages
The Folder contents can be viewed in a Icon view. Depending on your privileges, the following details are provided for folders, reports and so on: Name, Owner, Modified, Description, Subscriptions, Delete and so on. In this example, change the color of the font that displays name for folders, reports and so on from red to dark orange. This scenario also specifies different colors to be used when the hyperlink is visited, or is active or when a cursor is hovered over it. This task involves modifying a CSS file that renders the formatting properties for the table.
Before customization:
After customization:
This customization can be accomplished using either of the following methods:
Deploying the plug-in provided with MicroStrategy SDK
MicroStrategy SDK provides a plug-in (ZIP file) that can simply be extracted to thepluginsfolder to view the customization in MicroStrategy Web. The following steps guide you in locating the plug-in and deploying it.
-
Access the plug-in: JSP version or ASP .NET version.
-
Extract the plug-in to the plugins subfolder inside the MicroStrategy Web installation folder.
-
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.
-
Click on MicroStrategy Web Configuration inside the Application Settings view to expand the hierarchical tree. The expanded list comprises the different settings that can be modified to perform customizations.
-
Click on Pages to expand the list of pages used in MicroStrategy Web.
-
Click on shared (Shared Reports) to expand the child nodes under it.
-
Double-click on CSS to expand the child nodes under it.
-
Click on MicroStrategy Web to expand the child nodes under it.
-
Click on mstr to expand the list of CSS files used on the Welcome page.
-
Click on mstrTheme.css to expand the rules defined within this CSS file.
-
Click on .Red .mstrLargeIconViewItemName to expand the properties defined for this rule.
-
Double-click on color to launch the Update CSS Property dialog.
-
The value for the color property contains the hexadecimal color code. Update the value to #CC6600.
-
Click OK. The updated color property gets added under the .Red .mstrLargeIconViewItemName rule inside a newly created CSS file "sharedPage.css" under shared (Shared Reports)->CSS->Customizations.
-
Click on .Red .mstrLargeIconViewItemName A:hover (under shared (Shared Reports)->CSS->MicroStrategy Web->mstr->mstrTheme.css).
-
Double-click on color to launch the Update CSS Property dialog.
-
The value for the color property contains the hexadecimal color code. Update the value to #FF9933.
-
Click OK. The updated color property gets added under the .Red .mstrLargeIconViewItemName A:hover rule inside a newly created CSS file "sharedPage.css" under shared (Shared Reports)->CSS->Customizations.
-
Click on .Red .mstrLargeIconViewItemName A:link (under shared (Shared Reports)->CSS->MicroStrategy Web->mstr->mstrTheme.css).
-
Double-click on color to launch the Update CSS Property dialog.
-
The value for the color property contains the hexadecimal color code. Update the value to #CC6600.
-
Click OK. The updated color property gets added under the .Red .mstrLargeIconViewItemName A:link rule inside a newly created CSS file "sharedPage.css" under shared (Shared Reports)->CSS->Customizations.
-
Click on .Red .mstrLargeIconViewItemName A:visited (under shared (Shared Reports)->CSS->MicroStrategy Web->mstr->mstrTheme.css).
-
Double-click on color to launch the Update CSS Property dialog.
-
The value for the color property contains the hexadecimal color code. Update the value to #FF9933.
-
Click OK. The updated color property gets added under the .Red .mstrLargeIconViewItemName A:visited rule inside a newly created CSS file "sharedPage.css" under shared (Shared Reports)->CSS->Customizations.
-
Launch MicroStrategy Web to view the customization.
See Also
-
Fundamentals of Customization: Data Presentation, Styles and Layout Definitions