.png)
Based on the CSS directions provided on the Customizing the Search button, I'm trying to use CSS to force the text in the search field to be black (Menu default is white). The field text colour is correct now, but the dropdown of suggestions is only displaying the looking class icon. The text is being displayed – it's visible when you mouse over the suggestion.
Here's the CSS being used:
/* search box */
#quick-search-query {
color: #000000;
}
#quick-nav-drop-down {
color: #000000;
}
#quick-nav-drop-down li {
color: #000000;
}
Update:
I found this CSS worked to set the text colour as desired:
.atb-menu, .atb-menu p, .atb-menu td, .atb-menu th, .atb-menu div, .atb-menu span, .atb-menu div.dynarch-horiz-menu, .atb-menu div.dynarch-horiz-menu table, .atb-menu div.dynarch-horiz-menu table, .atb-menu input, .atb-menu ul li, .atb-menu ol li, .atb-menu select {
color: #000000;
}
Problem is, the CSS above also affects the text colour in the navigation (Home, View, Edit, etc), which is not desired. When I look at the source in Firebug, I see:
<div class="aui-dd-parent quick-nav-drop-down" style="z-index: 2000;"> <div class="aui-dropdown aui-dropdown-left"> <ol> <li class=""> <a class="content-type-page" href="..."><span title="...">...</span></a> </li> </ol> <ol class="last"> <li class=""> <a class="search-for" href="..."><span title="...">...</span></a> </li> </ol> </div> </div>
Comments (8)
Feb 11, 2011
Alain Moran says:
Anchors do not generally inherit their colour setting from the parent element, t...Anchors do not generally inherit their colour setting from the parent element, try this:
#quick-nav-drop-down li a { color: #000000; }NB: I've not tested this, but it's a common solution for similar problems.
Feb 11, 2011
Andrew says:
Applied, no change. Cleared cache, restarted browser.Applied, no change. Cleared cache, restarted browser.
Feb 12, 2011
Alain Moran says:
Another common resolution is to use firebug to locate the css selector that appl...Another common resolution is to use firebug to locate the css selector that applies to the links in the list.
Feb 14, 2011
Andrew says:
I'm using Firebug, but an issue is that Inspect Element is giving me the CSS for...I'm using Firebug, but an issue is that Inspect Element is giving me the CSS for when mousing over the element, and changing "a:hover" to "a" isn't having an effect.
Feb 14, 2011
Alain Moran says:
For detailed investigation of a specific problem a support contract will be requ...For detailed investigation of a specific problem a support contract will be required.
Feb 14, 2011
Sharon Hinde says:
In the latest version of confluence the search dropdown text has a class of 'sea...In the latest version of confluence the search dropdown text has a class of 'search-for' on the link:
I have used that class to target the text and change its colour:
.search-for { color: #FF9A02; }Feb 14, 2011
Andrew says:
Sharon, tried but it doesn't work for meSharon, tried but it doesn't work for me
Feb 14, 2011
Andrew says:
I solved the issue, using: .atb-menu span { color: #000000; }I solved the issue, using:
.atb-menu span { color: #000000; }