You are here:  » Search box and button size change

Support Forum



Search box and button size change

Submitted by elatleta33 on Mon, 2012-01-16 11:38 in

Hi David,

I box to highest and biggest characters

change this but it did not work

default.css

.searchform input {
  font-size: large;
}
.searchform #q {
  width: 300px;
  color: red;
}

I also want to bring the logo to search box

{link saved}

thanks
carlos

Submitted by support on Mon, 2012-01-16 12:04

Hi Carlos,

I think your CSS worked fine but for the search box as q is an ID use #q on its own e.g.

#q {
  width: 300px;
  color: red;
}

Don't forget to do a hard refresh (normally CTRL+F5) after changing CSS to ensure that it is reloaded by the browser.

In terms of the space between your logo and the search box, in the default index.php you will find this code around line 8:

  print "<div style='height:120px;'>&nbsp;</div>";

...simply delete or comment out this line to remove the space...

Cheers,
David.
--
PriceTapestry.com

Submitted by elatleta33 on Mon, 2012-01-16 12:14

Hi david,

thanksssss

everything perfect except for the search button, to make it high and wide?

carlos

Submitted by support on Mon, 2012-01-16 12:46

Hi Carlos,

Because the .searchform div has 2 input elements, the safest thing to do is to give the Search button its own id and then style the id. So in html/searchform.php where you have the following code at line 4:

<input type='submit' value='<?php print translate("Search"); ?>' />

...REPLACE with:

<input type='submit' id='qs' value='<?php print translate("Search"); ?>' />

And then in your CSS:

#qs {
  width: 150px;
  height: 50px;
}

...or as required of course...

Cheers,
David.
--
PriceTapestry.com

Submitted by elatleta33 on Tue, 2012-01-17 17:10

You can check that the code is fine, it does not work

thanks
carlos

Submitted by support on Tue, 2012-01-17 17:18

Hi Carlos,

I just went to your site and used View > Source in my browser but I don't see the changes above in place yet, for example there is no id='qs' tag on the submit button and nor is the style in default.css - could you double check that after making the changes the files have been FTP'd up to your server correctly - that should be all it is...

Cheers,
David.
--
PriceTapestry.com

Submitted by elatleta33 on Tue, 2012-01-17 17:37

actually, not that you saw it off when he did not work.

now again this post.

# qs {
width: 150px;
height: 50px;
}

. qs {
width: 150px;
height: 50px;
}

which of the 2 is right?

Submitted by support on Tue, 2012-01-17 17:43

Hi Carlos,

Ah I wondered if you might have removed it...

In the code in your last reply, there is a SPACE after # which will break the CSS.... it should be:

#qs {
width: 150px;
height: 50px;
}

...that version should work...

Cheers,
David.
--
PriceTapestry.com

Submitted by elatleta33 on Wed, 2012-01-18 10:51

indeed was it, now the next problem, but put 1000 high, being equal

Submitted by support on Wed, 2012-01-18 11:29

Hi Carlos,

I'm not quite sure from your reply which part you want to change to be 1000 (pixels I guess) - if you are still not sure can you describe a little more and I'll point you in the right direction...

Thanks
David.
--
PriceTapestry.com