ZorNet.Ru — сайт для вебмастера » HTML и CSS » Настроить дизайн оформление поиска uCoz

Настроить дизайн оформление поиска uCoz

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

В CSS стилях отвечает этот sch-box за все фрагменты дизайн и на этих будем работать. Они идут почти в начале, здесь вам предоставлю тот формат дизайн, который на изображение прикреплен к нашему материалу. Что находим sch-box и все стили с ним убираем и ставим, что ниже предоставлены. Но и главное. если не будете менять, то вы можете сформировать свой поиск, который по своей форме возможно будет уникален и рабочий, так как только стили и визуализацию мы здесь будем менять или разбирать.

Приступаем к установке:

Идем в CSS и находим стили, которые начинаются с sch-box и можете удалить и поставить, те которые ниже. Но и также вы их можете настроить по своему дизайн.

Создать свой поиск на сайте

В CSS:

Код
#sch-box .search-box {position:relative;height:20px;overflow:hidden;background:#ffffff;text-decoration:none;border-radius: 2px; border: solid 2px #FFFFFF;}
#sch-box .queryField {width: 100%; background: none;border: none; padding: 0; margin: 0; height: 20px; line-height: 20px; color: #999; }
#sch-box .searchSbmFl {position:absolute;right:0;top:0;cursor:pointer;padding:0;margin:0;width:20px;height:20px;border:none;background:#0EA7DF url(/.s/t/1321/sch.png) 50% 50% no-repeat;white-space:nowrap;text-indent:150%;overflow:hidden;border-radius: 2px;}
#sch-box .searchSbmFl:hover {background-color:#B0070D;}

Как уже было сказана на работоспособность это не влияет, просто изменяем форму на свою, возможно цвет или сделать обвод на один вексель, можно много чего добавить.
14 Апреля 2017 Просмотров: 1434 Комментариев: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 3
Марковичь
Марковичь 14 Апреля 2017 03:071
0
Хорошая подсказка, что можно переделать, что - что, но поиск по сайту у сайта гибкий и можно с ним работать.
Kosten
Kosten 14 Апреля 2017 03:412
0
Про то, что стандартный можно сделать оригинально, а не искать уникальный, хотя и которые сделаны также отлично смотрятся.
Kolinkor
Kolinkor 14 Апреля 2017 03:433
0
Заменил на сайте, но с другой стороны, чтоб был заметный и работал правильно а не выкидывал на что не нужно.
avatar