Customize Design

In CEP (version 13.0 and above), you have the capability to personalize your design by customizing the colors, login background image, and company logo. The logo, CSS, and background image can be mounted into the container. Specifically, the custom version of the "overwrite.css" file will take precedence over the default version. If you choose to change the filename of the logo, you will need to adjust the corresponding environment variable (CEP_LOGO_FILE_NAME) accordingly.

Example

    volumes:
      - ${PWD}/overwrite.css:/var/www/html/public/build/overwrite.css
      - ${PWD}/custom-background.jpg:/var/www/html/public/images/custom-background.jpg
      - ${PWD}/logo.png:/var/www/html/public/build/logo.png
    environment:
      - CEP_LOGO_WIDTH=250
      - CEP_LOGO_FILE_NAME=logo.png

When customizing the styles within the "overwrite.css" file, you can leverage CSS variables to enhance the flexibility and ease of adjustments. Here are all the available CSS variables used in "overwrite.css":

CSS Variables For overwrite.css

:root {
  /* Primary color used for buttons, and main design elements */
  --primary: #4993cf;

  /* Secondary color used for buttons, and main design elements */
  --secondary: #4993cf;

  /* Color for success messages and green buttons */
  --success: #1cb064;

  /* Color for error messages and red buttons */
  --danger: #dd1529;

  /* Background color for text boxes */
  --text-box-bg: #f9f9f9;

  /* Border color for text boxes */
  --text-box-border: #e1e1e1;

  /* Background color for method tiles in authenticators overview */
  --aa-tile-bg: #f9f9f9;

  /* Border color for method tiles in authenticators overview */
  --aa-tile-border: #e1e1e1;

  /* Background image for the login screen */
  --login-background-image: url("../images/custom-background.jpg");

  /* Controls the display of the login footer. 
    You can modify this value to none if you wish to hide the login footer */
  --login-footer-display: block;

  /* Main background color */
  --main-background-color: #fff;

  /* Main text color */
  --main-text-color: #222222;

  /* Box background color */
  --box-background-color: #f8f8f8;

  /* Background color for form controls */
  --form-control-background-color: #fff;

  /* Text color for form controls */
  --form-control-text-color: #222222;

  /* Border color for form controls */
  --form-control-border-color: #999999;

  /* Label color for form controls */
  --form-label-color: #999;

  /* Background color for the footer */
  --footer-background-color: #f8f8f8;

  /* Border color for the footer */
  --footer-border-color: #ebebeb;
}