Announcement

herbert12

Member

Registered: 2016-08-31

Posts: 10

Customize icon/css of need help status widget

Hello,

I'm trying to customize the image/css of the need help widget icon ("speech bubble").

I have successfully created and assigned my own theme in System configuration > Themes > Widget themes

If I set a color, e.g. "Need help background color", it works.
But I also want to remove border, border-radius, etc. of #status-icon

I tried all the 5 text areas in "custom css" tab but nothing works!

Please help before I lose the rest of my hair 

Last edited by herbert12 (2020-06-12 15:51:20)

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Customize icon/css of need help status widget

There is no dedicated section in custom css for need help widget. But there is section

"Build your own need help widget layout" and there is a button "Set default HTML" it will fill default html presently is used. So you can  just style it directly with style attribute.

herbert12

Member

Registered: 2016-08-31

Posts: 10

Re: Customize icon/css of need help status widget

Thanks for the suggestion, but I don't need to change the need help widget.

All I wanted to change was the css of #status-icon = circle div with speech bubble icon inside.
I'm sorry for the naming confusion, apparently this is called "status widget"
My head is spinning from all the different options and settings.

I added the following css to "Custom CSS" tab > "Status widget additional CSS"

#lhc_status_container {
  transform: rotate(-90deg);
  width: 120px;
  height: 40px;
}

#lhc_status_container #status-icon {
  background-color: orange !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
  height: 40px !important;
  width: 120px !important;
  font-family: Arial !important;
  font-size: 20px !important;
  text-align: center !important;
}

#status-icon:before {
  content: "Live Chat" !important;
  white-space: nowrap;
}

I'm sure a pro like you will understand what I want to achieve (simple orange box with text fixed on right border), but I'm out of ideas.
After several hours of trial and error I have given up 

Last edited by herbert12 (2020-06-12 15:27:35)

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Customize icon/css of need help status widget

As I wrote above there is no dedicated section to have custom css for needhelp itself I’ll add one next week

herbert12

Member

Registered: 2016-08-31

Posts: 10

Re: Customize icon/css of need help status widget

Thanks, did you try my code to see what I mean?

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Customize icon/css of need help status widget

As i ser you want to try to change status icon. Just use !important flag to override default style

herbert12

Member

Registered: 2016-08-31

Posts: 10

Re: Customize icon/css of need help status widget

as you can see from the code, I want to replace the status icon with a rotated css text
I have already used !important on all styles, but it does not work
here is an example of what it should look like finished: http://jsfiddle.net/F23W2/3/

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Customize icon/css of need help status widget

Well, chrome inspect element is your friend if I find time I’ll try to play around with your css next week

herbert12

Member

Registered: 2016-08-31

Posts: 10

Re: Customize icon/css of need help status widget

Thanks, that would be great!

One small thing it noticed is that lhc.woff is always preloaded although it is not used if you override css or upload your own image

Have a nice weekend! 

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Customize icon/css of need help status widget

"Status widget additional CSS, takes effect after save"

[== CSS ==]
#lhc_status_container {
  transform: rotate(-90deg);
  width: 120px;
  height: 80px;
}

#lhc_status_container #status-icon {
  background-color: orange !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
  height: 40px !important;
  width: 120px !important;
  font-family: Arial !important;
  font-size: 20px !important;
  text-align: center !important;
}

#status-icon:before {
  content: "Live Chat" !important;
  white-space: nowrap;
}

With this you control iframe size itself
"Custom page CSS (new widget only)"

[== CSS ==]
#lhc_container_v2 #lhc_status_widget_v2{ 
    bottom:0px!important;
    right:0px!important;
    min-height: 145px!important;
    min-width: 75px!important;
    max-height: 145px!important;
    max-width: 75px!important;
    width: 75px!important;
    height: 145px!important;
}

That's all I can help