Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.


Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Modifying the Site Search layout


6 Posts   1658 Views


21 June 2010 at 9:15pm (Last edited: 21 June 2010 9:15pm), Community Member, 33 Posts


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: [url][/url] (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!


22 June 2010 at 8:49pm Forum Moderator, 5511 Posts

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 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


22 June 2010 at 11:40pm Community Member, 33 Posts

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.


22 June 2010 at 11:59pm (Last edited: 23 June 2010 12:01am), Community Member, 33 Posts

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:

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.


28 June 2010 at 1:21am (Last edited: 28 June 2010 1:29am), Community Member, 81 Posts

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"] {
            padding: 0 0 0 20px !important;
            cursor: pointer;
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>


20 July 2010 at 4:07am Community Member, 33 Posts

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