Настроить дизайн оформление поиска 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;} Как уже было сказана на работоспособность это не влияет, просто изменяем форму на свою, возможно цвет или сделать обвод на один вексель, можно много чего добавить. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
