1280 Posts in 354 Topics by 487 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1360 Views |
-
Modifying the Site Search layout
21 June 2010 at 9:15pm Last edited: 21 June 2010 9:15pm
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 uglyeg: 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!
-
Re: Modifying the Site Search layout
22 June 2010 at 8:49pm
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 boxYou 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.
-
Re: Modifying the Site Search layout
22 June 2010 at 11:40pm
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.
-
Re: Modifying the Site Search layout
22 June 2010 at 11:59pm Last edited: 23 June 2010 12:01am
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.
-
Re: Modifying the Site Search layout
28 June 2010 at 1:21am Last edited: 28 June 2010 1:29am
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> -
Re: Modifying the Site Search layout
20 July 2010 at 4:07am
Sorry, I missed this latest update - many thanks, I'll take a look at your version too.
| 1360 Views | ||
|
Page:
1
|
Go to Top |
