Search Form (widget) Style – Twenty Twelve vs. Twenty Ten

• 

  zombiesymmetry · Member · Sep 30, 2012 at 3:29 am

  • Copy link
  • Add topic to favorites

  I’ve been going back and forth between several themes, and I think I may be going with Twenty Ten. However, Twenty Twelve has a much cooler search format, w/ hitting the return key instead of having a “Search” button.

  I see that I can lengthen the search box (in Twenty Ten), and force the button onto a second line, by modifying the CSS “.widget_search #s” – Increasing the search box from 60%. I also see that the search box works without using the “Search” button by simply hitting the return key.

  What I would like to do is get rid of the button in Twenty Ten, and possibly include the word “Search” in the empty box. I tried using a text widget to make my own search form, but then discovered that <from> tags are among the forbidden tags, and so that of course didn’t work.

  Is there a workaround? A method of eliminating (or hiding) the button in the Twenty Ten search form, and possibly including my own default text (e.g. “Search”) in the empty search box?

  Note: I don’t have the “Custom Design” upgrade yet, but I may be upgrading to change out the fonts, so if there is a remedy that involves modifying the CSS file that would be perfect.

  The blog I need help with is: (visible only to logged in users)

• 

  michaelfields · Member · Oct 2, 2012 at 11:35 pm

  • Copy link

  Hello! Hiding the search button in Twenty Ten via Custom Design Upgrade is pretty easy. The following code will work:

  
#searchsubmit {
display: none;
}


  You can then make the search box a bit wider with:

  
#primary #s {
width: 200px;
}


  It is not really possible to include the text inside the search box the correct way though.

• 

  zombiesymmetry · Member · Oct 2, 2012 at 11:38 pm

  • Copy link

  Thanks for the swift reply!

  I just upgraded to Custom Design the other day, so I’ll give this a shot and see how it works.