Add a search bar floater to your theme

Printer-friendly send to friend

Today I have added search floater Drupal running. A search floater is the search box to see you up in the upper right corner of this website. By default, when you can turn the search block in Drupal add it on a region. For example it could be added bar left content.However, like to me this very since it to a bunch of room dauert.stattdessen I search box wanted in float in the upper right corner of every page.

It was pretty easy. Here is the code I the page.tpl.php file added

I got this in my main header div. If you notice that I check whether $ Search_box is true.This is true, if the site administrator search field check box, on the theme configuration page (partner portal-> site building-> themes-> configure) has checked.

If the admin select this check box, then we will add a div with ID search floater and then we will the variable $ Search_box printed.This variable contains the correct HTML output, if we display the search box to his same variable that used the search block.

All thats links is to set the styles for our box correctly.This would of course different depending on what theme your using.When I wrote this tutorial I was using a modified version of sky blue theme so I added this to the styles.css file

/ * Top search settings * / # search floater {padding-bottom: 5px; position: relative; float: right; margin-top: 0px; width: 205px; Z-index: 2;}

UPDATE: If you notice now I have a fully themed Search Bar.Es is everything with CSS - as before getan.Der CSS is a little komplizierter.Ich will go into all the details, but the hardest part was always the search button in Firefox and IE.Nach reading this post on the Forum drupal.org was right there a Kinderspiel.Hier is the code I titled the submit button.

had # search # edit - submit {background-color: transparent; border: none; background image: URL (images/search_submit.gif); background-repeat: No. repeat; vertical-align: Center; height: 28px; width: 41px; text-indent: 100px; word spacing: 10em; text-align: right; cursor: pointer; links:-20px;}

View the original article here