Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 General
 Design issues
 Increase Width of Search Box
Author « Topic »  

1234
Ecommerce Template Expert

USA
938 Posts

Posted - 09/18/2022 :  12:19:13  
Is there a way to increase the width of the search box on the top of my pages? I've tried removing the column between the Logo and the search box, but that sort of discombobulated things so I immediately put it back. I also tried editing the properties of the search box and entered a width of 500 which is the max that it would accept, but that didn't seem to change things.

I would like to widen the search box so that it will take up the empty space to the right of the logo. Also if possible, can I increase the height of the search box just a smidge? I purchase my template so long ago that I'm afraid I can no longer remember the name of it, but feel free to have a look at www.usafleetsupply.com

Marshall
Ecommerce Template Guru

USA
1824 Posts

Posted - 09/18/2022 :  13:35:39  
This is the CSS for the search box in the /css/style.css
.topsearchWrap {}
.top_search { position:relative; padding-right:60px; box-sizing:border-box;}
.top_search Input { margin:0px; padding:5px; border:1px solid #cccccc; height:35px; box-sizing:border-box; font-size:12px; color:#999999; font-style:italic; width:100%;}
.top_search Input[type=submit] { position:absolute; right:0px; top:0px; margin:0px; padding:5px; border:1px solid #cccccc; border-left:0px; height:35px; width:60px; cursor:pointer;}
As you can see it is set to 100% wide.

I think what is limiting you is the "size" setting for the box itself.

If you look at your main.dwt, find
<div class="col-5 topsearchWrap">
<div class="top_search">
<form method="post" action="search.asp" id="search_mini_form">
<input type="hidden" name="posted" value="1">
<input type="text" class="search_look" value="" name="stext" id="search" autocomplete="off" placeholder="What are you looking for?" size="500">
<input type="submit" value="Search">
</form>
</div>
</div>
I would suggest either changing the 500 I highlighted in red or simply remove it.

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com

1234
Ecommerce Template Expert

USA
938 Posts

Posted - 09/18/2022 :  14:02:38  
Marshall,

Thanks for the reply. I had actually added the "size=500" in an attempt to widen the box, but it didn't make a difference. The box seems to be limited by the column (I think). When I remove the column between the logo and the search box <div class="col-7">, and have the search box set at "size=500", that looks to widen the box in my editor, but it makes the rest of the page quite cattywampus. I'm not sure what else to try....

midvalleydrifter001
Ecommerce Template Expert

USA
842 Posts

Posted - 09/18/2022 :  15:56:55  
Try this...

In your style.css sheet change the following to

.col-5 {width: 50%} Line 35

.col-7 {width: 50%} Line 37

Patrick

1234
Ecommerce Template Expert

USA
938 Posts

Posted - 09/18/2022 :  16:28:57  
Patrick,

Thank you for that! I ended up changing them to:

.col-5 {width: 90%} Line 35

.col-7 {width: 10%} Line 37

That is what I was looking for. I am now wondering if I might be able to tweak it even more and have the search box more in the center vertically.?
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000