Strategy ONE

Creating or Modifying a CSS File

This topic provides step-by-step instructions on working with CSS files. The instructions for creating or modifying a CSS file are identical because in either case a new CSS file is created and merged with the existing CSS files. This topic also discussed how to apply CSS changes to a specific MicroStrategy Web page or to all MicroStrategy Web pages.

When you perform the steps below, a new CSS file is created with a new rule. It is located under CSS->Customized Web Styles->style inside the CSS Settings view. If the CSS rule was applied to a specific MicroStrategy Web page, the newly created CSS file has the name pageNamePage.css where the pageName value used is the value defined in the "name" attribute for a MicroStrategy Web page in the Page Configuration file. If the CSS selector was applied globally to all MicroStrategy Web pages, the name of the newly created CSS file is global.css.

If you have enabled interactivity between the Web Customization Editor and MicroStrategy Web, refer to topics Changing an Icon, Changing Background Properties, Changing Layout Properties, or Changing Text Properties to perform customizations involving those specific actions.

Adding a new CSS rule

You add a new CSS rule in two stages. The first stage is to create a new CSS selector for the rule. The steps to create a new selector are described below.

  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 settings that can be modified to perform CSS-related customizations.  

  3. Click MicroStrategy Web Styles.  

  4. Click style to expand the list of CSS files used in MicroStrategy Web. 

  5. If the new selector is to be added to an existing CSS file, right-click that CSS file and select New Selector. Otherwise, right-click any CSS file in the list and select New Selector. 

  6. Enter a name for the CSS selector in the Selector text box. 

  7. Select the scope of the CSS selector with the Apply selector to radio switch. The available options are discussed below. 

    • Use the This Page radio button if the CSS selector is to be applied to a specific MicroStrategy Web page. Use the drop-down menu to choose the MicroStrategy Web page for the selector. 
    • Use the All Pages radio button If this CSS selector is to be applied globally to all MicroStrategy Web pages. 
    • Use the This File radio button if this CSS selector is to be added to the CSS file that was right-clicked to open the dialog. If you select this option, the rule for the selector will be applied to every MicroStrategy Web page that uses the CSS file. 

  8. Click OK.

After creating the selector for the rule, the second stage is to add properties and values to the rule.

Adding a new CSS property and value for a CSS rule

  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 settings that can be modified to perform CSS-related customizations.

  3. If the CSS selector to which you are adding or modifying the property is a custom selector, then click Customized Web Styles. If the CSS selector is a selector provided by MicroStrategy Web, then click MicroStrategy Web Styles. 

  4. Click style to expand the list of CSS files used in MicroStrategy Web. 

  5. Click the appropriate CSS file to display its properties. 

  6. Right-click any CSS selector and select New Property. 

  7. Enter a name for the CSS property and a value for it in the Property and Value text boxes respectively. 

  8. Select the scope of the CSS property with the Apply selector to radio switch. The available options are discussed below. 

    • Use the This Page radio button if the property is to be applied to a specific MicroStrategy Web page. Use the drop-down menu to choose the MicroStrategy Web page for the property. 
    • Use the All Pages radio button If the property is to be created in a rule that is added to the global.css file. 
    • Use the This File radio button if the property is to be added to the CSS file that was right-clicked to open the dialog. If you select this option, the property will be applied to every MicroStrategy Web page that uses the CSS file. 

  9. Click Utils >> if you wish to use editors to select colors, images, and fonts. 

  10. Click OK.

Modifying or deleting a value of a CSS property

  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 settings that can be modified to perform CSS-related customizations. 

  3. If the CSS property that  you are modifying or deleting the value is a custom property, then click Customized Web Styles. If the CSS property is in a CSS file provided by MicroStrategy Web, then click MicroStrategy Web Styles. 

  4. Click style to expand the list of CSS files used in MicroStrategy Web. 

  5. Click the appropriate CSS file to display all the CSS selectors. 

  6. Click the appropriate CSS selector to display all the CSS properties for that selector. 

  7. Right-click the property that you wish to modify or delete, and select Open in Editor or Delete as appropriate. If you select Delete, confirm your selection to finish the deletion. If you select Open in Editor, continue with the steps below. 

  8. Change the entry in the Value text box. 

  9. Select the scope of the modification with the Apply selector to radio switch. The available options are discussed below. 

    • Use the This Page radio button if the modification is to be applied to a specific MicroStrategy Web page. Use the drop-down menu to choose the MicroStrategy Web page for the property. 
    • Use the All Pages radio button If the modification is to be created in a rule that is added to the global.css file. 
    • Use the This File radio button if the modification is to be added to the CSS file that was right-clicked to open the dialog. If you select this option, the modification will be applied to every MicroStrategy Web page that uses the CSS file. 

  10. Click Utils >> if you wish to use editors to select colors, images, and fonts. 

  11. Click OK.