Printable version:  ClientTrack Portal CSS Guide 02.16.24

This guide provides a description of the capabilities for Cascading Style Sheet (CSS) files utilized by ClientTrack Portal implementations as a method for gaining an understanding of best practices to use when customizing ClientTrack Portal pages

This guide is for Eccovia customers who have completed or plan an implementation of ClientTrack Portal for their environment.  If you currently do not have Portal implemented and configured, but would like more information on this feature, please contact your Customer Service Manager (CSM)

This guide may utilize examples of web pages, forms, menus, or other components to illustrate common processes. Not all components will be available or applicable to each ClientTrack implementation in the manner that they are described within this document. 

Basic CSS Structure/Rules

CSS was created to work in conjunction with other markup languages such as HTML and help with aesthetics of web pages. It is a powerful tool used to stylize a page and is typically found in all web pages as a requirement, as much as the markup language itself

The CSS syntax structure is relatively simple. There is a selector block and a declaration block. You select an element and then declare what you want to do with it.  However, there are a few simple rules to remember:

•      The selector block points to the HTML elements you want to style
•      The declaration block contains one or more declarations separated by semicolons

There are different styles of CSS.  They include Inline, External, and Internal/Embedded.

•      Inline style works with specific elements that have the <style> tag. Each component must be stylized and may not be the best or fastest way to manage CSS. This style can be useful if you want to handle a single element, quickly preview the changes, or do not have access to the CSS file itself.
•      External style/method is typically the most convenient one. Everything is done externally on a .css file.  This allows for all the styling to be managed in a separate file and then applied to any page you want. It also has the capability of improving load times.
•      Internal or Embedded style sheets are loaded each time an entire website is refreshed. This may increase page loading time.  Multiple pages would need to use the same CSS style, but this comes with some benefits. Having everything on one page makes it easier to share the template for a preview.

ClientTrack Permissions

ClientTrack Portal along with proper permissions need to be configured before a customer Administrator can work with portal design. 

The tool/permission, Portal Designer allows:

•      Read Access: User can access the Portal Designer and view the setup of the exiting portal pages
•      Write Access: User can edit the configuration or existing portal pages and create new pages within the portal

Accessing Portal Design

As ClientTrack Portal utilizes the same database as ClientTrack, log in information, access permissions and Organization access will mirror ClientTrack. Client record accessibility will also mirror ClientTrack. 

From the Portal URL, engaging F12 will open the Developer Tools, just as in any web page.