restyle search module

[Fashionist]

I'd like to have a search bar style like this:

 

 

How can I do???

[vekia]

with css styles of course

just use these styles for search block button

#search_block_top .btn.button-search {
background: #FFF;
display: block;
position: absolute;
top: 0;
right: 0;
color: #c0c0c0;
width: 50px;
text-align: center;
padding: 10px 0 9px 0;
border: 1px solid #d6d4d4;
border-left: 0px;
background: #fbfbfb;
}

you can find original styles in: themes/default-bootstrap/css/modules/blocksearch/blocksearch.css

replace it with code that i pasted above

 

effect:

[Fashionist]

I don't have that variable in my code Vekia  (#search_block_top .btn.button-search). I have this in the blocksearch.css:

 

#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
  #search_block_top #search_query_top {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: #fbfbfb;
    margin-right: 1px; }

.ac_results {
  background: white;
  border: 1px solid #d6d4d4;
  width: 271px;
  margin-top: -1px; }
  .ac_results li {
    padding: 0 10px;
    font-weight: normal;
    color: #686666;
    font-size: 13px;
    line-height: 22px; }
    .ac_results li.ac_odd {
      background: white; }
    .ac_results li:hover, .ac_results li.ac_over {
      background: #fbfbfb; }

form#searchbox {
  position: relative; }
  form#searchbox label {
    color: #333333; }
  form#searchbox input#search_query_block {
    margin-right: 10px;
    max-width: 222px;
    margin-bottom: 10px;
    display: inline-block;
    float: left; }
  form#searchbox .button.button-small {
    float: left; }
    form#searchbox .button.button-small i {
      margin-right: 0; }

[vekia]

i checked several your old posts to search url to your website

i can't find it anymore so... can you provide me url again?

[Fashionist]

I have send it in private message

[vekia]

in your module css file use this:

#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
  #search_block_top .btn.button-search {
    background: #333333;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: white;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    #search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }
    #search_block_top .btn.button-search:hover {
      color: #6f6f6f; }
  #search_block_top #search_query_top {
    display: inline;
    padding: 0 13px;
    height: 45px;
    line-height: 45px;
    background: #fbfbfb;
    margin-right: 1px; }

.ac_results {
  background: white;
  border: 1px solid #d6d4d4;
  width: 271px;
  margin-top: -1px; }
  .ac_results li {
    padding: 0 10px;
    font-weight: normal;
    color: #686666;
    font-size: 13px;
    line-height: 22px; }
    .ac_results li.ac_odd {
      background: white; }
    .ac_results li:hover, .ac_results li.ac_over {
      background: #fbfbfb; }

form#searchbox {
  position: relative; }
  form#searchbox label {
    color: #333333; }
  form#searchbox input#search_query_block {
    margin-right: 10px;
    max-width: 222px;
    margin-bottom: 10px;
    display: inline-block;
    float: left; }
  form#searchbox .button.button-small {
    float: left; }
    form#searchbox .button.button-small i {
      margin-right: 0; }
#search_block_top .btn.button-search {
background: #FFF;
display: block;
position: absolute;
top: 0;
right: 0;
color: #c0c0c0;
width: 50px;
text-align: center;
padding: 10px 0 9px 0;
border: 1px solid #d6d4d4;
border-left: 0px;
background: #fbfbfb;
}

instead of code that you use at the moment

 

 

file: /themes/YOURTHEME/css/modules/blocksearch/blocksearch.css

[Fashionist]

now the result is this:

 

Edited May 12, 2014 by Fashionist (see edit history)

[vekia]

we are one step closer!

 

for the first, its necessary to decrease width of block

so, open module .tpl fule and change

<div id="search_block_top" class="col-sm-4 clearfix">

to:

<div id="search_block_top" class="col-sm-3 clearfix">

and in bloksearch.css use:

.search_query {
width:100%:
}

effect:

[Fashionist]

I don't have this Vekia:

 

.search_query {
width:100%:
}

 

 

My blocksearch.css is:

