search button image clickable

Hi,

how can i get image of the lens in search module clickable?

2 answers

Profile photo of thangnn1510 0.00 $tone January 11, 2011
Public

Dear Altravista!

This is quick solution to get image of the lens in search module clickable:

-- open form.mini.phtml in app\design\frontend\default\jm_limetemplate\catal ogsearch

Find this code:

HTML Code:

<input id="search" type="text" class="input-text" name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" />
<button type="submit" class="form-button"><span><?php echo $this->__('Search') ?></span></button>

Replace with:

HTML Code:

<button type="submit" class="form-button"></button>
<input id="search" type="text" class="input-text" name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" />

-- Open themes.css in skin\frontend\default\jm_lime\css

+ Remove this code:

Code:

#ja-search .form-button {
    display: none;
}

+ Replace this code:

Code:

.form-button-alt, .form-button, .button {
  background: url("../images/icon-search.gif") no-repeat scroll right center #FFFFFF;
  border: 1px solid #E0E0E0;
  color: #353535;
  cursor: pointer;
  float: right;
  font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif !important;
  font-size: 92%;
  overflow: visible;
  padding: 0 5px !important;
  text-align: center;
  vertical-align: middle;
}

By this code:

Code:

.form-button-alt, .form-button, .button {
    border-right: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    color: #353535;
    cursor: pointer;
    padding: 0!important;
    background: url("../images/icon-search.gif") no-repeat scroll right center #FFFFFF;
    float:right;
    width:25px;
    height:27px;
}

+ Replace this code:

Code:

#ja-search .input-text {
    background: url("../images/icon-search.gif") no-repeat scroll right center #FFFFFF;
    border: 1px solid #E0E0E0;
    float: right;
    font-weight: normal;
    padding: 5px 10px;
    vertical-align: middle;
    width: 240px;
}

By this code:

Code:

#ja-search .input-text {
  border-color: #E0E0E0 -moz-use-text-color #E0E0E0 #E0E0E0;
  border-style: solid none solid solid;
  border-width: 1px medium 1px 1px;
  float: right;
  font-weight: normal;
  padding: 5px 10px;
  vertical-align: middle;
  width: 210px;
}

Good luck!

#1

This question is now closed

Written By

Comments