Theme management

After logging in to iPortal as an administrator, enter Management> Site Configuration> Site Customization, click "Theme Manage" on the right side, several sets of themes provided by iPortal are displayed, including blue, orange, dark orange, and dark red. And the blue and orange themes are for the light mode; the dark orange and dark red are for the dark mode. You can set one of them as the default theme of iPortal, or you can download and customize a theme (json format) and import it into iPortal. After configuring the theme, ordinary users can set their preferred site theme style on the My Account>“My Theme page.

Set default theme

In the operation column, click "Set as default theme" to set a theme as the default theme of the entire portal. After setting, iPortal will apply the default theme to the whole site. But if a user has set his own preferred theme in the personal center, in the login state, the system will use the preferred theme.

Update theme

In the operation column, click "Update theme", enter the Chinese and English name of the theme in the pop-up window, select the target theme file, and click "OK" to update the theme. Note: The themes provided by the system by default do not support update operations.

Download theme

In the operation column, click "Download theme" to download the json file of a theme. If you need to customize a theme, you can download a similar theme file first, then customize it based on your needs.

Delete theme

In the operation column, click "Delete theme" to delete a theme. Note: The default themes provided by the system by default do not support delete operations.

Customize a new theme

The theme provided by iPortal supports downloading in json format, and also supports importing new json theme files. The content of a json theme file is mainly composed of the header, resourceHeader (the secondary navigation bar), body, components, and footer, as shown below (take the blue theme as an example).

{

    "themeSetting": {

        "version": "1.0",

        "header": {

            "backgroundColor": "rgb(255, 255, 255)",

            "color": "rgb(51, 51, 51)",

            "hoverBackgroundColor": "#f5f5f5",

            "hoverFontColor": "#1890FF"

        },

        "resourceHeader": {

            "backgroundColor": "#ffffff",

            "color": "#333333",

            "hoverFontColor": "#1890FF"

        },

        "body": {

            "backgroundColor": "#F7F8FA"

        },

        "components": {

            "primaryColor": "#1890FF",

            "textColor": "#333333",

            "subTextColor": "#666666",

            "promptTextColor": "#999999",

            "disabledColor": "#cccccc",

            "borderColorBase": "#d9d9d9",

            "subBorderColorBase": "rgba(0,0,0,0.06)",

            "backgroundColor": "#ffffff",

            "subBackgroundColor": "#ffffff",

            "activeBackgroundColor": "#F2FBFF",

            "thirdBackgroundColor": "#fafafa",

            "fourthBackgroundColor": "#ffffff"

        },

        "footer": {

            "backgroundColor": "rgb(255, 255, 255)",

            "color": "rgb(51, 51, 51)"

        }

    }

}

header

• backgroundColor: the header background color.
• color: the header text color
• hoverBackgroundColor: the background color of an item in the first-level navigation bar when the mouse hovers on it.
• hoverFontColor: the text color of an item in the first-level navigation bar when the mouse hovers on it. It usually uses the theme color.

resourceHeader(Secondary navigation bar)

• backgroundColor: the background color of the secondary navigation bar
• color: text color of the secondary navigation bar
• hoverFontColor: the text color of an item in the secondary navigation bar when the mouse hovers on it. It usually uses the theme color.

body

• backgroundColor: the background color of the page content area

components

Indicating the components used in the body area of ​​the page, such as forms, input boxes, sidebars, lists, cards, etc.

• primaryColor: theme color. When the component is selected or the mouse is hovering over the component, the theme color will be used to display the text or background color of the component.
• textColor: In the normal state, the color of the main text in the component.
• subTextColor: In the normal state, the color of the secondary text in the component.
• promptTextColor: Prompt text color, such as the default input content in the input box, or the prompt input content next to the input box.
• disabledColor: The color used when the component is disabled.
• borderColorBase: The main border color of the component. For example, the borders of input boxes and buttons use the main border color.
• subBorderColorBase: The secondary border color of the component. Generally used for split bars in pages.
• backgroundColor: component background color
• subBackgroundColor: component secondary background color. Generally used for the background color of the content of the input box in the editing state.
• activeBackgroundColor: The background color of the component When the component is in a selected state.
• thirdBackgroundColor: The third background color of the component. It is generally used to fill the header and Tabs page.
• fourthBackgroundColor: The fourth background color of the component. It is generally used for the background color of the drop-down list and the background color of the pop-up window.

footer

• backgroundColor: background color of the page footer
• color: text color of the page footer

Example:

To customize a new theme, it is recommended that you download and customize based on the theme file that is closest to your project needs. For example, to customize a light-colored red theme, you can download the blue theme file provided by the system, and then modify the hoverFontColor value in the header, hoverFontColor value in the resourceHeader, and the primaryColor value in the components, such as "#E14D57". For other senarios, please refer to the field descriptions in the above sections when making modifications.

After the customization is complete, you need to import it into iPortal. Steps:

1. Click "Import Theme";
2. Enter the Chinese name and English name of the new theme in the pop-up window, and select the new theme file;
3. Click "OK" to import the new theme.

When the import operation is complete, you can select the new theme on the Personal Center>My Theme page to view the actual effect of the new theme. You can also continue to modify the theme and update the theme through the update operation.

Note: The iPortal management interface does not support theme switching. You need to check the theme effects on the portal front-end interface.