Custom Style color on widget buttons

1458
4
Jump to solution
06-28-2017 07:20 AM
LindseyStone
Occasional Contributor II

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.

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
LindseyStone
Occasional Contributor II

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.

0 Kudos
RodWoodford
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
}