YMa-esristaff

Sample WAB styles to show diferent levels of theme customization

Blog Post created by YMa-esristaff Employee on Mar 11, 2016

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

Attachments

Outcomes