Help changing color in a Template Web App Theme

4746
8
Jump to solution
02-03-2016 09:31 AM
Labels (1)
BenGrod
Occasional Contributor III

Any suggestion on how to change the color pallet for the out of the box Esri Templates in Web App Builder for Developer v 1.3? I specifically want to change or add a new color pallet for the Launchpad theme.

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Ben,

   I have not tried to add a new style color to the Launchpad theme, but I have added a new style color to the FoldableTheme. Here are the steps:

1. open the manifest.json in the themes folder (i.e. [install dir]\client\stemapp\themes\FoldableTheme).

2. Add your style object to the styles array:

    {

      "name": "olive",

      "description": "this is olive style",

      "styleColor": "#5a6b4d"

    }

3. in the styles folder copy an existing style like "black" and rename it ("olive" in my example).

4. Now edit the style.css as desired.

5. Restart WAB and your new style should now be an option for new apps.

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Ben,

   I have not tried to add a new style color to the Launchpad theme, but I have added a new style color to the FoldableTheme. Here are the steps:

1. open the manifest.json in the themes folder (i.e. [install dir]\client\stemapp\themes\FoldableTheme).

2. Add your style object to the styles array:

    {

      "name": "olive",

      "description": "this is olive style",

      "styleColor": "#5a6b4d"

    }

3. in the styles folder copy an existing style like "black" and rename it ("olive" in my example).

4. Now edit the style.css as desired.

5. Restart WAB and your new style should now be an option for new apps.

MichaelAugust
Occasional Contributor III

Hi Robert - I am attempting to add a new style to the Foldable theme in 2.2.  I try to do what you've described above (following the mystyle documentation example), but instead of a new solid swatch listed in the styles, the custom swatch just changes to the #xxxxx color I put in my new style.  What I'm trying to do is have the main title be one color, and then the foldable panel another color, but the panel css is overwritten somewhere.  When I inspect the jimu-panel-title in my browser I see my CSS background color choice with the right color (orange) but it has a black line through it and appears the same as the custom color.  Did they change the code for styles somehow in 2.2 where some of the style.css is overwritten somehow?

I am able to edit one of the existing styles though, say "blue" for example, I can modify the blue>style.css file and get two different colors - one for the main bar (want this blue) and one for the foldable panel bar (orange say) - but using this method I'm stuck with the existing blue color on the style swatch...not the blue I define in the CSS. Or I could add a new style as described in docs linked below, but the new style is a swatch with the hex number written on top, not a simple rectangle of color...and I can't seem to alter any colors with the style.css found in my style folder (newstyle>style.css).

This is somewhat of a rambling post but I'd just like to know if anyone can get the example here:

Create a new style for a theme—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

working where you can then go in and change the foldable-panel-title background color to something other than the "main" color of the app after you pick a custom color - I can't seem to get it to work.

Thanks for any suggestions!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

   It is all about css specificity. Your css rule need to have higher specificity then the other rule that is overwriting it. So for the on screen widget panel title background color it would be:

.jimu-on-screen-widget-panel>.jimu-panel-title.title-normal {
   background-color: #5a6b4d;
}

As far as your new custom style getting the #hex number swatch and not a unique swatch position I believe that that is just a FEATURE in WAB 2.2 (I would have expected that it would have created a new swatch and still kept the custom swatch as well).

MichaelAugust
Occasional Contributor III

Thanks Robert, I guess I'm still confused about which CSS to add that specificity to - is this within the "blue" style style.css that I'm altering? So below I got the panel-title background to change (to the orange color), but when I change the panel-label text color from white ("Legend" below) to that darker blue in the main header, it just stays white...could you help me understand just within a nutshell, which/where CSS to change a style (I chose "blue" swatch; foldable theme>"blue" style to modify in this case) within the Foldable Theme? Is the higher specificity rule that I'm writing simply inserted into the C:\WAB\2.2\WebAppBuilderForArcGIS\client\stemapp\themes\FoldableTheme\styles\blue\style.css - is this where I insert all the rules to override the defaults for the all the foldable styles that show up (as color swatches) when I'm building new apps? 

About the custom style, yeah I don't understand now how to add a new style and have it show up as a new color swatch under the style choices, it seemed to "read" the hex value out of a new style that I inserted into manifest, etc. called "GEI-Blue" - I just copied an existing style and added it to the manifest, but it somehow changes that custom swatch instead of creating a new one...

Thanks!

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

  If you are making all your changes to the C:\WAB\2.2\WebAppBuilderForArcGIS\client\stemapp\themes\FoldableTheme\styles\blue\style.css then you will only see the changes for new apps using the foldable blue theme. If you want these changes to appear in an existing app then you have to make the changes in the [install dir]\server\apps\[app#]\themes\FoldableTheme\styles\blue\style.css

To get a new color swatch in 2.2 and not just have the hex one change to your new style color you have to add two new styles to the manifest.json (as a workaround).

MichaelAugust
Occasional Contributor III

Great, thanks Robert - makes sense, got so far off track on the styles thing that I gave up before adding another one, I will try that.  Do you know which document/JS/html/CSS I would have to edit to actually change the colors of those style swatches themselves? If I could just match that "blue" one to the blue I'm using in our theme that'd be an easy way to make my style swatch too. Thanks so much for your help.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You would just adjust the hex number value in the manifest.json.

0 Kudos
MichaelAugust
Occasional Contributor III

Ah, I see and then the 2nd added one shows up in that color, doh! Thanks again!

0 Kudos