How to customize your header search field to be centered?

Some use cases of XWiki can benefit from a centered search field in the header. However, this does not benefit all instances, so this feature is not included in XWiki standard. Here is a short description on how to customize your own wiki to have this centered search.

1. Edit the objects of the page XWiki.QuickSearchUIX to remove the "hiding input" logic
   1. Update the default template of the Search in the content of the UIExtensionClass object:
      1. Remove the globalsearch-close class from the form.
      2. Remove the aria-expanded='false' attribute from the button.
      3. Remove the disabled attribute from the input.
         
         You should end up with something similar to:
         <form class='navbar-form globalsearch form-inline' id='globalsearch' action='$searchURL' role='search'>
           <label class='hidden' for='headerglobalsearchinput'>$services.localization.render('search')</label>
           <button type='submit' class='btn' title="$services.localization.render('search')">$services.icon.renderHTML('search')</button>
           <input type='text' name='text' placeholder="$services.localization.render('panels.search.inputText')" id='headerglobalsearchinput' />
         </form>
   2. Replace the event listeners in the JavascriptExtension object.
      1. Update the search button click . You should simplify it to remove any call to the showSearchInput and hideSearchInput functions. The listener should look like this after your changes:
         globalSearchButton.on('click', function() {return globalSearchInput.val().length > 0});
      2. Update the focusout event listener and replace the call to hideSearchInput with a simple fire of the event used to close the suggestion dropdown. The listener should look like this after your changes
   3.