3
CSS Styles: Make your Live Chat Link Resemble SmarterTools.com Live Chat Button
Idea shared by Andrea Rogers - October 16, 2014 at 2:42 PM
Completed
Employee Post

The following CSS will allow you to modify SmarterTrack’s live chat link on your company’s website to look like the current live chat button on the SmarterTools website. Please be aware that this code references “stlivechat21”. This number will need to be changed to the generated ID of your live chat link.

 

For information on determining what CSS to modify, please see the KB article Use "Inspect Element" to Determine CSS Modifications.

 

#stlivechat21 a { 
   z-index: 999; 
   position: fixed; 
   border-radius: 0 0 3px 3px; 
   -moz-border-radius: 0 0 3px 3px; 
   font-size: 14px; 
   left: 0; 
   top: 55%;
   text-decoration: none; 
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg); 
   -o-transform: rotate(-90deg); 
   -ms-transform: rotate(-90deg); 
   transform: rotate(-90deg); 
   -webkit-transform-origin: top left; 
   -moz-transform-origin: top left; 
   -o-transform-origin: top left; 
   -ms-transform-origin: top left; 
   transform-origin: top left; 
   box-shadow: -2px 2px 3px rgba(0,0,0,0.30); 
}

#stlivechat21 a:hover { 
   text-decoration: none 
}
#stlivechat21 #stlivechat21_online { 
   background-color: #76b30c; 
   color: white; 
   border: solid 1px #64970a; 
   border-top: 0px; 
}

#stlivechat21 #stlivechat21_online > span { 
       display: block; 
       padding: 6px 14px; 
}

#stlivechat21 #stlivechat21_online:hover { 
       text-decoration: none; 
       background-color: #7fbc1c; 
}

#stlivechat21 #stlivechat21_offline { 
   background-color: #76b30c; 
   color: white; 
   border: solid 1px #64970a; 
   border-top: 0px; 
}

#stlivechat21 #stlivechat21_offline > span { 
       display: block; 
       padding: 6px 14px; 
}

#stlivechat21 #stlivechat21_offline :hover { 
       text-decoration: none; 
       background-color: #7fbc1c; 
}
Andrea Rogers
Communications Specialist
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

1 Reply

Reply to Thread
0
Debby Coutinho Replied
April 18, 2016 at 3:41 AM
Is there an option to do this for STrack12 to get the chat tab to park against the left or right screen like when you get to the portal in st12 ?   This css does not work for 12, I did try and look at the css for the bar and managed to get it to turn, but the placement options seems to be an issue.

Reply to Thread