The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How Can I Make A Search Bar

View previous topic View next topic Go down

How Can I Make A Search Bar

Post by Mr DarkHaxers2 on November 18th 2011, 1:40 am

i Was Wondering How Can I make The Search Bar Like Forumotion Did On My SIte

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

Re: How Can I Make A Search Bar

Post by Poser on November 18th 2011, 2:15 am

I tried researching it on Google and I found something that may help you.
Since it's not allowed to post links (except images link), I'll re-post it and put credits from my source.

1. Design your own search box.



2. Crop it out
Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button



4. HTML codes for the search box

Code:
<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />
</form>
</div>

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

Code:
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}

Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.

NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.



Credits to: zenverse.net

Hope it helps.

Poser
Forum Reviewer
Forum Reviewer

Male Posts : 391
Reputation : 40
Language : English and Filipino
Location : Whale Island

http://www.bowtieblogs.forumotion.com

Back to top Go down

Re: How Can I Make A Search Bar

Post by Mr DarkHaxers2 on November 18th 2011, 2:42 am

Thanks Bro But How Can I make The Round Edges Like Forumotion Search Bar

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

Re: How Can I Make A Search Bar

Post by Poser on November 18th 2011, 2:44 am

^

As far as I know, you should be the one to create that kind of search bar image.
If you want to have that kind of search bar image, try making a request in the Graphics Section.

Poser
Forum Reviewer
Forum Reviewer

Male Posts : 391
Reputation : 40
Language : English and Filipino
Location : Whale Island

http://www.bowtieblogs.forumotion.com

Back to top Go down

Re: How Can I Make A Search Bar

Post by Mr DarkHaxers2 on November 18th 2011, 3:03 am

Like This One



It's Round Edges How Can i Do that

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

Re: How Can I Make A Search Bar

Post by Poser on November 18th 2011, 3:07 am

^

Sorry but I have no idea.
I just copy and pasted that tutorial here.
Again, you can just ask a request in the graphics section if you want to have a search bar having rounded edges.
That rounded edges is just an image. Try seeing it very closely, the whole image is really a rectangle. Then by doing some photoshop or whatever, round edges are made.

Poser
Forum Reviewer
Forum Reviewer

Male Posts : 391
Reputation : 40
Language : English and Filipino
Location : Whale Island

http://www.bowtieblogs.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum