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:
Any assistance would be greatly appreciated!
Jason
Solved! Go to Solution.
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;
}
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;
}
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?
Jason,
More screenshot would help better. In have not added anything in the css rules I shared to change the text color.
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.
Nope that is fine. Div is a html type and not a class so not will not be green.
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)
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;
}
That did the trick! Specifically
.claro .dijitMenuItem .dijitMenuItemHover td
Much appreciated! Thanks!