--- hide: - toc --- # Customize Appearance In DCE 5.0, you have the option to customize the appearance of the login page, top navigation bar, bottom copyright and ICP registration to enhance your product recognition. ## Customizing Login Page and Top Navigation Bar 1. To get started, log in to DCE 5.0 as a user with the __admin__ role and navigate to __Global Management__ -> __Settings__ found at the bottom of the left navigation bar. ![settings](https://docs.daocloud.io/daocloud-docs-images/docs/en/docs/ghippo/images/appear01.png) 2. Select __Appearance__ . On the __Custom your login page__ tab, modify the icon and text of the login page as needed, then click __Save__ . ![login](https://docs.daocloud.io/daocloud-docs-images/docs/en/docs/ghippo/images/appear02.png) 3. On the __Custom top navigation bar__ tab, modify the icon and text of the navigation bar as needed, then click __Save__ . ![nav](https://docs.daocloud.io/daocloud-docs-images/docs/en/docs/ghippo/images/appear03.png) 4. On the __Advanced customization__ tab, you can modify login page, navigation bar, copyright, and ICP registration with css. ![advanced](https://docs.daocloud.io/daocloud-docs-images/docs/en/docs/ghippo/images/appear05.png) !!! note If you wish to restore the default settings, simply click __Revert__ . This action will discard all customized settings. ## Advanced Customization Advanced customization allows you to modify the color, font spacing, font size, etc. of the entire container platform using CSS styles. Please note that familiarity with CSS syntax is required. To reset any advanced customizations, delete the contents of the black input box or click the __Revert__ button. **Sample CSS for Login Page Customization:** ```css .test { width: 12px; } #kc-login { /* color: red!important; */ } ``` **CSS sample for page customization after login:** ```css .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; } ``` **CSS sample for custom footer (including copyright, filing, and other information at the bottom)** ```css ```