Developer: Pass Custom CSS

Signup for a free 18-days trial today

Developer: Pass Custom CSS

In Knowledge base >

You are able to pass custom CSS values to the chat window. As it is a iframe you might find it impossible to style it without actually passing the CSS values to the iframe window.

In your javascript tag, add before </script> the variable cs_custom_css (required) with an array of JSON items consisting of selectors. See the example below:

<script type="text/javascript">
	(function(d,c){
		var scrs=d.getElementsByTagName("script");var scr=scrs[scrs.length-1];var e=d.createElement("script");e.async=true;e.src=("https:"==document.location.protocol?"https://":"http://")+"chat.csupporthq.com/external/chat-float-inline.js?"+scrs.length;
		if(typeof c=="function")if(e.addEventListener)e.addEventListener("load",c,false);else if(e.readyState)e.onreadystatechange=function(){if(this.readyState=="loaded")c();};
		scr.parentNode.insertBefore(e,scr);
	})(document,null);
	// Below is the custom CSS
	var cs_custom_css = [];
	cs_custom_css.push({selector:'body',value:'background-image:url("http://www.w3schools.com/cssref/paper.gif");'});
	cs_custom_css.push({selector:'input.user_input',value:'height:14px;line-height:14px;font-size:12px;'});
</script>

You should be confident about CSS selectors and styling, but it is straightforward. You just need to lookup the classes (e.g. in Chrome right click, and select inspector), and use them as selector as it is shown in the above example.

Please remember this is for advanced users, as we try to conform the look n’ feel as much as possible so we can make sure it works the best possible in all situations.

Note: Please be advised that this is JSON, thus in IE6 and other old browsers this do not work.

Example selectors (might change)

Change font size in chat:

cs_custom_css.push({selector:'#chat-area li p',value:'font:normal 13px/16px arial;'});