• Page 1 of 1
  • 1
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » How to make a custom styled search box (Tutorial)
How to make a custom styled search box
Zain
Posts: 68
Reputation: -7

Message # 1 | 9:08 AM
Login to Control Panel. And go to Customize design > Style Sheet (CSS). And paste the following code in the end of style sheet.

Code
.search_form {position:absolute; right:13px; top:10px;}
.search-input {color: gray;width:200px; height:26px; border:0px;     

background:url('http://downloadworld.do.am/search-form_bg.png') no-repeat; padding:5px 22px     

5px 5px; margin:0px; position:absolute; right:0px; top:0px; z-index:4;}
.search-button {cursor:pointer; width:16px; height:16px; border:0px;     

background:url('http://downloadworld.do.am/search_button.png') no-repeat; position:absolute;     

right:5px; top:5px; z-index:5;}
.search-button:hover {background-position:0 -16px;}
.search-button:active {background-position:0 -16px;}


Paste the following code into first or second container or top of site or where u want to see search form.

Code
<div class="search_form" valign="top"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><input type="text" name="q" maxlength="50" class="search-input" onblur="if (value == '') {value = 'Search'}" onfocus="if (value == 'Search') {value =''}" value="Search" /><input type="submit" class="search-button" name="sfSbm" value="" /></form></div>


Replace the images link with your own if you want this search form is work in all module not tested in forum yet.

if u have any problem ask me cool
Post edited by CreativeCollusions - Wednesday, 2011-01-05, 8:45 PM
CodeResolution
Posts: 1570
Reputation: 58

Message # 2 | 12:35 PM
Zain, provide a demo or screenshot. Also the images in the CSS are unavailable.
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
Post edited by CreativeCollusions - Sunday, 2010-11-14, 12:35 PM
paragogos
Posts: 16
Reputation: 0

Message # 3 | 0:42 AM
its not working sad
touffiksteven
Posts: 5
Reputation: 0

Message # 4 | 1:17 PM
Can you provide a screenshot please
Natashko
Posts: 3366
Reputation: 171

Message # 5 | 1:28 PM
paragogos, touffiksteven, we have corrected the code (There was a mistake in it). It has to work now.
uCoz Community » For Webmasters » Custom Solutions » How to make a custom styled search box (Tutorial)
  • Page 1 of 1
  • 1
Search: