HelpSpot Help Desk Software | HelpSpot Blog | HelpSpot Support

Widget tab image size


Trying to customise the widget tab image

Have set tabtype_custom_img to image url but need to amend size.

Size defined in widget.css using

/* tab classes */
body a#helpspot-widget-tab,
body a#helpspot-widget-tab:link {


I could edit that but would be replaced on updates so instead want to set size using widget_tab.css - set aside for just this purpose.

This isn’t working :-

body a#helpspot-widget-tab, body a#helpspot-widget-tab:link {
width:50px !important;
height:150px !important;

any idea of how to do this?

(BTW - I know that other style elements in widget_tab.css are getting picked up so I know its not something silly like widget_tab.css not in right place).


Yes, this is tricky. Here’s the issue. The widget_tab.css file is used inside the iframe that’s loaded on the page after the tab is clicked. That css file doesn’t have scope to the original calling page where the tab is actually loaded.

In the code HS provides to put the widget on a page the first line is this:

@import url('');

Put a block after that with your modified tab CSS and that should work.


Cheers Ian,

For anyone else reading this I also had to add

background-color : transparent

as we are using a PNG with a alpha blend dropshadow. By default its set to a backgoudn colour of #222 which stops the shadow working.