Use "Inspect Element" to Determine CSS Modifications

Using CSS it's fairly simple to change the look and feel of your SmarterTools product(s) so that it seamlessly integrates into an existing website. Listed below are steps on how to determine the CSS that needs to be modified to achieve the look you want. 

Common Web browsers, including Chrome, Firefox, Safari and Internet Explorer, include an element panel which allows you to see the underlying structure of a Web page. Typically, this is accessed by right clicking anywhere on the page and choosing “Inspect Element”. A window will open, either docked to the page or in a separate window, with HTML on the left and CSS on the right. Clicking on the individual lines of HTML will show the CSS associated with those elements. Hovering over the lines of HTML will highlight the section of the Web page that that HTML renders.

Using this tool you can determine what you need to target in order to change the look of your product. For this example, we’ll be working with SmarterTrack to change the Portal’s offline chat tab color to blue. Please keep in mind that these same steps apply for finding the CSS, regardless of which product you're using. 

Follow these steps to determine the CSS that needs to be modified:

1. If you're using SmarterTrack, navigate to your existing Portal. 
2. Right click on the live chat tab and choose Inspect Element. Whatever element your mouse was on when you right clicked will be chosen in the element window.
3. Click on the HTML linethat renders the live chat tab. Using the hovering feature, you’ll see that this is: 

   <a id=”chattab_offline” class href target=”self” title=”No agents are currently available. Click to submit a ticket.”>

4. In the CSS section, you’ll find the CSS associated with that tag. Play around with the CSS until you determine what you'd like to change it to. We'll go with a blue to match the default color of the portal: #2f6e8d. By default, the CSS for the offline live chat tab is: 

   #chattab #chattab_offline {
        background-color: #ccc;
        color: #111;
        border: solid 1px #999;
        border-top: 0px;
   }

5. Now that you've determined the attribute to modify and what you'd like to change this to, you would simply enter the CSS in the Custom CSS section. To only change the color of the offline live chat button, the custom CSS would look like this:

   #chattab_offline {
        background-color: #2f6e8d
   }

   If you enter this CSS into SmarterTrack's Custom CSS section, you'd see that the offline live chat tab was now blue. 

#PageHeader h1 { visibility: hidden; }
#PageHeader h1:before {content: 'My Company Email'; visibility: visible; }