Как изменить внешний вид поиска?

Здравствуйте, установила у себя поиск от Гугла. Хотелось бы сделать фон не белым, а прозрачным, убрать форумскую рамку вокруг него и сменить кнопку поиска, а точнее, чтобы на кнопке было слово "Найти", а не изображение, как сейчас и она была бы другого цвета.

Наверное, надо как-то через CSS, но я, к сожалению, не знаю как.

Как это можно осуществить? Помогите, пожалуйста.

Насчет рамки погорячилась. Перенесла поиск на отдельную хтмл-страницу. Так что вопрос о рамке больше не актуален.

Вместо него, ко всему вышеозвученному, хотелось бы спросить вот что:

Как сделать над строкой поиска и кнопкой, надписи и изображения стрелок, как у вас на форуме:
1. Введите ваш вопрос / ключевое слово для поиска    
2. Нажмите кнопку "Поиск"

И как сделать так, чтобы при нажатии на кнопку "Поиск" на форуме, хтмл-страничка поиска открывалась в новом окне?

Заранее спасибо всем откликнувшимся.  

UmaRee пишет:И как сделать так, чтобы при нажатии на кнопку "Поиск" на форуме, хтмл-страничка поиска открывалась в новом окне?

Просто сделайте новую кнопку Поиск, а стандартную скройте

UmaRee пишет:Как сделать над строкой поиска и кнопкой, надписи и изображения стрелок, как у вас на форуме:
1. Введите ваш вопрос / ключевое слово для поиска
2. Нажмите кнопку "Поиск"

Тут сделано следующим образом: на странице html код поиска оформлен

Код:

<div class="jhk"><div class="komt">1. Введите ваш вопрос / ключевое слово для поиска <img src="http://i41.servimg.com/u/f41/11/71/42/99/arrow_11.png" alt="" title="да, вот в это поле снизу"  /></div>
<div class="komt">2. Нажмите кнопку "Поиск" <img src="http://i41.servimg.com/u/f41/11/71/42/99/arrow_11.png" alt="" title="да-да, эту, синюю с лупой" class="subt" /></div>
<br />
<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search></div>

В СSS добавлено

Код:

.komt {
float:left;
}
.komt + .komt {
float:right;
}
.komt img {
vertical-align: middle
}

Dana Domirani пишет:Просто сделайте новую кнопку Поиск, а стандартную скройте

Сделала, но все равно открывается в этом же окне. Задумалась.... но потом дошло, что галочку "Открывать в новом окне" не поставила.  

Dana Domirani пишет:Тут сделано следующим образом:

Теперь у меня их два.  А код один. Как так получилось и что теперь делать? ))

И еще подскажите, пожалуйста, как фон сделать прозрачным, вместо белого и цвет кнопки поменять (которая под словами "Нажмите кнопку "Поиск")

UmaRee пишет:Теперь у меня их два.

Проверьте, скорее всего продублировалась строка

Код:

<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>

И еще подскажите, пожалуйста, как фон сделать прозрачным, вместо белого и цвет кнопки поменять (которая под словами "Нажмите кнопку "Поиск")

А это делается на странице, где Вы оформляли поиск для своего форума: https://www.google.ru/cse/all
Вкладка Внешний вид > Настроить

Dana Domirani пишет:Проверьте, скорее всего продублировалась строка

Я проверила, строка не была продублирована.
Долго мучалась, наконец, добавила в CSS вот это:

Код:

#___gcse_1 {
display: none !important;
}

И дубль исчез. Ура. Поиск работает нормально.

Dana Domirani пишет:А это делается на странице, где Вы оформляли поиск для своего форума: https://www.google.ru/cse/all
Вкладка Внешний вид > Настроить

Спасибо. Не знаю, почему с первого раза не увидела, когда настраивала поиск. Невнимательная я. )) Зато теперь все нарядно. )))

Дана, а как вставить гиф-картинку рядом с заголовком?
Обычным способом через <img scr="url картинки" /> (после текста заголовка) не получается. (заголовок в divах, если что)

Я и картинку в divы оборачивала, присвоив класс и пытаясь настроить через CSS. И без divов делала. Но все равно картинка не отображается. Даже не знаю, что еще можно сделать.   По идее, вроде, элементарно, все должно быть, но я чет никак не соображу.  

Подскажите, пожалуйста.

 

Все еще никак не соображу.  

   

Если рядом с "Искать на форуме", то можно назначить ему фон в виде не повторяющейся картинки (справа или слева):

Код:

.shrift h3 tt {
padding-right: 50px;
background: transparent url(http://i57.servimg.com/u/f57/17/31/82/42/20x20_10.gif) no-repeat center right;
}

Снова выручили меня.  Огромное