Including a custom stylesheet in InforCRM

There are 3 main ways to include a custom stylesheet in your InforCRM client:

• Add it to SageStyles.jsb so that it gets compiled into sage-styles.css – this is the best performance approach. It is relatively upgrade safe but not completely
• Create a custom module to load it – this is the upgrade-safe approach
• Edit Base.master to include it – this is the quickest approach when developing but is the least upgrade-safe

Compiling into sage-styles.css

For this approach you must edit the file css/SageStyles.jsb, adding a reference to your file. Then you need to re-deploy the site which will take your file and include it into sage-styles.css. It’s the best from a performance point of view because the browser only needs to do 1 HTTP request.

The SageStyles.jsb also has a very peculiar syntax. This uses an older tool called JsBuilder, unfortunately as the tool is no longer maintained it is hard to find documentation for it. With a bit of trial and error I found you have to include your custom file in 2 places: under target and under project.

  <directory name="" />
  <target name="SageStyles" file="$outputsage-styles.css" debug="False" shorthand="False" shorthand-list="">
    <!-- Order matters here -->
    ..... Default Styles here ... 
    <!-- My Custom Styles! -->
    <include name="../Custom/css/CustomStyles.css" />
  </target>
  .... default stuff .... 
  <!-- My Custom Styles - again! -->
  <file name="../Custom/css/CustomStyles.css" path="" />

One drawback is you must re-deploy the site for any change to take effect. So I will usually use the 3rd approach during development then remove my link tag for production.

Creating a custom module

This is a good approach for a reusable package because it does not require touching any of the stock file so it is completely upgrade safe. It’s really similar to how you would include a custom script via a module.

Here is an example:

using System;
using Sage.Platform.Application;
using System.Web.UI;
using System.Web;

namespace BusinessRules.Modules
{
    public  class CustomCSSModule : IModule
    {
        public void Load()
        {
            Page page = HttpContext.Current.Handler as Page;

            if (page == null)
                return;
             page.Header.Controls.Add(new LiteralControl("<link rel='stylesheet' type'text/css' href='Custom/css/CustomStyles.css'/>"));

        }
    }
}

Including it in base.master

This is really the simplest approach – all you need to do is add the <link> tag to the page header (I just search for sage-styles and add mine afterward):

<link rel="stylesheet" type="text/css" href="~/css/sage-styles.css" />
<link rel="stylesheet" type="text/css" href="~/Custom/custom-styles.css" />

It’s also the least upgrade safe because that file gets updated by Infor quite often. I only use it for quick testing during development.

Finally…

Of note is that none of these approaches will get the stylesheet included on the logon page. To achieve that, you must edit Login.master.

One day I might take some time to get a good workflow for including a SASS stylesheet into CRM! But for now the CSS customizations are minor enough that the benefits would not outweigh the cost.