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


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


  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("location of the image/logo");
  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 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 ...
    • Atria with Citrix Cloud

      Overview This article provides a guide on how to set up Atria with Citrix Cloud. Where required details and links provided in this article have been extracted from Citrix documentation. Related Links Citrix Cloud Documentation System Requirements ...
    • Atria and CPSM impacted by Microsoft Exchange April Update

      Overview This issue impacts any version of CPSM or Atria used to manage Exchange 2013, 2016 or 2019 which have received the April Microsoft security update. Last week Microsoft released a set of critical security fixes to Exchange ...
    • How to Configure Atria to Set Users' Proxy Addresses Attribute in AD

      Objective This article provides a guide on how to configure Atria to Set Users' Proxy Addresses Attribute in AD during provisioning Considerations This configuration is OPTIONAL to be implemented and is dependent on your requirement. Once the ...