topic Re: eSearch widget hover and focus color questions in Web AppBuilder Custom Widgets Questions

eSearch widget hover and focus color questions

JasonStanton__GISP — Fri, 16 Mar 2018 18:47:46 GMT

This may sound silly, but I am trying to figure out the correct code to change the colors of the following in the eSearch widget:

Search expression drop-down (see Capture1.PNG)
Search expression value (when in drop-down mode) as this appears to be different code than above see Capture2.PNG)
The 'highlight' color around the input box of the expression value when it is focused (see Capture3.PNG)

Any assistance would be greatly appreciated!

Jason

Re: eSearch widget hover and focus color questions

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:23:01 GMT

Jason,

That is a lot of dojo dijit theme'ing.

.claro .dijitTextBoxFocused {
  border-color: #5a7b4d !important;
  box-shadow: 0px 0px 5px #5a7b4d;
}

.claro .dijitMenu {
  background-color: #ffffff;
  border: 1px solid #5a7b4d;
}

.claro div.dijitMenuItem.dijitMenuItemHover {
  background-color: #5a7b4d;
  border-top-color: #5a7b4d;
}

.claro .dijitComboBox>div.dijitArrowButton.dijitDownArrowButtonHover {
  background-color: #5a7b4d;
}

.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
.claro .dijitComboBox .dijitDownArrowButtonHover,
.claro .dijitComboBoxFocused .dijitArrowButton {
  background-color: #5a7b4d;
}

.claro .dijitTextBoxHover {
  border-color: #5a7b4d;
  background-color: #c2e5b2;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: eSearch widget hover and focus color questions

JasonStanton__GISP — Mon, 19 Mar 2018 13:57:52 GMT

Robert,

Thanks very much. I am still having one issue, which is the hover for the drop-down related to the search alias. I notice that on lines 11 and 16 above the text is green, but in my CSS it is black. So I'm guessing this is the code that isn't working for me??? Any ideas how to address it?

Re: eSearch widget hover and focus color questions

RobertScheitlin__GISP — Mon, 19 Mar 2018 14:22:26 GMT

Jason,

More screenshot would help better. In have not added anything in the css rules I shared to change the text color.

Re: eSearch widget hover and focus color questions

JasonStanton__GISP — Mon, 19 Mar 2018 14:32:03 GMT

My aplogies for being confusing... I simply mean that when I copy your code into my CSS the word "div" comes through black. I generally associate this as being bad/incorrect.

Re: eSearch widget hover and focus color questions

RobertScheitlin__GISP — Mon, 19 Mar 2018 14:55:52 GMT

Nope that is fine. Div is a html type and not a class so not will not be green.

Re: eSearch widget hover and focus color questions

JasonStanton__GISP — Mon, 19 Mar 2018 15:03:07 GMT

ok, thanks, but after adding the code the hover for the search alias is still grey, while the color for the parcel id drop-down is correct (light blue)

Re: eSearch widget hover and focus color questions

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:23:04 GMT

Jason,

OK here is a more complete set of rules:

.claro .dijitTextBoxFocused,
.claro .dijitValidationTextBoxFocused {
  border-color: #5a7b4d !important;
  box-shadow: 0px 0px 5px #5a7b4d;
}

.claro .dijitSelectFocused,
.claro .dijitSelectFocused .dijitButtonContents,
.claro .dijitTextBoxFocused,
.claro .dijitTextBoxFocused .dijitButtonNode,
.claro .dijitSelectHover,
.claro .dijitSelectHover .dijitButtonContents,
.claro .dijitTextBoxHover,
.claro .dijitTextBoxHover .dijitButtonNode,
.claro .dijitValidationTextBoxHover{
  border-color: #5a7b4d;
}

.claro .dijitMenu {
  background-color: #ffffff;
  border: 1px solid #5a7b4d;
}

.claro div.dijitMenuItem.dijitMenuItemHover,
.claro .dijitMenuItem .dijitMenuItemHover td,
.claro .dijitMenu .dijitMenuItemSelected td {
  background-color: #5a7b4d;
  border-top-color: #5a7b4d;
  border-bottom-color: #5a7b4d;
}

.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
.claro .dijitComboBox .dijitDownArrowButtonHover,
.claro .dijitComboBoxFocused,
.claro .dijitTextBoxFocused .dijitArrowButton {
  background-color: #5a7b4d;
}

.claro .dijitTextBoxHover {
  border-color: #5a7b4d;
  background-color: #c2e5b2;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: eSearch widget hover and focus color questions

JasonStanton__GISP — Mon, 19 Mar 2018 15:51:30 GMT

That did the trick! Specifically

.claro .dijitMenuItem .dijitMenuItemHover td

Much appreciated! Thanks!