Subscriber Portal: Custom CSS

One of the most powerful options provided is the ability to completely customize the Subscriber Portal using CSS (Cascading StyleSheets).*

The Custom CSS tab in the Settings >> Subscriber Portal section of the admin console is used to insert your own custom styles to redefine the look of the Subscriber Portal.

The possible redesigns using CSS are nearly endless. If you're just looking to do a basic makeover, with your own logo, as well as basic fonts & colors. Let's look at a simple example:

Tip: Check out a video walk-thru of customizing the Subscriber Portal!

Basic Customization of the Subscriber Portal

For a basic branding of the Subscriber Portal:

1. Replace the Custom logo with the desired logo.
2. Insert custom basic CSS to change fonts and colors to match your desired web branding. (See below)
3. (optional) Insert some Custom verbiage to include some instructions or info for your subscribers.

Basic Subscriber Portal CSS:

If you're not concerned about moving menus or completely changing the layout of the Omnilert Subscriber Portal, then most of your branding/ can be done with very little CSS. Modify the CSS below to match your fonts, colors, etc.

Note: For a quick video walk-through of customizing the Subscriber Portal, see this video.

As you can see the example CSS above is blank. To give our website a proper "makeover", you'll need to edit it to include the desired layout, fonts, and colors.

The best way to do this is to use your favorite code editor and customize each style as needed. 

Once your CSS is ready, copy/paste it into the settings of Omnilert.

Looking for more in-depth CSS options?

The above example shows a simple branding conversion of the Subscriber Portal.

The ability to customize the Subscriber Portal via CSS is extensive.

The entire portal contains CSS handles, allowing you to customize every item you see on screen.

Not everyone will need to fully redesign their subscriber portal, but some of you might want to. A more comprehensive list of CSS tags to edit can be found in the "base.css" file attached to this article.

* Note: If you are unfamiliar with CSS or new to web design in general, we recommend checking out online tutorials for a primer in basic web design using Cascading StyleSheets.