Customizing the search box

Diana wrote:I'm doing it on my test forum at the minute so... http://test.forumpro.eu/
I want it working properly before I put it on my real forum

Diana wrote:do you need an admin account?

Code:

p.nomargin {
    margin-left: 1000px;
}


Code:

#fa_search_opts {
    background: url(http://i21.servimg.com/u/f21/18/45/41/65/opts_m10.png) 0 0 no-repeat;
    height: 17px;
    position: absolute;
    right: 35px;
    top: 9px;
    width: 16px;
}

Diana wrote:can anyone help me with this?

Diana wrote:

Diana wrote:can anyone help me with this?

Diana wrote:

Diana wrote:

Diana wrote:can anyone help me with this?

Diana wrote:

Diana wrote:

Diana wrote:

Diana wrote:can anyone help me with this?

Code:

/* additional options for the main phpbb3 search bar */
$(function() {
  // language config
  var lang = {
    display_as : '<b>Display results as : </b>',
    posts : 'Posts',
    topics : 'Topics',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Advanced Search</b>',

    options_title : 'Search options'
  },
  search = document.getElementById('search'),
  settings = document.createElement('DIV'),
  opts = document.createElement('A');
 
  if (search) {
    settings.style.display = 'none';
    settings.id = 'fa_search_settings';
 
    // general settings
    settings.innerHTML = '<p>' + lang.display_as + '</p><p><input id="searchOptsPosts" type="radio" name="show_results" value="posts"/><label for="searchOptsPosts">' + lang.posts + '</label><input id="searchOptsTopics" type="radio" name="show_results" value="topics" checked="true"/><label for="searchOptsTopics">' + lang.topics + '</label></p><p><label for="searchOptsTags">' + lang.tags + '</label> <input id="searchOptsTags" type="checkbox" name="is_tag" value="tags"/></p><hr class="dashed"/><p><a href="/search">' + lang.advanced + '</a></p>';

    opts.href = '#';
    opts.title = lang.options_title;
    opts.id = 'fa_search_opts';

    // toggle display state of settings
    opts.onclick = function(e) {
      e.preventDefault();
      var settings = document.getElementById('fa_search_settings');
      settings.style.display = /none/.test(settings.style.display) ? 'block' : 'none';
    };

    // hide settings on search bar focus
    search.search_keywords.onfocus = function() {
      var settings = document.getElementById('fa_search_settings');
      if (!/none/.test(settings.style.display)) settings.style.display = 'none';
    };

    search.appendChild(opts);
    search.appendChild(settings);
  }
});
// par ange tuteur

Code:

/* Main search bar options ( main_search_options JS required ) */
#search { position:relative }

#fa_search_opts {
  height:17px;
  width:16px;
  background:url('http://i21.servimg.com/u/f21/18/45/41/65/opts_m10.png') 0px 0px no-repeat;
  position:absolute;
  top:9px;
  right:35px;
}

#fa_search_opts:hover { background-position:-16px 0px }

#fa_search_settings {
  color:#333;
  text-align:center;
  background:#FFF;
  border:1px solid #DDD;
  border-radius:3px;
  box-shadow:0 3px 9px rgba(0, 0, 0, 0.175); 
  position:absolute;
  top:45px;
  right:0;
  z-index:1;
  padding:3px;
  width:175px;
}

#fa_search_settings:before {
  content:url(http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png);
  position:absolute;
  top:-10px;
  right:32px;
}

#fa_search_settings p { font-size:11px }
#fa_search_settings label {
  padding:0px 6px 0px 3px;
  vertical-align:middle;
  cursor:pointer;
}