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; 
}