Sample WAB styles to show diferent levels of theme customization

2791
6
03-11-2016 02:29 PM
by Anonymous User
Not applicable
5 6 2,791

Hi, all

First, welcome to the group for everything related to theme customization for WAB.

For those who got a chance to come to my talk on Mar 9th, 2016, here is the source code of the sample styles I demoed.

And for those who wasn't there, here is the what the styles are about:

Because customizing themes for WAB may vary dramatically from requirements to requirements. Some only need to update the colors, some need also to create custom layouts, widgets, or panels, and some require deep customization on the dijits from Dojo framework, ArcGIS API for JS, as well as Jimu components. I created three styles for the "JewelryBoxTheme" to show how a theme (or style in this case) can:

  1. only change the colors (background colors, text colors, etc.)
  2. change color, and import a different theme for Dojo framework other than claro
  3. all above, and override styles of some WAB widgets such as:
    1. Zoom slider from WAB
    2. Locate button from WAB
    3. Search, and
    4. Directions


Screenshots:

style 1:

demo1.png

style 2:

demo2.png

style 3:

demo3.png


How to use:

  1. Extract the attached .zip file
  2. Drop the "JewelryBoxTheme" folder to path/to/your/WAB/client/stemapp/themes. Replace all files.
  3. Open WAB and create a new app, pick "JewelryBoxTheme", and last layout
  4. switch between 3 new styles added to test

custom-styles.png


Overview of custom changes:

  • main.js: logic added to switch between Claro and Calcite Dojo themes between WAB themes and styles (only "demo_adcanved" and "demo_adcanved" should use Calcite in the demos)
  • style.css in "demo" style:  mainly to add styles to make the header to have a white look and feel.
  • style.css in "demo_adcanved" style: Calcite theme (details) for Dojo dijits and part of ArcGIS API widgets is imported
  • style.css in "demo_adcanved2" style: more css styles added to override default styles of the followwing Jimu widgets:
    • Zoom slider from WAB
    • Locate button from WAB
    • Search
    • Directions
6 Comments