Live Helper Chat support forum.. Old google groups forum can be found here

You are not logged in.

Announcement

#1 2020-06-12 13:34:43

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  big_smile

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

Offline

#2 2020-06-12 14:55:25

remdex
Administrator
From: Lithuania
Registered: 2012-09-23
Posts: 3,215
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.

Offline

#3 2020-06-12 15:26:34

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  sad

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

Offline

#4 2020-06-12 15:46:02

remdex
Administrator
From: Lithuania
Registered: 2012-09-23
Posts: 3,215
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 smile I’ll add one next week smile

Offline

#5 2020-06-12 15:51:47

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?

Offline

#6 2020-06-12 17:19:54

remdex
Administrator
From: Lithuania
Registered: 2012-09-23
Posts: 3,215
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

Offline

#7 2020-06-12 18:52:05

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/

Offline

#8 2020-06-12 19:04:52

remdex
Administrator
From: Lithuania
Registered: 2012-09-23
Posts: 3,215
Website

Re: Customize icon/css of need help status widget

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

Offline

#9 2020-06-13 07:28:08

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!  smile

Offline

#10 2020-06-13 08:35:46

remdex
Administrator
From: Lithuania
Registered: 2012-09-23
Posts: 3,215
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 smile

Offline

Board footer