Atria v12.13+ Portal Branding

Atria v12.13+ Portal Branding

Objective

Atria allows service providers, resellers, and customers to create their own brand so that the web portal interface (control panel) displays their own logo, color scheme, fonts, and messages when their users log on to the portal.

Overview

The main elements involved in branding that change the look and feel of the Atria interface are:
  1. Brand Name, Label
  2. Logo
  3. Favicon
  4. Login Text
  5. Home Text
  6. Modern UI Variables (color scheme)
  7. Classic UI Variables (color scheme)
  8. Custom CSS - further customizations to the brand

Creating a Brand

A customer will inherit all brands that have been saved in the higher hierarchy (by the Reseller / Service Provider). To create a new custom Brand,
  1.  Go to the menu Customers > Configuration > Branding > Brands
  2. Under Management > New Brand
  3. Select if it is for a System Brand or a Customer Brand
  4. Enter a Brand Name and Brand Code
  5. Edit the brand created and customize it based on your requirements
  6. Save the new brand
Once the new brand has been created, it can then be applied to an individual customer by editing the Advanced Customer Properties and selecting the Brand:


Or to a portal URL by going to Customers > Branding > Brands and click on URL Branding on the Related Pages Menu:

Details on the UI Variables

Modern UI Variables



Classic UI Variables


Setup customers folder for branding resources

Navigate to the Web Server - C:\inetpub\Automate101\Atria\Atria\www-root
From this folder, create customers folder (this will soon be included in the installers)
Once the customers folder is created, you may add in here the image resources that will be used for branding (img, icons, etc)
Note that this customers folder will not be touched during an upgrade


You may create folders within this also if needed for separating customer brands per folder with its resources

Custom CSS (sample template)

Advance branding changes can be done by adding Custom CSS to the brand.  The following are some examples of the changes that can be made.

Customizing the Login Page


For the location of the image and logo, make sure to use /customers/<logo name> or if it's on another folder /customers/<custom folder>/<logo name> 
  1. /*LOGIN*/
  2. .login__background {
  3. position: absolute;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. background-color: transparent;
  9. }

  11. .login__logo {
  12. background-image: url("/customers/<logo name>");
  13. background-repeat: no-repeat;
  14. background-size: contain;
  15. position: absolute;
  16. left: 50%;
  17. margin-left: -120px;
  18. top: 80px;
  19. width: 250px;
  20. height: 200px;
  21. }

  23. .login__header {
  24. height: 300px;
  25. background-color: transparent;
  26. }

  28. .login__formPanel {
  29. position: absolute;
  30. top: 200px;
  31. min-height: 300px;
  32. left: 50%;
  33. margin-left: -250px;
  34. width: 500px;
  35. background-color: white;
  36. padding: 15px;
  37. }

  39. .login-form__formContainer {
  40. padding-bottom: 40px;
  41. }

  43. .login-form__heading {
  44. text-align: center;
  45. width: 100%;
  46. }

  48. .login-form__footer {
  49. position: absolute;
  50. bottom: 15px;
  51. right: 15px;

  53. }

  55. .MuiFormLabel-root {
  56. color: #01689b;
  57. }
  58.  
  59. .MuiFormLabel-asterisk.Mui-error {
  60. color: #01689b;
  61. }
  62.  
  63. .MuiFormLabel-root.Mui-focused {
  64. color: #01689b;
  65. }
  66.  
  67. .MuiFormLabel-root.Mui-error {
  68. color: #01689b;
  69. }
  70.  
  71. .MuiButton-textSecondary {
  72. color: #01689b;
  73. }
  74.  
  75. .MuiButton-containedPrimary {
  76. background-color: #01689b;
  77. }

  79. .MuiButton-containedPrimary:hover {
  80. background-color: #B5D3E7;
  81. }
  82.  
  83. .MuiInputBase-input::placeholder {
  84. color: #f47a2f;
  85. opacity: 0.42;
  86. transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  87. }
  88.  
  89. .MuiInput-underline.Mui-error:after {
  90. transform: scaleX(1);
  91. border-bottom-color: #01689b;
  92. }

  94. .MuiInput-underline:after {
  95. border-bottom-color: #01689b;
  96. }
  1. /*MAIN.Master*/
  2. .navbar-brand-img {
  3. height: 86px !important;
  4.         width: 200px !important;
  5. max-height: 86px !important;
  6. border: none;
  7. }

  9. .new-ui .sidenav .navbar-brand {
  10. padding: .5rem;
  11. }
If you have any questions or issues, feel free to contact us - https://automate101.com/contact/


    • Related Articles

    • Atria Billing Setup User Guide

      Objective This article describes how to configure Atria to utilize the latest billing features. This document outlines the billing setup attributes that should be configured.    Applies to Introduced in Atria version 12.0.0 Billing Setup Overview To ...

    • Billing Rules Engine User Guide

      Objective This article describes how to use the Atria billing rules engine to identify specific Atria entities as non-billable.   Applies to Introduced in Atria version 12.0.0 Billing Rule Feature Overview Many entities - customers, services, users, ...

    • Adding a Remote Dedicated Customer

      Overview In Atria V15, we now have the ability to manage Private Active Directory's. Customers who have their own AD Infrastructure, gain the same self service and management capabilities of Atria that have worked so well for multi-tenant Active ...

    • Atria v15 Clean Installation

      Overview This article outlines the clean install process for the Atria Platform. System Requirements In order to install Atria v15 you MUST complete the prerequisite components noted in the following article: ...

    • Display Patterns for Billing Line Descriptions

      Purpose: When generating billing data, two descriptions are generated for each billable item - Line description (detailed) and summary descriptions.   The Summary Description serves two purpose: Used as a template for your invoice lines and reporting ...