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/