topic Re: Custom Style color on widget buttons in ArcGIS Web AppBuilder Questions

Custom Style color on widget buttons

LindseyStone — Wed, 28 Jun 2017 14:20:28 GMT

I am using WAB 2.4 and was very excited to see the Set Custom color in the styles. However what I have noticed is when you set your color it changes the apps title bar along with all of your widgets title bars but the buttons within the widgets stay the original color that was predefined, unlike the other color styles it changes the headers and the buttons. What .css changes the color of hover and selection in the widget buttons so it all matches, I'm having a hard time finding the location of where this color is being saved.

Custom Color Selected the title bars all changed, but the Search button on the widget is orange and the selected measure tool is orange.

With a pre-loaded color, the tittle bar all change along with all the buttons.

Re: Custom Style color on widget buttons

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:26:48 GMT

Lindsey,

This is a problem in the eSearch css rules as the custom color setts the main config.json as "yellow".

So in the eSearch css/style.css find:

.JewelryBoxTheme.yellow .jimu-on-screen-widget-panel > .jimu-panel-title,
.FoldableTheme.yellow .jimu-on-screen-widget-panel > .jimu-panel-title,
.TabTheme.yellow .jimu-on-screen-widget-panel > .jimu-panel-title,
.FoldableTheme.yellow .search-btn,
.TabTheme.yellow .search-btn,
.JewelryBoxTheme.yellow .search-btn,
.FoldableTheme.yellow .jimu-draw-box .draw-item.jimu-state-active,
.TabTheme.yellow .jimu-draw-box .draw-item.jimu-state-active,
.JewelryBoxTheme.yellow .jimu-draw-box .draw-item.jimu-state-active,
.JewelryBoxTheme.yellow .esriPopup .titlePane,
.FoldableTheme.yellow .esriPopup .titlePane,
.TabTheme.yellow .esriPopup .titlePane {
  background-color: rgb(208, 125, 14);
  background-color: rgba(208, 125, 14, 1);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and edit the color to your liking.

Re: Custom Style color on widget buttons

LindseyStone — Wed, 05 Jul 2017 19:12:11 GMT

Thanks Robert,

That seemed to do the trick. I also found the same spot in the identify widget to change it. Because if I selected the identify widget it was still yellow and then the Draw widget would go back to yellow.

Re: Custom Style color on widget buttons

RodWoodfordOld — Fri, 20 Apr 2018 00:11:32 GMT

Hi Robert,

I'm using wabd 2.6. Is it possible to change the back ground color of the eserach widget panel when using the DashBoard theme?

cheers

Rod

Re: Custom Style color on widget buttons

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:26:51 GMT

Rod,

There are going to several css rules you have to override in the Dashboard theme. Here are a few of them:

.jimu-tab>.jimu-viewstack {
    background-color: #222;
}

.jimu-tab>.control>.tab {
    background-color: #222;
    border-top: 1px solid #222;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-bottom: 1px solid #666;
}

.jimu-tab>.control>.tab.jimu-state-selected {
    background-color: #222;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #222;
    color: #fff;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