searchthumb

Forum-Specific Search forms on index.php

On 02.25.11, In phpBB3 Tutorials, by

Ever wanted to search a specific category for a post or topic? Follow this tutorial to add forms to each of your categories and quickly search the respective forums. Prosilver-based styles only.

What we’re trying to achieve

So, what we’ll be adding in this tutorial are small search forms to the upper-right corner of each category on your board. Whereas the search form in the header of phpBB searches every “searchable” forum, each of these forms will only search their respective category. The idea is to make searching specific categories quicker and easier than using the Advanced search.

Preparation

To complete this tutorial you’ll need a decent Source Code editor. It’s also worth making a backup of your style files prior to beginning in case anything goes wrong. This tutorial should work on custom prosilver-based styles.

Step 1) HTML Edits

Here we’re going to add the search form to the forumlist. It’s almost the same code as the header search form, although we’re containing it in a different CSS class, changing the form action and removed the “Search” button.

Open: /styles/prosilver/template/forumlist_body.html

Find:

            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
                        <dd class="topics">{L_TOPICS}</dd>
                        <dd class="posts">{L_POSTS}</dd>
                        <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
                    </dl>
                </li>
            </ul>

Below, Add:

             <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                 <div class="forumlist-search">
                    <form action="search.php?fid[]={forumrow.FORUM_ID}" method="post">
                    <fieldset>
                       <input name="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="{L_SEARCH_MINI}" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /><!--<input class="button2" value="{L_SEARCH}" type="submit" />-->
                       {S_SEARCH_HIDDEN_FIELDS}
                    </fieldset>
                    </form>
                 </div>
              <!-- ENDIF -->

Step 2) CSS Edits

Now we’re going to add some CSS to position the form and add a little decoration. The default grey border against the blue background wasn’t too appealing.

Open: /styles/prosilver/theme/common.css

At the bottom of the file, Add:

.forumlist-search {
    width: 150px;
    margin-top: -22px;
    z-index: 999;
    position: relative;
    float: right;
}
.forumlist-search input[type=text] {
    border-left-color: #11a1e8;
    border-bottom-color: #11a1e8;
    border-top-color: #0f77ab;
    border-right-color: #0f77ab;
}

Now that we’ve added another element to the forumlist, we need to edit the #wrap div’s minimum width value so that the search form isn’t overlapped by the “last post” title on smaller screens.

Open: /styles/prosilver/theme/common.css

Find:

/* Main blocks
---------------------------------------- */
#wrap {
    padding: 0 20px;
    min-width: 650px;
}

Replace with:

/* Main blocks
---------------------------------------- */
#wrap {
    padding: 0 20px;
    min-width: 850px;
}

So that’s mostly it. There’s just one more thing we need to cover before finishing up…

Subforum Support

If you have any subforums, you’ll notice the search form appears there too which is great. However unless you have your subforums set correctly the form will only search the first forum in the subforum list rather than all of the forums listed. To ensure proper functionality make sure you have made a “sub-category” (when creating sub-forum, change “Forum type:” to “Category” and place your subforums in that.

Support / Donations

If something goes wrong or you can’t work out how to get your subforums to search properly, support is freely available over on the support forum. If you think this tutorial is awesome please consider making a donation. If you feel I’ve missed something or made a mistake, let me know here. Buzzing.