PDA

View Full Version : search box size and color


1vic
04-28-2007, 07:52 PM
Hello everyone,
I was wondering if anybody knows how I could change the search box size and color, maybe making it transparent. Either way would work for me.
I know I can adjust the width of the box but I am interested in changing height of it to 16px.
Any help would be appreciated!
:grin:

Andromeda
04-28-2007, 09:24 PM
Can we see some code please.

1vic
04-28-2007, 10:36 PM
Hey, Andromeda
Thanks for replying.
I've been told that I cannot directly change the code.
It has to be done with CSS.
I have to make a transparent search box 16px in height.
Here is the code I am working on:

<form onsubmit="javascript: showBusyLayer()" method="post" action=''>
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />

<th scope="col"><table width="100%" height="16" bgcolor="#B5CACD" border="0" cellspacing="0" cellpadding="0">

<tr>
<th scope="col"><img src="images/search_left.gif" width="43" height="16" /></th>
<th scope="col"><input name="story" type="text" class="s_field" style="width:120px" /></th>
<th scope="col"><input type="image" style="width:37px; height:16px border:0" src="images/search_go.gif" alt="Enter" /></th>
</tr>
</table>
<table width="203" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><img src="images/search_ext.gif" alt="Extended search" width="203" height="21" /></th>
</tr>
</table></th></form>

Andromeda
04-29-2007, 02:41 AM
I don't know much about forms but after playing around with a few things this seems to work:


<form onsubmit="javascript: showBusyLayer()" method="post" action=''>
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />

<th scope="col"><table width="100%" height="16" bgcolor="#B5CACD" border="0" cellspacing="0" cellpadding="0">

<tr>
<th scope="col"><img src="images/search_left.gif" width="43" height="16" /></th>
<th scope="col"><input name="story" type="text" class="s_field" style="width:120px" height="16px"/></th>
<th scope="col"><input type="image" style="width:37px; height:16px border:0" src="images/search_go.gif" alt="Enter" /></th>
</tr>
</table>
<table width="203" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><img src="images/search_ext.gif" alt="Extended search" width="203" height="21" /></th>
</tr>
</table></th></form>

My addition in red. This is one way to do it but probably a better way would be to change the css. As for the transparent search box - if it's transparent - what's behind it? A background image? A different colour? Also, not sure if you need the forward slash I highlighted in green????

1vic
04-29-2007, 04:55 PM
Hey Andromeda,
Thank you for you time.
I have tried the solution you are offering and it didn't work.
The box is still 5px larger than I need.
Here is what I got:
|
http://images.musicbizindex.com/search_02.jpg
and that's what I need:
|
http://images.musicbizindex.com/search_01.jpg

Any other ideas would be greatly appreciated!
:)

Andromeda
04-29-2007, 08:36 PM
Can you show all of your html and all of your css please.

domedia
04-30-2007, 01:59 PM
Try to remove the inline CSS from your HTML, and move it to your stylesheet:

HTML:
<th scope="col"><input name="story" type="text" class="s_field" /></th>

CSS:
.s_field {
background-color: #B6C9CD;
border: 1px solid #829599;
font-size: 10px;
height: 13px;
width:120px;
}

Adjust til it fits you right.