{Solved} Change Search button issue

[Antony121]

Hello all, I have been wracking my head for hours now searching through the css and tpl for a resolution to this issue. I managed to change the images for the search field without problem, however, there seems to be some inherited aspect that is throwing me off. For some reason there appears to be some other type of text that shows up under it in a different font and a different color than the image that i uploaded and it is throwing the overall look of the button way off. I have tried to trace it down and the best i can deduce is that it comes from somewhere else and is text code and color code but i cannot figure out where nor why it would be visible over an image. i have hit the proverbial wall on this so if anyone has a clue as to what i am talking about any help would be appreciated.

Edited November 5, 2012 by Antony121 (see edit history)

[yaniv14]

Can u send a link to your site so we can see the problem

[Antony121]

Hello here is the image in question and thank you for your time and response. What i am finding out as i attempt to use chrome and firebug is that it appears that there is some type of input.button behind my image file that is coming through and I am not sure in what location to change this/ remove the image txt etc... I am not really too familiar with input.button function and coding, so if this bit of information seems logical to you please enlighten me:)

 

Edited November 2, 2012 by Antony121 (see edit history)

[yaniv14]

It's hard to see with the image you attached, try to paste the code of the search.

If you are using the search block module that comes with prestashop, than you can edit blocksearch-top.tpl.

The text "Search" is located at "value={1 s='Search' mod='blocksearch'} and the background is called at class="button".

the button class is in blocksearch.css:

 

 

#search_block_top .button {

border:none;

border-radius:0;

color:#fff;

text-transform:uppercase;

background:url(img/bg_search_submit.png) repeat-x 0 0 #101010;

float: left;

height: 25px;

}

 

as you can see the background is an img (bg_search_submit.png), also try to change your background to something without text only background and the text that you want inside the box

just add in the value (Search, Go, etc...).

also check the global.css for more button styles at around line 129 /*buttons *****

 

Again to help you more please paste the code for the problem.

[Antony121]

Hello and thank you for your help. Here is the code that i messed with;

 

 

/* block top search */

#search_block_top {

position:right;

top:44px;

left:0;

}

#search_block_top p {padding:0;}

#search_block_top #search_query_top {

padding: px;

height:25px;

width:154px;/* 310 */

border:none;

border-right: none !important;

color:#fff;

background:url(img/bg_search_input.png) ;

float: right;

}

 

#search_block_top .button {

border:none;

border-radius:0;

background:url(img/bg_search_submit.png);

float: right;

 

}

 

I changed the files renamed the images etc... and loaded it all to server to match my bg image etc... however tehre is clearly another txt showing up that is inherited from soemwhere so i I change the button to be only a background and then find the source of this txt and change the color perhaps that will work here is a larger image that may be better to see the issue, image button has white search which is what i want and what is showing behind it almnost mixed with it is black text which is driving me nutes,

[yaniv14]

The white text (SEARCH) is part of your background image? or it's the value={1 s='Search' mod='blocksearch'} inside the TPL file?

Also when u make changes to the template make sure you have Force Compile on in the back office (Advanced Parameters/Performance)

[Antony121]

the white text is part of the image file bg.

[yaniv14]

So, just make the background image without the text and use the value text (like the black you see in the background) to show word Search and make some css changes that u want (color, font-size, etc....)

OR leave it the way it is and remove the word search from the input field in the TPL file

[Antony121]

thanks that sorted it out I simply removed it and it worked perfectly. I was wondering now if there was a way to create a hover over the image button in order to differentiate from in use and not used?

[Antony121]

Oh also the box does not want to slide all the way over to the right have any idea on how to move it just a smidge

[yaniv14]

Yes, just add in the css:

#search_block_top .button:hover {PUT WHATEVER YOU WANT}

 

for the second question I guess you can add margin or padding.

 

It's hard to answer that question without seeing your website. why don't you put your site on your server in a temporary folder in case you site is not ready, and just post a link to it.

 

It will be much easier to help you.

Edited November 3, 2012 by yaniv14 (see edit history)

[Antony121]

ok ill set that up tonight and pm you the link.

 

Thanks so much