Customizing Template search box

to change css layout of search box:

go to 'project template' tab --> 'template editor' --> 'css' and append this as new line (you can change it with css controls to fit your needs)


#search_box{background: #a6a6a6;border: 1px solid #9b9b9b; color: #ffffff;height:22px; padding: 0 7px;border-radius: 2px;margin:8px 32px 8px 8px;}


to customize search button: 


#search_button{background: #1b1b1b;border: 1px solid #545454;color: #ffffff;position: absolute;right: 7px;top: 8px;width: 24px;height: 24px;border-radius: 2px;}


search area (div) can be also customized :


#search{background:#d8d8d8;border:1px solid #cacaca;border-radius: 10px;}


you can also use images as background...


to make search button invisible:




to remove label from search button (in case you use background image), go to language setting tab --> interface labels --> search labels and change label for 'search'



 posted by miro   Site Search tags:  search • customize   permalink
3.8 4