Community

Sample WAB styles to show diferent levels of theme customization

3176
6
03-11-2016 02:29 PM
by Anonymous User
Not applicable
5 6 3,176
‎03-11-2016 02:29 PM

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
custom_styles_samples.zip
6 Comments
MatejVrtich
by Esri Contributor
Esri Contributor
‎03-22-2016 01:18 AM

Hi,

Is the Calcite theme (included as Beta with Esri JS API 3.16) somehow related with the Calcite Web CSS framework (Calcite Web | Esri Design Patterns)?

The Calcite theme defines modern look and feel for Dojo dijits and a subset of Esri dijits. It can be used to create a new WAB theme with unified design for Dojo dijits and Esri dijits (as you did in demo 2 and 3). However, I do not want to create the UI of my own widgets using Dojo dijits (it has significant DOM footprint and complexity), but I need to style my own widgets the same as the rest of the WAB. So, I was thinking to use Calcite Web CSS framework to design my own widgets, however, the individual components (buttons, inputs, ...) looks differently then their Dojo counterparts themed with Esri JS API Calcite theme.

Did you try the Semantic-Dojo (Semantic Dojo) to style the WAB?

Thanks,

Matej

0 Kudos
by Anonymous User
Not applicable
‎03-23-2016 09:52 AM

Hi, Matej

It is true that the UI components across different Calcite libraries look different. The idea is that these three libraries/frameworks (Web, Bootstrap, and Dojo) only share the same color swatch, font family, and that is pretty much it. I had the same question before I started building the Calcite Dojo theme, and the answer is we expect developers only pick one library to work with. But this is not the case for WAB, since people can develop widgets with whatever UI framework they pick. So in this case, they need to customize their own CSS to make them look consistent.

I am going to build a CSS SASS framework for WAB that will cover all UI elements, and I think that might make your widget or theme development easier.

And for Semantic Dojo, no, I have not used it. The potential issue is that other importing another Dojo theme will only update the Dojo dijits, not ArcGIS API's dijits. So UI components in WAB will still look inconsistent. It still requires a lot effort to be able to cover all UI components.

Thanks,

Yiwei

MatejVrtich
by Esri Contributor
Esri Contributor
‎03-24-2016 12:01 AM

Hi Yiwei,

Thank you for clearing that up.

I am really happy to hear that you are going to build a CSS framework for WAB. This is very important, especially as the WAB UI is mixed from many different components (Dojo Dijits, Esri Dijits, WAB Dijits, Custom Dijits).

Is this CSS framework on the roadmap for WAB (I didn't hear a word of it yet), or is it your personal side project?

Are you going to build it from scratch, or based on any other framework (e.g. Calcite)?

Thanks,

Matej

0 Kudos
by Anonymous User
Not applicable
‎03-24-2016 09:49 AM

I just had a meeting with the WAB team a couple days ago. And yes, it will be on the roadmap for WAB. We are still evaluating the effort of this work, and will make plan on when we can release it. And the CSS framework will utilize the Calcite Dojo framework, and on top of that, add all the missing pieces.

Yiwei

Shauna-RaeBrown
by
Frequent Contributor
‎05-26-2016 10:58 AM

Yiwei,

Thank you for taking on this blog.  It would be very helpful if you could put together a page of resources for those getting started with creating custom themes using the Developer Edition of the WAB.  Currently I'm using version 1.3.  I'm trying to create a few themes/layouts with a only one or two color/style choices.  I want to make sure that all of my colors/styles are consistent throughout the WAB.  Then, of course I'll need step-by-step instructions for how to put my custom WAB on our Portal.  Thank you for your help.

Shauna-Rae

0 Kudos
NicolasGIS
by
Honored Contributor
‎02-12-2018 05:38 AM

Hello,

Any update on this CSS SASS framework for WAB ?

I did not find anything in the documentation. Is it still on the roadmap ?

Thanks,

Nicolas

0 Kudos