Adding custom CSS to Canvas Apps using Javascript

We can add custom CSS to apps by performing a check to the user-agent.

If the “canvas” string is included in the user-agent, it means that the content is being displayed inside the app.

Below you can find a code snippet that will save the user agent and then check if the “canvas” string is present, if so it will add custom CSS to the HTML head.

<script type="text/javascript">
// Get the current user agent
var currentUserAgent = navigator.userAgent.toLowerCase();

// Check if the user agent contains the canvas string
if (currentUserAgent.indexOf('canvas') > -1) { 

    // Outputs the custom CSS in case canvas is present in the user-agent
    document.head.innerHTML += '<style>footer, sidebar { display:none !important; }</style>';


Related Articles

Download This Resource

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.