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. If you're not using SmarterTrack, go ahead to the SmarterTools Support Portal instead to follow along.
  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 line that 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. 
As mentioned above, please keep in mind that while these steps mention SmarterTrack, the same method of determining CSS modifications applies to all SmarterTools products. For more information on how to apply custom CSS to your installation, please search in the Knowledge Base for the product specific article.
 
Some Examples
 
To change the top title of the interface when logged in:
#PageHeader h1 { visibility: hidden; }
#PageHeader h1:before {content: 'My Company Email'; visibility: visible; }
 
 

Add Feedback