2009-03-04, 11:33 AM
More tutorials like this can be found at my forum exclusively.
Hey folks, today I'll be showing you how you can add your own custom searchbox to your templates.
First let's point out a few things. We need to figure out where to put it.
We have a few prime choices...
The header template - The upper portion of your site that shows on each page.
The footer template - The bottom portion of your site that shows on each page
The index template - The area in between the header and footer only on your site's home page
It's probably best just having it in both the header and/or in the footer. Just putting it into the header is about good enough, but in this tutorial I will show you how to add it to all 3 of those areas.
Let's begin by first grabbing the code for a searchbox that will search all of the forums...
This is what that searchbox will look like from a default forum:
![[Image: step1.png]](https://camo.mybb.com/4e099423d101e08f1708145c035771363382f80a/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570312e706e67)
![[Image: step2.png]](https://camo.mybb.com/2fbfeb08071bc37c3057c84d9839d5f536b7d9cd/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570322e706e67)
If you're ready let's get started by going to the header template...
Step 1
![[Image: step3.png]](https://camo.mybb.com/c6ef8bd59b124bbce90e3fb22682efb62192e5a0/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570332e706e67)
Step 2
![[Image: step4.png]](https://camo.mybb.com/0acda34adf1b42d932d3796cd72cceca38e5f5de/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570342e706e67)
Step 3
![[Image: step5.png]](https://camo.mybb.com/308d93ef0222e05930375da6982d9bcf4d0cb0d4/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570352e706e67)
Step 4
![[Image: step6.png]](https://camo.mybb.com/9282d66104632055c7d8fa3debe913e7dc8ebd67/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570362e706e67)
Step 5
![[Image: step7.png]](https://camo.mybb.com/8cb6d01e1166395eed5e863d7173597e0f884bfb/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570372e706e67)
Step 6
![[Image: step8.png]](https://camo.mybb.com/9185caf8bc2ff91f83e1b66ed37c5f7d2fb50263/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570382e706e67)
Now, what we need to find is the information that displays the logo. That piece of code is on line 4 (in the default template)
What we need to do now is create a table with 2 cells. This table will contain 2 columns - one cell on the left and one on the right. They sit sidebyside inside of the table (a table is invisible unless you assign color to it).
Now, another thing we'll have to do is align the textbox - it will be in the right cell. We want the text box to align to the right side of the cell and align vertically to the top of the cell.
What you are going to do is replace the above code (the logo code) and replace it with this code below. The logo code is already inside of it.
Code:
Step 7
![[Image: step9.png]](https://camo.mybb.com/e7c4f9966d2dd5cf13f74353746556b6008af53d/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f73746570392e706e67)
Step 8
![[Image: step10.png]](https://camo.mybb.com/2cd9f7c8b59cb28a1b193d310d9fab99212ad80a/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f7374657031302e706e67)
Step 9
Click here full-screen preview final note and preview
To change the length of the box change the size="25" to something else. (Change only the number)
If you want to change "Search..." to something else, just replace the 3 instances of it with something else. Make sure all 3 match exactly...
If you want your button to say something other than Go just type another word in, like Search, or Search Forums - whatever you want.
If you want to use an image in place of Go simply do this:
Replace:
When using an image as the input type it automatically converts into a Go button
In case you are wondering...
This is how to set it up on the index page... here is an example of the box on the index page pushed to the right:
![[Image: step12.png]](https://camo.mybb.com/eed45977860866b12e9df85ca5f2558aa9edf8e1/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f7374657031322e706e67)
To add a searchbox into the index page go to:
Templates & Styles
Select Template from the left
Select your theme templates to add this to
Find "Index Page Templates" Click it
The first option is "index" Click it
Find {$header} and put this code AFTER it
Want it centered? Do this <center>Searchbox Code</center>
Want it on the right? <span style="float: right">Searchbox Code</span>
This is how to place it in the footer
Go to Tempaltes & Styles
Select Templates from the left
Select your Theme Templates to add this to
Find "Footer Templates"
The first option is "footer" Click it
Use the above code to place/align the searchbox. Add a <br /> before whatever you add, so that it creates a small gap above the box. Make sure the code you adds comes before all code that is already there.
Placing it in the footer in place of language select
Another thing you can do... (ONLY if you DO NOT plan on using the languages) You can easily replace the language box with the searchbox...
In the Footer Templates go into the footer_languageselect
Replace all text in that box with:
It'll look like:
![[Image: step13.png]](https://camo.mybb.com/605f2898bb59dd1b698bc5ef0df9d9a36eb50ac2/687474703a2f2f7777772e61746f6d69636a7573746963652e636f6d2f7475746f7269616c732f616464736561726368626f782f7374657031332e706e67)
Pretty neat huh?
Now, onto styling the box... (Note: This will effect all text boxes on your site so they all match - this is a good tip for you)
Go to Templates & Styles
Click the theme you want to edit (not the templates)
Select global.css from the list
Now, on the top right select Advanced Mode
That pulls up a list of styles.
Find: (About 1/3 way down)
input.textbox {
background: #ffffff;
color: #000000;
border: 1px solid #555555;
padding: 1px;
}
textarea {
background: #ffffff;
color: #000000;
border: 1px solid #555555 ;
padding: 2px;
font-family: Verdana, arial, Sans-Serif;
line-height: 1.4;
font-size: 13px;
}
select {
font-size: 13px;
font-family: verdana;
color: #000000;
background: #ffffff;
border: 1px solid #555555;
}
ADD THIS CODE AFTER THE ABOVE CODE
input {
background:#699c3a;
color: #000000;
border: 1px solid #555555;
padding: ;
}
Now, this is how you style your text boxes and submit buttons...
input_textbox
A textbox is used in a few spots: E.g. The title field when making a new post, the searchboxes (not buttons), and other single line fields for inputting text.
textarea
A text area is any textbox used for a lot of text, such as the text editor and the Bio field in your UserCP>Profile
textarea controls those aspects. Change those colors as you see fit.
select
This controls your drop down menus, like the "Forum Jump".
input
These are the the buttons used for submitting a form. Such as the searchbox "Go" button, the buttons used to submit a thread, etc.
When changing colors, you must use HEX colors.
You can change border thickness and styles also... refer to w3schools for a complete reference of allowed styles.
That wraps this up. Thanks for reading. I hope you learned something.
:asleep:
Hey folks, today I'll be showing you how you can add your own custom searchbox to your templates.
First let's point out a few things. We need to figure out where to put it.
We have a few prime choices...
The header template - The upper portion of your site that shows on each page.
The footer template - The bottom portion of your site that shows on each page
The index template - The area in between the header and footer only on your site's home page
It's probably best just having it in both the header and/or in the footer. Just putting it into the header is about good enough, but in this tutorial I will show you how to add it to all 3 of those areas.
Let's begin by first grabbing the code for a searchbox that will search all of the forums...
<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="Search..." onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='Search...'; }" class="textbox" size="25" />
<input type="submit" class="button" value="Go" />
</form>
This is what that searchbox will look like from a default forum:
If you're ready let's get started by going to the header template...
Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Now, what we need to find is the information that displays the logo. That piece of code is on line 4 (in the default template)
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
What we need to do now is create a table with 2 cells. This table will contain 2 columns - one cell on the left and one on the right. They sit sidebyside inside of the table (a table is invisible unless you assign color to it).
Now, another thing we'll have to do is align the textbox - it will be in the right cell. We want the text box to align to the right side of the cell and align vertically to the top of the cell.
What you are going to do is replace the above code (the logo code) and replace it with this code below. The logo code is already inside of it.
Code:
<table width="100%">
<tr>
<td>
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
</td>
<td style="vertical-align: top" align="right">
<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="Search..." onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='Search...'; }" class="textbox" size="25" />
<input type="submit" class="button" value="Go" />
</form>
</td>
</tr>
</table>
Step 7
Step 8
Step 9
Click here full-screen preview final note and preview
To change the length of the box change the size="25" to something else. (Change only the number)
If you want to change "Search..." to something else, just replace the 3 instances of it with something else. Make sure all 3 match exactly...
If you want your button to say something other than Go just type another word in, like Search, or Search Forums - whatever you want.
If you want to use an image in place of Go simply do this:
Replace:
<input type="submit" class="button" value="Go" /><input type="img" src="http://www.example.com/myimage/gif" alt="Go" style="vertical-align: middle"/>When using an image as the input type it automatically converts into a Go button
In case you are wondering...This is how to set it up on the index page... here is an example of the box on the index page pushed to the right:
To add a searchbox into the index page go to:
Templates & Styles
Select Template from the left
Select your theme templates to add this to
Find "Index Page Templates" Click it
The first option is "index" Click it
Find {$header} and put this code AFTER it
<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="Search..." onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='Search...'; }" class="textbox" size="25" />
<input type="submit" class="button" value="Go" />
</form>
Want it centered? Do this <center>Searchbox Code</center>
Want it on the right? <span style="float: right">Searchbox Code</span>
This is how to place it in the footer
Go to Tempaltes & Styles
Select Templates from the left
Select your Theme Templates to add this to
Find "Footer Templates"
The first option is "footer" Click it
Use the above code to place/align the searchbox. Add a <br /> before whatever you add, so that it creates a small gap above the box. Make sure the code you adds comes before all code that is already there.
Placing it in the footer in place of language select
Another thing you can do... (ONLY if you DO NOT plan on using the languages) You can easily replace the language box with the searchbox...
In the Footer Templates go into the footer_languageselect
Replace all text in that box with:
<div style="margin-top: -4px">
<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="Search..." onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='Search...'; }" class="textbox" size="25" />
<input type="submit" class="button" value="Go" />
</form>
</div>
It'll look like:
Pretty neat huh?
Now, onto styling the box... (Note: This will effect all text boxes on your site so they all match - this is a good tip for you)
Go to Templates & Styles
Click the theme you want to edit (not the templates)
Select global.css from the list
Now, on the top right select Advanced Mode
That pulls up a list of styles.
Find: (About 1/3 way down)
input.textbox {
background: #ffffff;
color: #000000;
border: 1px solid #555555;
padding: 1px;
}
textarea {
background: #ffffff;
color: #000000;
border: 1px solid #555555 ;
padding: 2px;
font-family: Verdana, arial, Sans-Serif;
line-height: 1.4;
font-size: 13px;
}
select {
font-size: 13px;
font-family: verdana;
color: #000000;
background: #ffffff;
border: 1px solid #555555;
}
ADD THIS CODE AFTER THE ABOVE CODE
input {
background:#699c3a;
color: #000000;
border: 1px solid #555555;
padding: ;
}
Now, this is how you style your text boxes and submit buttons...
input_textbox
A textbox is used in a few spots: E.g. The title field when making a new post, the searchboxes (not buttons), and other single line fields for inputting text.
textarea
A text area is any textbox used for a lot of text, such as the text editor and the Bio field in your UserCP>Profile
textarea controls those aspects. Change those colors as you see fit.
select
This controls your drop down menus, like the "Forum Jump".
input
These are the the buttons used for submitting a form. Such as the searchbox "Go" button, the buttons used to submit a thread, etc.
When changing colors, you must use HEX colors.
You can change border thickness and styles also... refer to w3schools for a complete reference of allowed styles.
That wraps this up. Thanks for reading. I hope you learned something.
:asleep:
