Hi,

I'm having some issues with modifying the way that the Site search box looks on my site. What I basically want is something very similar to this site: http://www.ktponline.org.uk/ (which is an aspx site)

I have amended the CSS so that the text box is using the right attributes (colour, font, border, etc), but have the following issues which I can't figure out:

- I can't get a label to show at the right place
- My submit button is always on a new line, I can't get it to the right of the search box
- I can't figure out how to change the button type to be an image submit button rather than a standard submit button. Specifying a background-image for the button ID simply super-imposes the image over the button, which is ugly

eg: I can't figure out where the submit button is being added to the form, so cannot override it, nor how to get around the middlecolumn class being wrapped around the search fields thus causing the submit button onto a new line.

My forte really is not front end CSS stuff (I'm more of a back-end developer than a UI one), so I am hoping that the answer to these questions is simple and that somebody can help me out.

If you can, then thanks in advance - you'll be saving my sanity!

All of those are CSS issues which depends on how you have structured your theme so a link to it would be useful. By default form styles are in themes/blackcandy/css/form.css

- Can't get the label to show at the right place
- My submit button is always on a new line, I can't get it to the right of the search box

You will need to either position the elements via the position tag or float the elements see http://www.barelyfitz.com/screencast/html-training/css/positioning/ for a run down of how positioning elements via css works.

- I can't figure out how to change the button type to be an image submit button

You should simply be able to use a background property in the CSS. You will then also need to remove the borders and get rid of the text on the button. Removing borders is easy (border: none;) but removing text is a bit tricky - a couple tricks online http://css-tricks.com/snippets/css/remove-button-text-in-ie7/ http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution.

Hi Will

Thanks for the CSS pointers. I generally have no problem with positioning - it's just this one set of elements (search) that for some reason foxed me.

Thanks also for the tips re the button - that's very useful.

Got the button fixed using a combination of the two links you supplied. For anyone else interested, I used the CSS from the first link and added the width and height attributes (changed to my own image dimensions) from the drupal link, along with the background position values.

For some reason, I could not use the shorthand 1-liner version for background, I had to use three attributes on separate lines, namely background-image, background-repeat and background-position. Doing it as I normally would on one line gave me a blank image on FF/Mac

Here is the full CSS to change a submit button to a graphic button, as used on my site:

#SearchForm_SearchForm_action_results{
    background-image: url('/assets/search_go.gif');
    background-repeat: no-repeat;
    background-position: left top;
    width: 25px;
    height: 25px;
    border: none;
    text-indent: -9000px; /* to hide the text */
    text-transform: capitalize; /* removes the text - capitalise needed for IE7. possibly other versions too */
}

Anyway, thanks again for your help.

Here is my solution, try urs in Opera 8.5 and later, also if u'll made ur own search form it will have different id:

..
			#Search input[type="submit"] {
				position:absolute;
				display:block;
				top:0;
				right:0;
				background-image:url('../images/searchBtn.png');
				width:20px;
				height:18px;
				padding: 0 0 0 20px !important;
				color:transparent;
				overflow:hidden;
				cursor: pointer;
				font-size:0;
				line-height:0;
			}
html:first-child #search input[type="text"] {height:18px;} /* exception Opera<9.5 (miss dependence between line-height, font-size and input height) */
...
<div id='Search'>$SearchForm</div>

Sorry, I missed this latest update - many thanks, I'll take a look at your version too.