Custom Search Submit Button ?? Why is this seem impossible? CORE DEVELOPERS ANSWER PLEASE
Greetings,
I am new to drupal and have 4.7 installed and running on a dedicated Enterprise Red Hat 4 box. I am building a custom theme from the ground up and cannot... ( and yes I have done the due diligence of reading all the related posts) find a way to use an image for the search box submit button. I did find one post that listed some code http://drupal.org/node/62647 for adding to the template.php file which did change the search submit button but then I found that it causes drupal to fail to be able to post any data other than search!! Fun stuff...
Are there any core developers out there that can address this issue? I see it posted over and over again with no real answer given.
Please note I am a big drupal fan so far and am very impressed with the app. I am moving our corporate site over to Drupal from Joomla happily. Just need a solid answer on this so I can wrap up my template.
Kind Regards,
Jeffrey
You do not need to touch core, Here is how to do it using CSS
I do not think that you need to modify anything in the PHP section of Drupal to adjust your buttons.
Use CSS to modify the look of your search burrin including the use of an image in place of the HTML button.
As you can see here in the header http://www.cmsproducer.com/corporate-wcms-web-content-management-system-...
We have modified the icon using CSS and that also allows you to refer to the button and modify and existing style selector, or create a new one that points to the existing button.
If you view the source of your search page, you will see that the icon is covered byt he CSS class
form-submit
You can find the CSS styling for that class or create CSS styling for it and modify it as you wish - (CSS enables you to modify all the presentation).
Let me know if you need help in this or any other issues in creating a corporate template for your website. Drupal is light-years away from Mambo (biased opinion), but really, it's flexible and powerful.
-----
iDonny - Web Content Management System Design, Development. & CRM
Still seeking response from CORE DEVELOPERS
I understand CSS can be used but with form submit buttons there seems to be no cross browser solution. What I am seeking with this post is some guidance from the CORE DEVELOPERS on how to skin this element of Drupal and actually override the element to add a button image. I see the Onion folks have done this on thier site so anyone that knows how they did it?
Thank you for your help though.
Use CSS and All Capitals Will Deter
The solution is not something the core development team will assist with. If you look at what the Onion did, they used basic xHTML and CSS to change the button. There is no magic to it aside from that and it is a cross browser solution.
You could also check out this handbook page:
http://drupal.org/node/45295
May not be exactly what you are looking for, but it will be able to point you in one possible direction.
---
Shane Birley
Vicious Bunny Creative
http://www.vbcreative.com
about the onion
they have not used CSS for the styling of the search 'Go' button.
They have:
<input type="image" src="themes/onion/assets/buttons/go.gif" alt="Go" />(note: type="image" instead of type="submit")
which is not (x)html generated by the default Drupal form_render($form) for the search box.
Get your facts straight first.
Wow. Nice attitude.
---
Shane Birley
Vicious Bunny Creative
http://www.vbcreative.com
Left Right Minds
http://www.leftrightminds.com
ShanesWorld.ca
http://www.shanesworld.ca
Opinion: Branding Drupal
Bear in mind that this is my opinion in-case you strongly disagree
Core developers mainly build the engine or Drupal infrastructure/framework and it's up-to the rest of us to create modules, customisation and branding (themes etc). The nature of this request seems to relate to branding/theming. The way a given HTML element behaves or looks is in the hands of the theme creator and all that the developers have to do is manage the movement of data and triggers from the from DOM element. Whether one uses a blue or grey button, CSS or XHTML/XSL/XSLT etc to handle the manipulation and presentation of information in the front-end is something that's not 'one size fits all'. It is my thought that to support Drupal, one should and must be Web standards compliant and that implies supporting CSS, the best method to brand Drupal websites. User's who do not support CSS have bigger things to worry about than the colour of a submit button - the entire Drupal theme will collapse into successive DIV/SPAN/P elements (not a bad thing), but the colour of a button will just be one of the presentational elements that will not be controllable at that point.
Since Drupal is written in PHP, you can always customize the core if you wish (although that would make upgrades a nightmare let alone the idea of creating a Drupal fork that you single-handedly have to support)
I agree with you that branding and theming is important (presentation is almost everything), and as Dries said in yesterday's World-wide Teleconference http://drupal.org/node/64055 , usability and ease of theming is in the future of Drupal. Let me know if I am misunderstanding your objective and if we can team-up in any way to find the solution.
-----
iDonny - Web Content Management System Design, Development. & CRM
Do a view source
This is a theme level issue. You don't need to hack core, add template files, or any other craziness. I did a view source on this page, here is the HTML for the search:
<form action="/node/65372" method="post" id="search_theme_form"><div><div id="search"><div class="wrap"><div class="form-item">
<input type="text" maxlength="128" name="edit[search_theme_form_keys]" id="edit-search_theme_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" class="form-submit" />
<input type="hidden" name="edit[form_id]" id="edit-form_id" value="search_theme_form" />
</div></div>
</div></form>
Just paste it into your theme and style it or change the HTML or do whatever you need with it.
And as Shane started to say, less with the shouting in ALL CAPS please.
are you sure this works?
The original poster is a bit loud, but I think there might be an issue underneath all the shouting.
I tried copying and pasting the html from a search form, changing it have an input type="image" (instead of type="submit") and it doesn't seem to work.
Trying to theme in phptemplate, leaves you with a form_render($form) function, which actually isn't very themable.
Actually, I tried copying the html from a search submit form, pasted it in a block without any changes, and guess what? It doesn't work! Perhaps not as simple as you presume.
ID and names must match
If you are copying the source of a form and trying to make it work elsewhere, the system is sensitive to the ID and name values of the form fields and will not work unless they are set right.
Let me know if you need help troubleshooting this.
-----
iDonny - Web Content Management System Design, Development. & CRM
OK, I found a useful link
There is usually an answer somewhere in the depths of drupal.org, although finding it is sometimes an issue :)
HOWTO: Create image submit button
http://drupal.org/node/62647
hope that helps.
oops!!
that was the original link in the post! So not much help then.
OK, I verify there is a problem. I'll post back if I work something out.
Workaround found...
Well folks,
I was the "loud" poster who started this thread and didnt mean to make it "yelling". I was really just hoping that of of the core fellows would see the post because this is an issue in the core as far as can be told.
I was trying to ask for one of thier insights because I have seen this same type of thread over and over again in the research I did into a solution. This thread has now illustrated my point because the posts lead back to the original post I referenced above :)
Anywho... I found a solution similar to the one metioned above where I take the rendered output of the html from drupals search box after it is called in the template and I replace the search call with the rendered html in my template. Then I can change the submit button html to a graphic image button. All the rest of the hooooey listed does not work and leads in endless cycles to old posts that dont apply to the new 4.7 version...
What does seem to be right is that the overrides for the search box submit button are missing/dont work and this is a practical work around. Sorry about the ALL CAPS... i should have just put some arrows *****Look Here**** or something. ;)
Much love.. .Drupal rocks... and all that.
OK, Some of us consider this hoooey 'free product support'
Actually, pulling the source, editing it and posting it within a node or in a template works every time - look at the top-tight search box on my website...
Also, using CSS to modify existing objects works every time... I think the differences in approach are a matter of preference... No one method is superior - Keep Web Standards in mind as you invent and apply solutions.
-----
iDonny - Web Content Management System Design, Development. & CRM
Not elegant, not "best-practice" - but it works...
I too have been pulling out my hair on the input type=image issue. I read all the posts. I added the hook_element and theme_imagebutton functions, and the proper form snippet to create my input type=image. And it worked!... in Firefox. In IE, which is still ~80% of our user base, it just sat there. Well actually, the page reloaded but the search keys were not passed so basically - it just sat there.
As I understand it, where as Mozilla passes the value of an input of type image (along with it's X and Y coordinates), IE does not, it only passes the X and Y coordinates of the image that was clicked. Since drupal was looking to see if isset($form['#submit']) to determine the value of $form_submitted - it couldn't happen in IE. To make it work for IE I had to hack the core. Yes, I know that's not a great solution. But it had to work. And it had to work NOW. I had no choice.
I added one line of code to drupal_get_form() in form.inc. Right below the line
$form = form_builder($form_id, $form);I added a check for the .x portion of the submit button (note PHP turns the '.' into a '_')
if (isset($_POST['op_x'])) { $form_submitted = TRUE; }Drupal shouldn't have to take up IE's slack of course but until the great and powerful Oz decides to adhere to standards properly (everyone else can, why can't he? - don't hold your breath) I guess we're stuck trying to accomodate it. If someone could tell me a better (read less core invasive) way of doing what I've done please let me know!
From a useability standpoint
From a useability standpoint using images for submit buttons is a huge no-no. You can make beautiful, cross browser buttons using simple css.
Realistically I don't see this feature as a huge priority. That said, why not post your solution so others wanting to do the same thing as you can. Better still, make a book page describing the process with examples :)
------------------------------
Alex Cochrane
Spoon Media
thanks
this was a great post. i am totally new to drupal and using these instructions i modified a search box to my liking. thanks to everyone!
except that guy with the attitude. :)