apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity
cloudstack/ui/docs/customize.md
Hoang Nguyen 50327ae339 primate: Add support for UI customisation (#372) 
- New config.json global config file
- Customisation: API endpoint, app name, doc link, logo, error and banner images, theme
- Basic external plugin support to allow users to write UI plugins in any framework, build and import/plug a html file as integration

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>
2021-01-20 07:06:19 +05:30

2.6 KiB
Raw Blame History

UI customization

Use a public/config.json (or dist/config.json after build) file for customizing theme, logos,...

Images

Change the image of the logo, login banner, error page, etc.

{
  "logo": "assets/logo.svg",
  "banner": "assets/banner.svg",
  "error": {
    "404": "assets/404.png",
    "403": "assets/403.png",
    "500": "assets/500.png"
  }
}
  • logo changes the logo top-left side image.
  • banner changes the login banner image.
  • error.404 change the image of error Page not found.
  • error.403 change the image of error Forbidden.
  • error.500 change the image of error Internal Server Error.

Theme

Customize themes like colors, border color, etc.

{
  "theme": {
    "@primary-color": "#1890ff",
    "@success-color": "#52c41a",
    "@processing-color": "#1890ff",
    "@warning-color": "#faad14",
    "@error-color": "#f5222d",
    "@font-size-base": "14px",
    "@heading-color": "rgba(0, 0, 0, 0.85)",
    "@text-color": "rgba(0, 0, 0, 0.65)",
    "@text-color-secondary": "rgba(0, 0, 0, 0.45)",
    "@disabled-color": "rgba(0, 0, 0, 0.25)",
    "@border-color-base": "#d9d9d9",
    "@logo-width": "256px",
    "@logo-height": "64px",
    "@banner-width": "700px",
    "@banner-height": "110px",
    "@error-width": "256px",
    "@error-height": "256px"
  }
}
  • @primary-color change the major background color of the page (background button, icon hover, etc).
  • @success-color change success state color.
  • @processing-color change processing state color. Exp: progress status.
  • @warning-color change warning state color.
  • @error-color change error state color.
  • @heading-color change table header color.
  • @text-color change in major text color.
  • @text-color-secondary change of secondary text color (breadcrumb icon).
  • @disabled-color change disable state color (disabled button, switch, etc).
  • @border-color-base change in major border color.
  • @logo-width change the width of the logo top-left side.
  • @logo-height change the height of the logo top-left side.
  • @banner-width changes the width of the login banner.
  • @banner-height changes the height of the login banner.
  • @error-width changes the width of the error image.
  • @error-height changes the height of the error image.

Assorted primary theme colours:

  • Blue: #1890FF
  • Red: #F5222D
  • Yellow: #FAAD14
  • Cyan: #13C2C2
  • Green: #52C41A
  • Purple: #722ED1

Also, to add other properties, we can add new properties into theme.config.js based on the Ant Design Vue Less variable. Refer: https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables