Skip to content

Appearance customization

In DCE 5.0, you can change the logo on the login interface and the top navigation bar through Appearance Customization to help users better identify products.

Custom login page and top nav bar

  1. Log in to the web console as a user with admin role. Click Global Management - Custom Appearance at the bottom of the left navigation bar.

  2. Click Platform Settings and select Custom Appearance.

  3. In the Login Page Customization tab, after modifying the icon and text of the login page, click Save.

  4. Click the Top Nav Bar Customization tab, modify the icon and text of the navigation bar, and click Save.

Note

If you want to restore the default settings, you can click One Key Restore. Note that all custom settings will be discarded after a one-click restore.

Advanced customization

Advanced customization can modify the color, font spacing, font size, etc. of the entire container platform through CSS styles. You need to be familiar with CSS syntax. Delete the contents of the black input box to restore to the default state, of course, you can also click the one-key restore button.

CSS sample for login page customization:

.test {
  width: 12px;
}

#kc-login {
 /* color: red!important; */
}

CSS sample for page customization after login:

.dao-icon.dao-iconfont.icon-service-global.dao-nav__head-icon {
   color: red!important;
}
.ghippo-header-logo {
  background-color: green!important;
}
.ghippo-header {
  background-color: rgb(128, 115, 0)!important;
}
.ghippo-header-nav-main {
  background-color: rgb(0, 19, 128)!important;
}
.ghippo-header-sub-nav-main .dao-popper-inner {
  background-color: rgb(231, 82, 13) !important;
}

Comments