Webappbuilder Custom Themes

Webappbuilder Custom Themes

by Li Yuanxiang

Basic steps:

1. Create a folder for a new theme
2. Register a new theme to the Manifest.json file
3. Covers the color of Headercontroller parts,
4. Overlay Panel Color
5. Overwrite the color of the popup box
6. Custom Fonts

The parts of the theme that can be customized include brand's color, font, and other underlying UI properties. The following changes are made using the jewelry box theme, and the new theme modification involves some CSS properties of the UI

Background Color

Text Color

Font Family

Font size

Padding

These UI components are in the title Control components, Panel components, and map pop-up boxes in the jewelry box theme.

2. Create a new Theme folder

   Open the Webappbuilder ~/client/stemapp/themes/jewelryboxtheme/styles folder and create a new folder for MyStyle. Under the MyStyle folder, create a file named Style.css. Of course, it's also possible to link other resource slices used by CSS files to the CSS file.

4. Register a new theme to the Manifest.json file

   Open ~/client/stemapp/themes/jewelryboxtheme/manifest.json File

   Add the following properties about MyStyle to the styles node

   A "Name"-must match the theme of MyStyle

   B. "description"-Add a description of the topic

   C "Stylecolor" defines the display background color of the theme in Webappbuilder

   D. Restart Webappbuilder can see the new style inside the chest theme, such as

6. Overriding the caption controls the color of the part

Update the color scheme of the title control part, you can add CSS code to the Style.css file.

2. The following code turns the background white (#fff)

   . jimu-main-background {

   Background-color: #fff;

   }

   The class name named Background-color is a. Jimu-main-background property, which is a jimu CSS framework and other UI package elements in one of the types, detailed Jimu CSS classes, can view the CSS framework, https:// Developers.arcgis.com/web-appbuilder/api-reference/css-framework.htm

4. Use the following code to change the color of the caption and sub-headings to Gray (#232323)

6. Use the following code to remove the shadow effect and add a border at the bottom. Unlike the first and second steps, where a special class name for a part is used

   Note: The specific class name of the specified part is usually written in the form of Jimu-widget-{widgetname}

8. Modify the background color to remove the right border and modify the transparency of the icon

Now you can see the specific effects, such as

1. change and align icons

   To make the title bar icon smaller, use the following code

   Edge Alignment settings for icons

   Turn the icon into a circle

   Make the icon's picture smaller

   The results of the modification are

   You can modify the selected style

   The title bar button is automatically combined when the screen is zoomed out, and you can modify the style of the combo button, for example, to set the alignment, background color, icon size, and text style for the combo button, respectively.

   The final results are as follows

   You can change the connection style of the title bar as follows

   Specific effects

3. Modify the color of a panel

The panel widget includes an extensible widget and a screen widget, and all widgets can modify their background color and heading style, such as the following code that modifies the panel's title color and title background

Remove the Pannel border

Show the results as follows

1. Modify PopOver Style

   Similar to the practice of panel, change the background color of the popup box as follows

2. Use a different font

   You can set a different font

   If you want to use some network fonts, you can refer to them in the Style.css file, as

Then modify the . Jimu-main-font. node values, such as

Webappbuilder Custom Themes