Add a Custom Style Sheet to a View - Greg Collins
in

InfoPath Dev

This Blog

Syndication

Greg Collins

Add a Custom Style Sheet to a View

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>

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

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

©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

Comments

 

o5_pro said:

I am using the external style sheet method in your blog.  I do have one question however, after I have applied my custom style sheet and it's classes the view.xsl file; I see the changes applied but not when I publish the .xsn file to the sharepoint server.  Why is this?

October 29, 2007 10:23 AM
 

Greg Collins said:

There was a bug introduced around the time of Internet Explorer 7 which made external files (.css, .js, etc.) not function.

The workaround was to make them internal (as much trouble as that is).

We're hoping there will be a fix in IP07 SP1 or later.

January 15, 2008 10:00 AM
 

snowcounty said:

There are not many articles talking about using css in InfoPath form. The reason might be that infopath

February 25, 2008 12:07 AM
 

Elena said:

I have added a custom external style sheet to my view, but in the view nothig changed. Why can I have such a problem?

May 31, 2008 11:54 PM
 

In the Trenches said:

October 11, 2008 4:47 AM
 

shubham said:

I am facing problem with the same issue mentioned below:

I am using the external style sheet method in your blog.  I do have one question however, after I have applied my custom style sheet and it's classes the view.xsl file; I see the changes applied but not when I publish the .xsn file to the sharepoint server.  Why is this?

Please help

December 24, 2008 5:12 AM
 

sgandhi said:

Hi,

I want to apply my own custom CSS for the controls like the Textboxes, Lables, buttons. So how should i work on that. The above method is not working. any other and more effective way?

Awaiting quick reply.

Thanks

Sumeet Gandhi

May 9, 2009 6:05 AM
 

etiennevandam said:

Is it possible to let a infopath association form for a sharepoint workflow, use the sharepoint theme's css. In other words, let the web-enabled infopath form use the hosting site/page (sharepoint) css.

I wrote a workflow which works well and now I would like to be able to deploy it to many different sites/servers without re-designing the form for every site's theme. Also, I don't want to have to re-design the form everytime there are updates to the themes.

June 12, 2009 12:31 AM
 

Sekar_Thangavel said:

Hi,

 I have a button in the infopath , when I am clicking this button I need to call javascript function. How to achive this task?

 Can we use javascript file inside the infopath form?

September 18, 2009 4:35 AM
 

bob_chauvin said:

It'd be cool to implement rounded corners for sections via

www.html.it/.../index.html

October 1, 2009 11:42 AM
 

Mikamewi said:

Hi,

I would like to have an external CSS (Style Sheet) to be referenced in my 100 infopath forms. So when I make a change in the CSS all the infopath forms automatically will be updated with the new styles and fonts.

Is this possible in InfoPath 2010?

Regards

January 4, 2011 12:19 AM
 

Patrick Halstead said:

Hi Mikamewi,

Have you tried changing the href to point to an external CSS file?

January 4, 2011 1:07 AM
 

kfosmoen said:

Maybe a super duh question, but I am not a css expert by any means, so please....

You say:

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

Choose Extract Form Files from the File menu.

What application do I open the view.xsl application in to find the File - Extract Form Files option from?  It's not in Visual Web Developer Express.

August 2, 2011 7:45 AM
 

Watch this video said:

Add a Custom Style Sheet to a View - Greg Collins

September 24, 2014 7:25 AM
 

tutors in Miami said:

Add a Custom Style Sheet to a View - Greg Collins

October 24, 2014 9:42 AM
Copyright © 2003-2012 Qdabra Software. All rights reserved.
View our Terms of Use.