Custom CSS in Dynamics 365 Forms? Yeah You Can Do That…But You Shouldn’t.

Have your ever wanted, or were asked, to customize your Dynamics web forms with custom CSS? Well, you can’t. At least not in any supported manner. However, here’s something you can do, that you shouldn’t, because like I said, it’s not supported.

Add a Stylesheet WebResource with your custom css to your solution and name it /styles/customstyles.css
Add your custom CSS to the customstyles.css
Create a Javascript WebResource and add the following function to it

function LoadCustomCss() {

    myWindow = window.parent;
    if (myWindow != null) {
        if (!myWindow.document.getElementById('customSCCss')) {
            var head = myWindow.document.getElementsByTagName('head')[0];
            var stylesheet = myWindow.document.createElement('link');
            stylesheet.id = 'customSCCss';
            stylesheet.type = 'text/css';
            stylesheet.href = Xrm.Page.context.prependOrgName('/WebResources/new_/styles/customstyles.css');
            stylesheet.rel = 'stylesheet';
            head.appendChild(stylesheet);
        }
    }
}

In the OnLoad of your Form call LoadCustomCss and enjoy how easily you were able to add custom css to your Dynamics form, but seriously don’t do this. It’s not supported.

If you do, do this, expect any and / or all Dynamics updates to break it. Also, this is for the classic Web UI and I’ve tested it in the browser interface for version 8.2 on-prem only. So, it probably won’t work in either 9.x or the Unified Interface.

Did I mention this isn’t supported? Here’s a sample of some pretty cool custom subgrid styling you can do, but shouldn’t.