By slingeraap on

Hello,

I want to restyle the output of the standard search module. That output is now:

Search

[inputbox] [textbutton]

What I want to have is this:

[inputbox styled with CSS] [image button]

So I would need to delete the word Search and the linebreak, style the input box with CSS and use a button which is an image instead of the text button.

Any help on this would be very much appreciated.

⋅ Categories: Drupal 4.7.x

Comments

creazion_dev’s picture

creazion_dev commented

Hi slingeraap,

add these lines to your template.php

function phptemplate_search_block_form($form) {
  return _phptemplate_callback('search_block_form');
}

and create a new file with the name search_block_form.tpl.php and put these lines in

<div>
  <div id="search" class="container-inline">
    <div class="form-item">
      <input type="text" maxlength="128" name="edit[search_block_form_keys]" id="edit-search_block_form_keys"  size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
    </div>
    <input type="submit" name="op" value="Search" id="search_glass" class="form-submit" /> 
    <input type="hidden" name="edit[form_id]" id="edit-form_id" value="search_block_form"  />
  </div>
</div>

You can find an example on www.happy-faces.de where i use it for my own.

---------------------------------------------
last projects: www.happy-faces.de - www.3p-consulting.com

slingeraap’s picture

slingeraap commented

Thank you very much for your quick reply.

First I got an an error, but when removing the php begin and end tag, it worked!

But I wonder, how do things like this work in Drupal? For each function you would like to restyle you must place it in template.php? And then place the code for that function you would see normaly (when you do view source in your browser) in a php template file (like you said search_block_form.tpl.php), and then modify that template to get your own style? Then the only thing to know is how do you know how a block or function is called, because then you can overrule any output as long as you make extra templates?

I looked at your site, it looks very, very nice! And your searchbox with the mouseover especially! :-)

slingeraap’s picture

slingeraap commented

Well, I celebrated to early. I could style the searchbox now, but the text SEARCH with the blank line still is visible. I think I have to get rid off the H2. I guess in your site that is Suchen. BUt how?

slingeraap’s picture

slingeraap commented

I found the solution: in my css file, I inserted the following lines:

#block-search-0 h2.title {
display: none;
}

Now the text Search and the blank line are gone :-)

toma’s picture

toma commented

nice work, by the way happy-faces one of my favorite drupal based site

---
All Google Blogs in one place
http://www.googledemo.org

slingeraap’s picture

slingeraap commented

Which version of Drupal are you using, 4.7.2?

I'm using 4.7.2 but I'm not able to style my site with CSS so nice as your site. Looks like many things of my stylesheet.css are later overruled by Drupal.

Are you sure about the beginning and end php brackets in your code for search_block_form.tpl.php? If I use them I get an error...

creazion_dev’s picture

creazion_dev commented

Sorry slingeraap, this was a mistake. Don't use the php brackets and it should work. :)

At happy-faces.de I disabled the drupal.css but after I finished the site I wasn't glad to have done this because some standard formatings become a little bit ugly. Now I ever use the drupal.css and overwrite the standard rules with my own css styles.

Let me know if you have some trouble with formating your site eventually I can help you. :D

---------------------------------------------
last projects: www.happy-faces.de - www.3p-consulting.com

slingeraap’s picture

slingeraap commented

Thanks for your reply.

My search was in a block and was hard to style. But I did a clean install of Drupal. And after that, I noticed that I didn't have a template.php anymore. But I was finally able to restyle the search output with my own CSS.

#search .form-text{
}

#search .form-submit{
background-image: url('images/arrowwhite.gif');
};

And with this no need to convert the submit text to a submit image button, CSS does it all the way :-)

Thanks for your tips! And I will remember your website in case I ever have to hire you :-)

markpetherbridge’s picture

markpetherbridge commented

I cannot seem to get this to work! And I have tried several options. :'(
It just doesn't work!