CSS Requirements

By default, Finesse rewrites the linked CSS in your gadget, which in some cases is not desirable as it results in a loss of functionality if the CSS you are loading refers to other asynchronous elements. As a result, for all third-party gadgets, you can bypass the content rewriting for CSS by including the following in your gadget XML:

1. Add the optional feature "content-rewrite" to disable the CSS rewrite:

   Code Snippet

   Copy<Optional feature="content-rewrite">
           <Param name="expires">86400</Param>
           <Param name="include-url">.*</Param>
           <Param name="exclude-url">.css</Param>
   </Optional>
   

   For more information, see Optimizing Gadget Resource Loading.

2. Include UserPref for "externalServerHost":

   Code Snippet

   Copy<UserPref name="externalServerHost"/>
   

3. To reference the CSS file, perform one of the following:

   • If the gadget is hosted on the Finesse server, reference the CSS file using externalServerHost:

     Code Snippet

     Copy<link rel="stylesheet" 
     href="__UP_externalServerHost__/3rdpartygadget/files/<yourgadgetname>/<path to CSS file>/<CSS filename>.css"
     type="text/css"/>
     

     where you must update <yourgadgetname> to the filename of your gadget under the 3rdpartygadget /files folder and update the remaining path variables to the location of the CSS file for your gadget.

   • If the gadget is hosted on a server external to Finesse, reference the CSS file using the URL:

     Code Snippet

     Copy<link rel="stylesheet"
     href="[https:]//<hostname>/<path to CSS file>/<CSS filename>.css"
     type="text/css"/>
     
     

     where you must update the URL variables to the location of the CSS file on your external server, and where specifying the protocol (https ) is optional. (If you omit the protocol, Finesse uses the default protocol of the page.)