How to: Modify Enterprise Portal Style Sheets

Applies To: Microsoft Dynamics AX 2012 R2, Microsoft Dynamics AX 2012 Feature Pack, Microsoft Dynamics AX 2012

Two sets of cascading style sheets are used to format specific elements that appear in Enterprise Portal and in the Role Center pages for the Microsoft Dynamics AX client. The base versions of these cascading style sheets are found in the Web > Web Files > Static Files node of the AOT. During Enterprise Portal installation, the cascading style sheets are deployed from the AOT to the Enterprise Portal server. The following table lists the cascading style sheets that are used to format elements in Enterprise Portal:

These style sheets are deployed to the Enterprise Portal installation, and are typically found in the following location:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable

The following table lists the cascading style sheets that are used to format elements for Role Center pages that appear in the Microsoft Dynamics AX client:

These style sheets are deployed to the Enterprise Portal installation, and are typically found following location:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\EP\Stylesheets

Modifying the Enterprise Portal Style Sheets

To modify the Enterprise Portal style sheets

1. In the AOT, expand the Web > Web Files > Static Files node.

2. Locate the cascading style sheet that you want to modify (use the names in the previous tables to decide which to modify).

3. Right-click the cascading style sheet entry, and then click View Code.

4. Make changes to the cascading style sheet.

5. Close the editor and save the changes.

6. Right-click the Static Files node in the AOT and then click Deploy. This will copy the updated style sheet to the Enterprise Portal server.

Editing the Cascading Style Sheet

Some experimentation is required to find which items in the style sheet you must edit to get the result that you want in Enterprise Portal. For instance, the .dynGridViewSelectedRowTr element controls the appearance of the selected row in an AxGridView component. Use the element names and comments in the cascading style sheet file to find the items that you want to change.

The cascading style sheets contain directives, which appear as comments. When a SharePoint theme is used for an Enterprise Portal site, these directives tell SharePoint how to apply theme colors to the various Enterprise Portal elements. For example, the following code from the AXEP.css file defines the appearance of the selected row in the AxGridView for Enterprise Portal:

.dynGridViewSelectedRowTr
{
   margin:0px;
   border:0px;
   /* [ReplaceColor(themeColor:"Dark2",themeTint:"0.35")] */
   border-top:1px solid #68B3FC !important;
   /* [ReplaceColor(themeColor:"Dark2",themeTint:"0.35")] */
   border-bottom:1px solid #68B3FC !important;
   /* [ReplaceColor(themeColor:"Light2")] */
   background-color:#BCE0FE !important;
}

The CSS code is standard. It specifies characteristics such as the border thickness and the background color. Notice the directives (CSS comments) that appear immediately before several lines in the code. For instance, the following two lines of CSS code define the top border characteristics of the selected row in the AxGridView:

/* [ReplaceColor(themeColor:"Dark2",themeTint:"0.35")] */
border-top:1px solid #68B3FC !important;

When the theme that is applied to the SharePoint site is Default (no theme), the directive is ignored. The colors that are defined directly in the CSS file are used. In this example, the top border color for the selected row will be #68B3FC (a medium blue). When a theme has been specified for the SharePoint site, the directive will be applied. This directive indicates that the top border color for the selected row will be the Dark2 color from the theme, with a 35% white tint applied. Other characteristics that are defined by the cascading style sheet, such as the border thickness, are always applied, regardless of whether a theme has been specified.