How to discover the CSS element for a specific page object

Let's assume you want to modify the look and feel of a specific element on your page but don't know its CSS code. 

It's really simple to find the CSS of specific page elements on most modern browsers.

In this example,we will use the Chrome browser to find the CSS code for the external announcements box.
  • First, add an external announcement (1) from Account & Settings so the announcement box becomes visible on the login page of your portal.

  • Logout and click control+shift+i on chrome to bring the "developer" tools box
  • Use the small magnifier icon on the left of the developer tools tab (the inspector)
  • Click on any element you want on page to reveal its html and CSS.
  • Specifically for the external announcements box, the CSS it reveals is as follows:
.tl-external-announcement {
margin: -15px 110px 30px 110px;
padding: 13px;
font-size: 15px;
line-height: 22px;
font-weight: normal;
}
  • Add this code on the "CSS" tab (1) on your theme and modify it in any way you see fit (some basic CSS knowledge is assumed).


 You can also try the same steps for Internal announcements with ease.



Feedback and Knowledge Base