#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
  #search_block_top .btn.button-search {
    background: #333333;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: white;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    #search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }
    #search_block_top .btn.button-search:hover {
      color: #6f6f6f; }
  #search_block_top #search_query_top {
    display: inline;
    padding: 0 13px;
    height: 45px;
    line-height: 45px;
    background: #fbfbfb;
    margin-right: 1px; }

.ac_results {
  background: white;
  border: 1px solid #d6d4d4;
  width: 271px;
  margin-top: -1px; }
  .ac_results li {
    padding: 0 10px;
    font-weight: normal;
    color: #686666;
    font-size: 13px;
    line-height: 22px; }
    .ac_results li.ac_odd {
      background: white; }
    .ac_results li:hover, .ac_results li.ac_over {
      background: #fbfbfb; }

form#searchbox {
  position: relative; }
  form#searchbox label {
    color: #333333; }
  form#searchbox input#search_query_block {
    margin-right: 10px;
    max-width: 222px;
    margin-bottom: 10px;
    display: inline-block;
    float: left; }
  form#searchbox .button.button-small {
    float: left; }
    form#searchbox .button.button-small i {
      margin-right: 0; }
#search_block_top .btn.button-search {
background: #FFF;
display: block;
position: absolute;
top: 0;
right: 0;
color: #c0c0c0;
width: 50px;
text-align: center;
padding: 10px 0 9px 0;
border: 1px solid #d6d4d4;
border-left: 0px;
background: #fbfbfb;
}

[vekia]

yes you don't have it, so paste it there, and you will have it

[Fashionist]

it's the same Vekia 

[vekia]

ohhh my bad, after width:100% there is a colon ";"

of course semicolon should be there:

 

width:100%; instead of width:100%:

[Fashionist]

yeahhhh great Vekia! Fix it

 

Now remain only a thing: the blue border on the right of the box.

 

Image:

 

[vekia]

oops my ip changed (i've got dynamic ip) i can't access anymore

[Fashionist]

give me in pvt

[halmeida]

Hello, using this thread to avoid a new topic, i also need help. 

 

I activated the nativa search box, on the main menu. But i need it to have a button with the search symbol as in the above examples.

 

here is a print of my store still in development.

 

Thanks for the help.

 

Image

[vekia]

hello i dont see any link / attachment

[halmeida]

hello i dont see any link / attachment

Maybe i didn't explain well, what i mean is that i need to put the magnifying glass symbol in a button, at the right of the box. Is it possible?

 

The idea is to make the search box i have a bit like the others mentioned on this post.

[vekia]

blocktopmenu.tpl

{if $MENU != ''}
	<!-- Menu -->
	<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
		<div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
		<ul class="sf-menu clearfix menu-content">
			{$MENU}
			{if $MENU_SEARCH}
				<li class="sf-search noBack" style="float:right">
					<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
						<p>
							<input type="hidden" name="controller" value="search" />
							<input type="hidden" value="position" name="orderby"/>
							<input type="hidden" value="desc" name="orderway"/>
							<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
                            <button type="submit" name="submit_search" class="btn btn-default button-search">
                    			<span>Search</span>
                    		</button>
						</p>
					</form>
				</li>
			{/if}
		</ul>
	</div>
	<!--/ Menu -->
{/if}

and at the end of superfish modified.css add:

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    margin-right:0px;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }


.sf-menu button {
background: #333333;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: white;
width: 50px;
text-align: center;
padding: 5px 0 6px 0;
margin-top:13px;
}

.sf-menu button span{
    display:none;
}

.sf-menu button:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 13px;
width: 100%;
text-align: center;
}

effects:

[halmeida]

Oh nice, i'll try it and give some feedback.

[halmeida]

Oh nice, i'll try it and give some feedback.

 

Hey im back. First of all, thanks it works like a charm!

 

Only one more question:

where do i go if i need a 10px gap between the button and the right margin of the menu?

 

 

Been trying with firebug on firefox, but not getting the optimum result.

 

 

PS: I think my button is over my search and not on the side... 

Edited August 7, 2014 by halmeida (see edit history)

[vekia]

and it is possible to see your website with modifications ?