Page-specific CSS files

Each individual MicroStrategy Web page has its own “links” page section that references a particular JSP or ASP.NET file. This <page-section> node is responsible for providing the links to the CSS files specifically required for that page. The code sample below shows the “links” <page-section> node for the Report Execution page, which points to the Report_Links page-section file. The Report_Links page-section file generates the HTML for the CSS files in the <head> section of the page.

J2EE environment

<page desc="Report Execution" desc-id="" feature-id="" login-required="true" name="report" persist-mode="8" track="tr

…

<page-sections use-default="true">

…

<page-section file-name="/jsp/Report_Links.jsp" name="links"/>

.NET environment

<page desc="Report Execution" desc-id="" feature-id="" login-required="true" name="report" persist-mode="8" track="tr

…

<page-sections use-default="true">

…

<page-section file-name="Report_Links.aspx" name="links"/>

These CSS file references are defined in the "links" <page-section> for each page by default. Most transforms (particularly newer transforms) do not output <link> information as part of their HTML output. Rather, they rely on <link> information being defined in the page into which the transform output is included.

Order of CSS files and handling conflicts

The page-specific <link> tags are placed in the <head> section of the HTML source code after the application-wide HTML <link> tags generated by the global <page-section> node of the default page. This enables the page-specific CSS rules to override the application-wide CSS rules. The CSS Specification dictates that if the same CSS property is defined with different values in <link1> and then <link2> and there are conflicts, the values in <link2> will always override those defined in <link1>. However, this can be affected by CSS specificity rules.

When there are conflicts, the rules governing which <link> tag and which selector will be used— based on the order of the tags and the specificity of conflicting selectors— are enforced by the browser and not by MicroStrategy Web. According to W3C rules for CSS, when multiple <link> tags conflict, succeeding links will override preceding ones, and will themselves be overridden by rules within the HTML document itself. To learn more about how the specificity of a CSS selector is calculated, refer to the W3C website.

Normally, if <link2> and <link1> have conflicting but non-identical rules (such as conflicting selector properties), the browser calculates their specificity to decide which one overrides the other. For example, suppose the CSS file referenced by <link1> has the following rule:

body.mstr {background-color: white} /* specificity = 0 + 10 + 1 = 11 */

And suppose the CSS file referenced by <link2> has the following rule:

body {background-color: blue} /* specificity = 1 */

In this example, the <link1> rule overrides the <link2> rule— regardless of which <link> tag comes first— because the CSS rule referenced by <link1> has higher specificity.

In the example above, however, when both rules have the same specificity, the order of the <link> tags in the HTML defines which value wins. For example, if the CSS file referenced by <link1> has the following rule:

body {background-color: white} /* specificity = 1 */

and the CSS file referenced by <link2> has the following rule:

body {background-color: blue} /* specificity = 1 */

then both rules have the same specificity. Therefore, in this example, the browser gives precedence to the latter rule over the former, and the <link2> CSS rule overrides the <link1> CSS rule.

Using a specific and practical example, the application-wide CSS can specify that the toolbar dock zone should be displayed near the top of every Web 8.x page by default. However, the page-specific CSS file for the Admin pages can specify that the toolbar dock zone should be hidden for such pages.

Common page-specific CSS files

The following table lists some of the page-specific CSS files in the /style/mstr/ subfolder and notes the particular page to which the CSS file is applied by default.

CSS file	Page to which CSS file is applied
pageProjects.css	The page which lists the available MicroStrategy projects.
pageLogin.css	The login page.
pageDesktop.css	The Welcome page which typically follows a successful login to a project.
pageFolder.css	The folder browsing pages (Shared/My Reports and their subfolders).
pageCreateReport.css	The create Report page which lists the report options available (Blank Report, and so on).
pageCreateDocument.css	The Create Document page which lists the Report Services document options available (Blank Document, and so on).
pageWait.css	The Wait page which is displayed during the execution of a lengthy report or document.
pagePrompts.css	The Prompts page for a prompted report or document.
promptIndex.css	The Prompts page, but only when an index of prompt questions is displayed on the left-hand side of the page.
pageReport.css	The Report page (applies to grid, graph, and design modes).
pageRW.css	The Report Services Document page (applies to view and design modes).
DocumentView.css	The Report Services Document page, view mode only.
DocumentDesign.css	The Report Services Document page, design mode only.
pageDocument.css	The HTML Document page.
pagePreferences.css	The Preferences page.
pageSaveAs.css	The Save As page for both reports and documents.
pageSearch.css	The Search page.
pageLoggedOut.css	The page which confirms the user has successfully logged out.
pageAdmin.css	The MicroStrategy Web Administrator pages.