Adding a custom style sheets to InfoPath form designs

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 {…}
.myClass {…}
#myId {…}

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:Choose Extract Form Files from the File menu.Select a location to save your extracted form files to, and then click OK.Close InfoPath to release the lock it places on your form files.Using a text editor, open your view .xsl file.Add the following code just below the last style element:

    table { FONT-FAMILY: Courier New; BORDER: solid 1px black; }
Save your view .xsl file, and then close the text editor.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:Choose Resource Files from the Tools menu.In the Resource Files dialog box, click Add.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.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:Choose Extract Form Files from the File menu.Select a location to save your extracted form files to, and then click OK.Close InfoPath to release the lock it places on your form files.Using a text editor, open your view .xsl file.Add the following code just below the last style element:

Save your view .xsl file, and then close the text editor.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.

Advertisements

The !important rule and overriding existing styles

I learnt something new in SharePoint today.  Sounds noddy, but I didn’t know how to override styles in the core.css file.  Now I do!

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet.

However, for balance, an “!important” declaration (the delimiter token “!” and keyword “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Declaring a shorthand property (e.g., ‘background’) to be “!important” is equivalent to declaring all of its sub-properties to be “!important”.

Example(s):

The first rule in the user’s style sheet in the following example contains an “!important” declaration, which overrides the corresponding declaration in the author’s style sheet. The second declaration will also win due to being marked “!important”. However, the third rule in the user’s style sheet is not “!important” and will therefore lose to the second rule in the author’s style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is “!important”. This shows that “!important” declarations have a function also within author style sheets.

/* From the user’s style sheet */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }

/* From the author’s style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }