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. }

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

  21. .login__header {
  22. height: 300px;
  23. background-color: transparent;
  24. }

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

  35. .login-form__formContainer {
  36. padding-bottom: 40px;
  37. }

  38. .login-form__heading {
  39. text-align: center;
  40. width: 100%;
  41. }

  42. .login-form__footer {
  43. position: absolute;
  44. bottom: 15px;
  45. right: 15px;

  46. }

  47. .MuiFormLabel-root {
  48. color: #01689b;
  49. }
  50.  
  51. .MuiFormLabel-asterisk.Mui-error {
  52. color: #01689b;
  53. }
  54.  
  55. .MuiFormLabel-root.Mui-focused {
  56. color: #01689b;
  57. }
  58.  
  59. .MuiFormLabel-root.Mui-error {
  60. color: #01689b;
  61. }
  62.  
  63. .MuiButton-textSecondary {
  64. color: #01689b;
  65. }
  66.  
  67. .MuiButton-containedPrimary {
  68. background-color: #01689b;
  69. }

  70. .MuiButton-containedPrimary:hover {
  71. background-color: #B5D3E7;
  72. }
  73.  
  74. .MuiInputBase-input::placeholder {
  75. color: #f47a2f;
  76. opacity: 0.42;
  77. transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  78. }
  79.  
  80. .MuiInput-underline.Mui-error:after {
  81. transform: scaleX(1);
  82. border-bottom-color: #01689b;
  83. }

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

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


    • Related Articles

    • Atria v12.11+ System Requirements

      Overview  The following article provides the prerequisites necessary for the deployment of Atria v12.11+ into your environment.  System Requirements   Environment  Core servers for the platform should be domain joined. Before you can deploy Atria ...
    • 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 ...
    • Atria v12.11+ Deployment Guide

      Overview  This article outlines the deployment procedure of Atria v12.11+.  This article will also refer to other articles that may assist with your installation or upgrade. Alert:  In-place migration from any version of CloudPortal Services Manager ...
    • 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, ...
    • 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 ...