Working with the new Search Block

One of the requests or suggestions we received quite often was an easier way to display a search box. Previous to 3.7, the only ways to do this were to put it in your navigation block, use a search widget, or use your own custom code.

Now you just add your search block, and choose your options. You can choose to turn a button on/off for the visitor to click to search. You can choose what the search button will say. You can also change the placeholder text inside the search button. See below:


The block can be added to any layout to offer greater customization. We hope you enjoy the addition of this new block!

Spread the word!

4 Responses

    • Not in Grid mode. You can’t have overlapping blocks. If you wanted to do that, you’d need to use nudging and/or margins in Design Mode.

  1. Sorry for newbie question.. how can I change color of placeholder text? which is the class to modify?
    Thank you in advance!

    • You could so something like this

      /* do not group these rules */
      .block-type-search *::-webkit-input-placeholder {
      color: red;
      .block-type-search *:-moz-placeholder {
      /* FF 4-18 */
      color: red;
      .block-type-search *::-moz-placeholder {
      /* FF 19+ */
      color: red;
      .block-type-search *:-ms-input-placeholder {
      /* IE 10+ */
      color: red;

      The example would set all placeholder text to red in all search blocks globally. For more on this and the pitfalls, see here

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress