Robin Theming

The Robin application in Hero_Flow has a theming feature to allow administrators to adjust the aesthetics of how Robin appears to users.

Robin theming is not enabled by default within Hero_Flow. Please contact your Automation Hero service representative to enable Robin customizations

Theming Robin

To adjust the theme in Robin: 

  1. Navigate to the Administration overview page.
  2. Select Robin theming.

  3. Robin can be themed by adding a logo image or CSS file.
    • To upload a logo image:
      • Click Choose file... across from Robin logo.
      • Select a file image from the file browser and click Open.
    • To upload a CSS file:
      • Click Choose file... across from Theme css file.
      • Select a file image from the file browser and click Open.


CSS Help

Below are the default theme styles for Robin.

  1. Copy the CSS below.

    Robin Theme CSS:

    body {
      --ah-color-bg: #{$bg-color};
      --ah-color-green: #{$green};
      --ah-color-blue-2: #{$ah-blue-2};
      --ah-color-white: #{$white};
      --ah-color-dark-green: #{$dark-green};
      --ah-color-danger: #{$danger};
      --ah-color-gray-20: #{$gray-20};
      --ah-color-gray-30: #{$gray-30};
      --ah-color-gray-50: #{$gray-50};
      --ah-color-gray-70: #{$gray-70};
      --ah-color-gray-80: #{$gray-80};
      --ah-color-gray-100: #{$gray-100};
    
      /** Header Colors*/
      --ah-header-bg-color: #000;
      --ah-header-action-hover-color: #353535;
    
      /** Disabled Buttons colors */
      --ah-btn-disabled-svg: #525252;
    
      /** List box */
      --ah-list-bg-color: #000;
      --ah-list-text-color: #{$white};
      --ah-list-border-color: #{$white};
      --ah-list-highlight-color: #353535;
    
      /** Disabled Backgrounds and Borders */
      --ah-disabled-01: #f4f4f4;
      --ah-disabled-03: #c6c6c6;
      --ah-disabled-04: #8d8d8d;;
      --ah-disabled-05: #525252;
    }
    
    
    /**
      To hide the footer copyright text, enable following style
    
    footer .container {
      display: none !important;
    }
    
    */
    
    /**
      If you do not find any CSS variable for a particular element in Robin,
      you can use its class name of element to directly add the styles for it in this file.
    
      If the class name is dynamically generated, then it will be changed after upgrading robin
      version and you might have to update the theme file accordingly.
    
    */
  2. Update the CSS variables with desired color scheme
  3. Upload in Hero_Flow. (Shown above)

Automation Hero recommends not removing any CSS variables from the file.


CSS VariableUsage
--ah-color-bg
  • Background color for application
--ah-color-green
  • Color for submitted tasks count
  • Status count progress bar
--ah-color-blue-2
  • Primary button background color (Submit button)

  • Secondary button text color (filter actions, cancel button)

--ah-color-white
  • Primary button text color

--ah-color-dark-green
  • Progress bar

--ah-color-danger
  • Text color for validation error message

  • Background color for error button. (shown after a task is failed to be submitted)

--ah-header-bg-color
  • Background color for header

--ah-header-action-hover-color
  • Background color for header actions (on mouse hover)

--ah-disabled-01

--ah-disabled-03

  • Color for disabled buttons and muted texts