Как изменить дизайн гаджета "Окно поиска" в Blogger (Blogspot)

Есть в Blogger весьма не плохой по своему функционалу гаджет "Окно поиска", его легко добавить в блог и настроить результаты поиска. Однако блоггеры почему-то используют его редко и неохотно. Возможно дело в его изначально простом оформлении, которое не всегда вписывается в общий дизайн блога. Но как и другим виджетам, также и форме поиска можно придать уникальный стиль.
  В этой статье я хочу показать как при помощи CSS можно изменить стандартный дизайн поисковой строки гаджета "Окно поиска" в Blogger-блоге.
  Вот так выглядит гаджет "Поиск" изначально при установке в блог:

Рис. 1 Стандартный вид

 А вот так, и не только так, он может выглядеть если для него добавить CSS свойства:

Рис. 2 Измененный дизайн

 Сверху - состояние покоя, ниже - при вводе запроса. Это всего лишь пример, зная необходимые идентификаторы и селекторы каждый может сделать оформление по своему усмотрению.
  Начну с того, что этот виджет в шаблоне блога выглядит так:

<b:widget id='CustomSearch1' locked='false' title='Поиск по этому блогу' type='CustomSearch'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <span class='cse-status'><data:loadingMsg/></span>
      </div>
    </div>

    <!-- override gsearch.css -->
    <style type='text/css'>
      #uds-searchControl .gs-result .gs-title,
      #uds-searchControl .gs-result .gs-title *,
      #uds-searchControl .gsc-results .gsc-trailing-more-results,
      #uds-searchControl .gsc-results .gsc-trailing-more-results * {
        color:<data:linkColor/>;
      }

      #uds-searchControl .gs-result .gs-title a:visited,
      #uds-searchControl .gs-result .gs-title a:visited * {
        color:<data:visitedLinkColor/>;
      }

      #uds-searchControl .gs-relativePublishedDate,
      #uds-searchControl .gs-publishedDate {
        color: <data:dateColor/>;
      }

      #uds-searchControl .gs-result a.gs-visibleUrl,
      #uds-searchControl .gs-result .gs-visibleUrl {
        color: <data:urlColor/>;
      }

      #uds-searchControl .gsc-results {
        border-color: <data:borderColor/>;
        background-color: <data:backgroundColor/>;
      }

      #uds-searchControl .gsc-tabhActive {
        border-color: <data:borderColor/>;
        border-top-color: <data:activeBorderColor/>;
        background-color: <data:backgroundColor/>;
        color: <data:textColor/>;
      }

      #uds-searchControl .gsc-tabhInactive {
        border-color: <data:borderColor/>;
        background-color: transparent;
        color: <data:linkColor/>;
      }

      #uds-searchClearResults {
        border-color: <data:borderColor/>;
      }

      #uds-searchClearResults:hover {
        border-color: <data:activeBorderColor/>;
      }

      #uds-searchControl .gsc-cursor-page {
        color: <data:linkColor/>;
      }

      #uds-searchControl .gsc-cursor-current-page {
        color: <data:textColor/>;
      }
    </style>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

  При добавлении, в коде гаджета уже имеется список идентификаторов и селекторов для элементов окна результатов поиска, тут можно поэкспериментировать самостоятельно, добавляя различные свойства, разделяя и объединяя нужные по своему усмотрению.
  Но для дизайна поисковой строки гаджета "Поиск" нужно использовать такие идентификаторы и селекторы:
- #CustomSearch1 - идентификатор всего гаджета;
- #CustomSearch1 > h2 - заголовок(название) виджета. С помощью CSS его можно убрать или наоборот - дополнительно оформить;
- #CustomSearch1_form - форма поиска, блок строки и кнопки;
- .gsc-input input[type="text"] - селектор для оформления поисковой строки;
- .gsc-search-button - селектор кнопки;
  Не густо. Но есть один нюанс: элементы формы - поле ввода и кнопка - обернуты в таблицу, это дает возможность задать стили дополнительно стили и для этих ячеек, как это сделано в примере ниже (стиль гаджета с Рис. 2):

#CustomSearch1 {
  padding: 0;
  margin: 0;
}
#CustomSearch1>h2 {
  display: none; /*скрываем заголовок*/
}
#CustomSearch1_form {
  background: #666;
  border-radius: 5px;
  height: 27px; /*высота всей формы*/
  width:100%; /*ширина всей формы*/
  padding: 5px;
}
.gsc-input input[type="text"] {
  border: 0;
  border-radius: 5px 0 0 5px;
  background: #fff; /*фон поля ввода*/
  box-shadow: inset 0 0 3em #666;
  color: #000; /*цвет текста в поле ввода*/
  height: 25px; /*высота поля ввода*/
}
/*стили при наведении и вводе текста*/
.gsc-input input[type="text"]:focus,
.gsc-input input[type="text"]:hover {
 box-shadow: inset 0 0 1em #666;
 outline: none; /*убираем рамку*/
}
/*стиль ячейки с кнопкой*/
td.gsc-search-button {
 outline: none;
 margin: 0;
 padding: 0 7px; /*отступами регулируем положение кнопки*/
 border: 0;
 border-radius: 0 5px 5px 0;
 background: #63c134;
 background: -moz-linear-gradient(top, #63c134 0%, #2f9b04 100%);
 background: -webkit-linear-gradient(top, #63c134 0%,#2f9b04 100%);
 background: -o-linear-gradient(top, #63c134 0%,#2f9b04 100%);
 background: -ms-linear-gradient(top, #63c134 0%,#2f9b04 100%);
 background: linear-gradient(to bottom, #63c134 0%,#2f9b04 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63c134', endColorstr='#2f9b04',GradientType=0 );
}
/*стиль для самой кнопки*/
.gsc-search-button input[type="submit"] {
/*фоновое изображение, положение и цвет фона*/
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAASRJREFUOE+N0rtKA0EUxvGYmxG1SplXyQtoaxk77S2F4BuEYBdI7AQRL13AQiVqQLARIWkEQVAEiwiWFgqT/xf2DDtxc/ngN7vsOXsym92Uc86kUcEF3vGBK2whh3ivZydFdDEpjyghuFm0ZHEPyxuaaOBFF6L0sYR/A7ZhOUAe1pBBDZZd+JtFyx2UZ2g3QQMW8ABFuwjqWr6g1BEUY6pQ/qBd+ZqWAZR9+MKYPSi/0NvyNS3XUF6xCF+M6BefoOgY1LVswnKCFVhDAS1YduBvFi3a0iUseiQNOsanLsRyjuCjspNVtDEp39FRCYb4SZF1HKEHvbJTbECP1YHlDKNXPj5gmmXcwKLh2aTGaTTkFpbDpKZZbMgP1pIa5qH/pOycSw0BYPpWB/KFQZIAAAAASUVORK5CYII=) 50% 50% no-repeat #070;
 border: solid 1px #B4EF92;
 border-radius: 24px;
 cursor: pointer;
 color: transparent; /*скрываем текст*/
 font-size: 0%; /*убираем текст*/
 width: 24px;
 height: 24px;
}

  Для кнопочки использовал вот такие изображения, сделал два - для темного и светлого вариантов:  может кому и пригодится, вес одной картинки около 450 байт, но их можно сжать и уменьшить объем еще.
  Что касается окна результатов, то думаю придать ему желаемый стиль особого труда не составит, так как селекторы уже известны и прописаны, в общем - есть где разгуляться.

 Вот пожалуй и все, комментарии, советы пожелания приветствуются.
©http://magentawave.com