Skip to end of metadata
Go to start of metadata

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>
  • No labels

8 Comments

  1. 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.

    1. Unknown User (abarnes)

      Applied, no change. Cleared cache, restarted browser.

      1. Another common resolution is to use firebug to locate the css selector that applies to the links in the list.

        1. Unknown User (abarnes)

          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.

          1. For detailed investigation of a specific problem a support contract will be required.

  2. In the latest version of confluence the search dropdown text has a class of 'search-for' on the link:

    <a href="/dosearchsite.action?queryString=cheese" class="search-for">
      <span title="Search for 'cheese'">
        <em>Search for '<strong>cheese</strong>'</em>
      </span>
    </a>
    

    I have used that class to target the text and change its colour:

    .search-for {
        color: #FF9A02;
    }
    
    1. Unknown User (abarnes)

      Sharon, tried but it doesn't work for me (sad)

  3. Unknown User (abarnes)

    I solved the issue, using:

    .atb-menu span { 
      color: #000000;
    }