Custom CSS

Learn how to add custom CSS code that will only be applied inside Canvas

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 "MobiLoud" string is present, if so it will add custom CSS to the HTML head.

<script type="text/javascript">
	// Get the current user agent
	const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
	
	// Check if the user agent contains the canvas string
	if (isApp) {
	
	    // Outputs the custom CSS in case canvas is present in the user-agent
	    document.head.innerHTML += '<style>footer { display:none !important; }</style>';
	
	}
</script>

If you are using PHP you can use the following piece of code:


    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    if(strlen(strstr($u_agent,"canvas")) > 0 ){
      echo "";
    }