Add a Custom Style Sheet to Infopath

InfoPath view .xsl files contain three or four standard internal style sheets, depending on whether you have specified a color scheme. These can be identified by the attributes controlStyle='controlStyle', tableEditor="TableStyleRulesID", languageStyle='languageStyle', and themeStyle='urn:office.microsoft.com:themeBlue'. Never modify any of these standard internal style sheets. InfoPath often regenerates these, which will cause you to lose any changes you make to them.

You can add your own custom internal or external style sheet to any or all of the view .xsl files in your form template. The best place to add it is after the InfoPath standard style sheets because styles have reverse order precedence, meaning the last value for an identical selector property wins. If both you and InfoPath have specified a value for the border property of the table selector, whichever one appears last will override the value for the same selector property of any preceding style sheet.

You might use HTML and class selectors when writing your own styles. ID selectors will not be useful because InfoPath will not allow you to place an ID attribute on an element in the XSL. This is because InfoPath autogenerates ID attributes when it creates the view.

 

div {...} <!-- HTML Selector: This will work fine. --> .myClass {...} <!-- Class Selector: This will work fine. --> #myId {...} <!-- ID Selector: Not useful. You cannot use custom IDs on elements -->

 


INTERNAL STYLE SHEETS

Internal style sheets are stored directly in the view .xsl file, just as the InfoPath standard style sheets are. If you want to use the same styles across multiple views you will need to copy the styles from one view .xsl file to another. Let's review the steps to add an internal style sheet.


Add a custom internal style sheet:

1. Choose Extract Form Files from the File menu.


2. Select a location to save your extracted form files to, and then click OK.


3. Close InfoPath to release the lock it places on your form files.


4. Using a text editor, open your view .xsl file.


5. Add the following code just below the last style element:

 

<style title="myCustomStyleSheet" type="text/css"> table { FONT-FAMILY: Courier New; BORDER: solid 1px black; } </style>

 

6. Save your view .xsl file, and then close the text editor.


7. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

Your custom styles should now be visible in the designer. Internal styles must be updated per view .xsl file, which can create inconsistencies if you forget to update one of the .xsl files. If you want to use the same styles across multiple views, you should consider using external style sheets instead. You can always override external styles for a particular view by using a combination of external and internal style sheets.


EXTERNAL STYLE SHEETS

External style sheets exist in separate .css files. They must be added to the form template as resource files as well as referenced in any view .xsl file that will use them. By using external style sheets you maintain a consistent set of styles across all of the views that reference them. Let's review the steps to add a custom external style sheet named myCustomStyleSheet.css.

Add a custom external style sheet as a resource file:

1. Choose Resource Files from the Tools menu.


2. In the Resource Files dialog box, click Add.


3. In the Add File dialog box, navigate to and select the myCustomStyleSheet.css file, and then click OK. Figure 1 shows the file added as a resource.


4. Click OK to close the Resource Files dialog box.

 

Figure 1. The myCustomStyle.css file has been added as a resource file.

Link to a custom external style sheet from your view .xsl file:

1. Choose Extract Form Files from the File menu.


2. Select a location to save your extracted form files to, and then click OK.


3. Close InfoPath to release the lock it places on your form files.


4. Using a text editor, open your view .xsl file.


5. Add the following code just below the last style element:

 

 

<link href="mySstyle.css" rel="stylesheet" type="text/css"/>

 

 

6. Save your view .xsl file, and then close the text editor.


7. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

Your custom styles should now be visible in the designer. If you added the link element to the view .xsl file before you added the .css file as a resource, or if you later update the resource file, your updates will not be visible in the designer until you save and reopen your form template. They will, however, be visible in the form preview before you save and reopen your form template.

As long as your internal and external style sheets appear last you should not have any trouble with InfoPath overriding any of your values. However, if a scenario is encountered where a value in one of the InfoPath standard style sheets is still causing you trouble by overriding your value, add the !important declaration to yours. This will force your value to always be chosen.

 

table { FONT-FAMILY: Wingdings !important; }

 

Finally, it should be noted that inline styles are normally chosen over internal or external styles because they appear last. The !important declaration on an internal or external style will override a value on an inline style unless the inline style also uses the declaration. In other words, the !important declaration also follows the reverse order precedence.