Choose from our various pricing plans. There is a package for everyone!


Add a custom searchbox to your forum

View previous topic View next topic Go down

Tutorial Add a custom searchbox to your forum

Post by Mati™ on Sun Aug 26, 2012 1:12 pm

Hey guys, today I'll be showing you how you can add your own custom searchbox to your forum.

First let's point out where we need to put the code in the template...

Step 1 - Go to Display => Templates => General => overall_header Find this part:

For PunBB Forum Version:
Code:
<div id="pun-head">
 <div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>
Step 1 - Go to Display => Templates => General => overall_header Find this part:

For PhpBB2 Forum Version:

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>


And put this code below that save and Publish:

The code for the searchbox that will search all of the forums...
Code:
<div id='search' class='right'>
 <form id="search-box" method="post" action="/search">

 <label for='main_search' class='hide'>Search</label>
 <a href='/search' title='Advanced Search' accesskey='4' rel="search" id='adv_search' class='right'>Advanced</a>
 <span id='search_wrap' class='right'>
 <input type="text" tabindex="6" size="17" class="" name="search_keywords" id="main_search" placeholder="Search...">
 <input type='submit' class='submit_input clickable' value='Search' />
 </span>
 </form>
</div>

Step 2 - We need to add the CSS code to Display => Pictures and Colors => Colors => CSS Stylesheet put the code in and save.

Note: You can style it with css to match your forum layout.

Code:
#search {
    margin: 20px 0;
}
#main_search {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 12px;
    outline: 0 none;
    padding: 0;
    width: 130px;
    margin-top: 5px;
    color: #65A5D1;
}
.hide {
    display: none;
}

#search_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #326AC5;
    border-radius: 3px 4px 4px 3px;
    display: block;
    height: 26px;
    line-height: 25px;
    min-width: 200px;
    padding: 0 26px 0 4px;
    position: relative;
}

#adv_search {
    background: url("http://i32.servimg.com/u/f32/14/52/65/41/advanc10.png") no-repeat scroll 50% 50% #85A4B9;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    height: 28px;
    margin-left: 3px;
    text-indent: -3000em;
    width: 28px;
}
#adv_search:hover {
    background-color: #7494AA;
}

#search .submit_input {
    background: url("http://i32.servimg.com/u/f32/14/52/65/41/search13.png") no-repeat scroll 50% center #114D77;
    border-color: #063B5F #063B5F #063B5F;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
    bottom: -1px;
    display: block;
    height: 28px;
    padding: 0;
    position: absolute;
    right: -1px;
    text-indent: -3000em;
    top: -1px;
    width: 28px;
}
#search .submit_input:hover {
    background-color: #1D5D8A;
}

Please, if you have any questions or feedback feel free to comment. Smile


Last edited by Mati™ on Tue Dec 30, 2014 12:41 am; edited 2 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Leo on Sun Aug 26, 2012 2:05 pm

It works but how do I move the box more up?
avatar
Leo
Member
Member

Age : 19
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Mati™ on Sun Aug 26, 2012 2:23 pm

@Leo wrote:It works but how do I move the box more up?

Of course it works cuz I always try the codes before I post them xD anyway in your css find this:
Code:

#search {
    margin: 20px 0;
}

And replace it with this.
Code:
#search {
    margin: -35px 0;
}
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Leo on Sun Aug 26, 2012 3:08 pm

Thanks I got it aligned for my forum.

I used this.
Code:
#search {
    margin: 5px 0;
}
avatar
Leo
Member
Member

Age : 19
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by kazmok on Sat Sep 29, 2012 5:57 am

http://ingenmarket.forummotions.com/,
here is my forum
is there any way to add it into the sexy drop down menu?, because when people zoom in and out it's position is messed up
avatar
kazmok
Member
Member

Age : 24
Posts : 9
Join date : 2012-09-13
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Th1nK on Sat Sep 29, 2012 8:19 am

@kazmok wrote:http://ingenmarket.forummotions.com/,
here is my forum
is there any way to add it into the sexy drop down menu?, because when people zoom in and out it's position is messed up
Search in CSS for that:
Code:
#search {
    margin: 20px 0;
}
And replace 20px with the number that fit!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by zenzo on Tue Apr 02, 2013 4:43 am

hi i got problem with announcement and the quick search

it displays in desame line


how to lower the announcement or put below the the search and equal the width
avatar
zenzo
Member
Member

Age : 31
Posts : 10
Join date : 2013-03-25
Reputation : 3

View user profile

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Th1nK on Tue Apr 02, 2013 8:08 am

@zenzo wrote:hi i got problem with announcement and the quick search

it displays in desame line


how to lower the announcement or put below the the search and equal the width
Search in CSS for that:
Code:
#search {
    margin: 20px 0;
}
And replace 20px with the number that fit!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add a custom searchbox to your forum

Post by Sponsored content


Sponsored content


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