By tanner01 on

I have a web site that's a complete custom design that's already got complete HTML/CSS written for it. I'm now trying to convert/slice it so that I can integrate it into Drupal for managing the content on the site. One area of Drupal theme customization I'm having problems with is the look of the Search form block. What's the best way of customizing the look of it?

⋅ Categories: Drupal 4.7.x

Comments

markdingemanse’s picture

markdingemanse commented

Are you aware of this topic?
Also, see the search_config module.

Drupal's search form has many classes which you can target in your CSS. What you would need to do is look at the search page HTML as produced by Drupal, and see what classes there are. Then you can apply styling to these classes. On a recent site I used the following CSS to style the search form and search results:

form#search_form {
	float:left;
	width:290px;
	margin:0 0 110px 24px;
	display:inline; /* IE doubled-float margin bug */
}
#search_form .form-item {
	margin:0;
	padding:0;
}
#search_form label {
	font-weight:normal;
	font-size:11px;
	color:#336699;
	margin-bottom:2px;
}
#search_form .form-item .form-item {
	display:block;
}
#search_form .form-submit {
	margin-top:10px;
}
#search_form .search-advanced {
	font-size:11px;
	margin-top:10px;
}
#search_form .search-advanced legend a {
	padding-left:15px;
	margin-left:-3px;
}
#search_form .search-advanced label {
	margin-top:10px;
}
.search-advanced .form-checkbox {
	margin-top:4px;
}

dl.search-results {
	font-size:11px;
	line-height:16px;
}
.search-results dt {
	font-size:11px;
	margin-bottom:3px;
}
.search-results dd {
	margin-left:14px;
}
.search-results dd strong {
	font-weight:bold;
}
.search-results dd p.url {
	font-family:"Courier New", Courier, monospace;
	font-size:11px;
}
#zoeken .field-field-rechterkant ul {
	margin-right:24px;
}

Hope this helps!

dman’s picture

dman commented

In your theme template.php, override the appropriate theme_*() function.
A real-life example I did last week:

Overrides the default theme_search_block() from search.module - refactoring the form slightly just before it gets displayed. This eg just tweaks the usual form API to add a few CSS classes and IDs, but here also is where you would be able to output your own HTML if you want.

solarsmarter_2006/template.php

/**
 * Theme the block search form.
 * A theme hook
 * Modify the seach element properties to match rebeccas model
 */
function solarsmarter_2006_search_block_form($form) {
  $form['search_block_form_keys']['#title']="search";
  $form['search_block_form_keys']['#id']="searchterm";
  $form['search_block_form_keys']['#attributes'] = array(
  	'class' => "formterm",
  	'accesskey' => "3",
	);
  $form['submit']['#attributes']['class']="search-submit";
  $form['submit']['#value']="Search";
  return form_render($form);	
  /* 
   * This is still a button, made an image via css, not HTML
   * @see http://drupal.org/node/51526
   * 
   */
}

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards