Forum moderator: bigblog  
uCoz Community » For Webmasters » Design Customization » Site Search Style (Discussion: How to change search block's appearance?)
Site Search Style
Mkiller
Posts: 41
Reputation: 0

Message # 1 | 10:09 AM 2010-08-06
This uCoz's search

How i can make something like this?

Can anybody help me?
Attachments: 6846076.png (4.4 Kb) · 6440089.png (3.8 Kb)
Dartz
Posts: 1931

Message # 2 | 7:37 PM 2010-08-09

Location: Control Panel -> Customize Design -> CSS.

Note: Delete ".searchSbmFl" if you have this code.


We'll be using these codes (for now): queryField, schBtn, searchSbmFl.



How to add a background to type-in field?

.queryField {background:url('background-url') repeat;}


How to change type-in field's border?

.queryField {border: 1px solid yellow;}

Info: Border styles



How can I move the search button?
- Search button is centred in the middle, to move it we need padding.

To right:
.schBtn {padding-left:110px;}

To left:
.schBtn {padding-right:110px;}

From top:
.schBtn {padding-top:5px;}



How to add a background to search button?

.searchSbmFl {background:url('background-url') no-repeat;}

.searchSbmFl {background:#000000;}


How to change search button's border?

.searchSbmFl {border:1px solid #FFFFFF;}

Info: Border styles


How to change search button's font and colour?

.searchSbmFl {font-size:10pt;color:#FFFFFF;}

Info: Colour codes



The following codes you can place anywhere and they'll work. You can place them
in bars, above the forum, in custom made boxes, anywhere you need them to be.


Quote
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin: 0px;" action="/search/">
<table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap="nowrap">

<input name="q" maxlength="30" style="width: 150px;" size="30" value="" class="queryField" type="text"> 
<input class="searchSbmFl" id="sfSbm" value="Search" type="submit">

</td></tr></table>
</form>


Red - This is width for how wide will be the type-in field.
Blue - Button's name. You can re-name it if you want.



Quote
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin: 0px;" action="/search/">
<table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap="nowrap">

<input name="q" maxlength="30" style="width: 150px;" size="30" value="Search" onfocus="this.value=''" class="queryField" type="text"> 
<input class="searchSbmFl" id="sfSbm" value="Search" type="submit">

</td></tr></table>
</form>

Red - This word will appear in type-in field until user clicks inside of it.

Attachments: 8177565.png (2.7 Kb) · 2166909.png (2.7 Kb)
[... With uCoz since December 2 2007 ...]
Dartz
Posts: 1931

Message # 3 | 8:22 PM 2010-08-09

Quote
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin: 0px;" action="/search/">
<table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap="nowrap">

<input name="q" maxlength="30" style="width: 150px;" size="30" value="Search" onfocus="this.value=''" class="queryField" type="text"> 
<input class="searchSbmFl" id="sfSbm" value="" type="image" src="http://i35.tinypic.com/14metu0.jpg">

</td></tr></table>
</form>

Red - Your image url.
Info - To change image border to other colour or remove it, edit "searchSbmFl" inside CSS.

Will edit tomorrow with more.

Attachments: 3001350.png (3.2 Kb)
[... With uCoz since December 2 2007 ...]
Jan
Posts: 301
Reputation: 19

Message # 4 | 7:11 PM 2010-08-11
so I replace this code:".searchSbmFl" whit these:queryField, schBtn, searchSbmFl. ??

Added (2010-08-11, 1:11 PM)
---------------------------------------------
i found the first code under /* Post Form */

Dartz
Posts: 1931

Message # 5 | 7:37 PM 2010-08-11
Quote (Jan)
so I replace this code:".searchSbmFl" whit these:queryField, schBtn, searchSbmFl. ??

Depends on you. I showed how to customize parts, what to remove/replace isn't up to me.

[... With uCoz since December 2 2007 ...]
Jan
Posts: 301
Reputation: 19

Message # 6 | 7:45 PM 2010-08-11
Dartz, thnx
Mkiller
Posts: 41
Reputation: 0

Message # 7 | 1:01 PM 2010-08-12
WoW! Very cool explains!
Thanks Dartz a lot ok
HackerX89
Posts: 4
Reputation: 0

Message # 8 | 2:59 PM 2010-08-21
Dartz, Thanks smile
Admistrator
Posts: 105
Reputation: -3

Message # 9 | 2:12 AM 2011-10-21
Hello how can i put my search button like this "Search the LBGT world?"

Added (2011-10-20, 8:12 PM)
---------------------------------------------
Hello how can i put my search button like this "Search the LBGT world?"

Natashko
Posts: 3366
Reputation: 171

Message # 10 | 8:59 AM 2011-10-21
Admistrator,
Quote (Admistrator)
Hello how can i put my search button like this "Search the LBGT world?"

You need to use "Substitution of default phrases" feature.
carloscompu
Posts: 246
Reputation: 1

Message # 11 | 5:13 PM 2012-09-28
My website is cyberq.org ,its a spanish website ,i have a few modules running at the same time in my website and i have in each module its own module search ,How can i make this search bar work only in that spacific module?
Sunny
Posts: 9296
Reputation: 456

Message # 12 | 11:17 AM 2012-10-01
carloscompu, if you use the code $MODULE_SEARCH_FORM$ it will search only within a particular module (that a user is currently viewing).
I'm not active on the forum anymore. Please contact other forum staff.
carloscompu
Posts: 246
Reputation: 1

Message # 13 | 2:37 PM 2012-10-01
Im talking about the search bar that Dartz is showing here in this thread Im using module seearch bar but i want to change the style of it
Sunny
Posts: 9296
Reputation: 456

Message # 14 | 10:14 AM 2012-10-02
carloscompu, please provide the website address where you want to change the appearance of the search box.
I'm not active on the forum anymore. Please contact other forum staff.
carloscompu
Posts: 246
Reputation: 1

Message # 15 | 2:45 PM 2012-10-02
sunny,My website is cyberq.org Its still in a editing prosses but its already functioning ,But as you can see it it all working with independent modules ,so it dont require a site search only module search .All i want to do is to modify the module search to a difrent style.I would like your help Thanks Sunny
uCoz Community » For Webmasters » Design Customization » Site Search Style (Discussion: How to change search block's appearance?)
Search: