This is a second in the series of tutorials on theme building with BlogEngine (go to part one). This time I’ll get search functionality up and running. BlogEngine has search widget and server-side control to add search really easy to the blog, but for some themes it does not fit well with design and you want to go manual. Fortunately, it is not hard.
Getting Search working
This is search form as it is implemented in Boldy (JavaScript that makes it work omitted):
1: <div id="topSearch">
2: <input type="submit" value="" id="searchsubmit"/>
3: <input type="text" id="s" name="s" value="type your search" />
4: </div>
And this is all you need to make it work with BlogEngine:
1: <div id="topSearch">
2: <input type="submit" value="" id="searchsubmit" onkeypress="BlogEngine.search('');" onclick="BlogEngine.search('');"/> 3: <input type="text" value="<%=BlogSettings.Instance.SearchDefaultText%>"
4: onblur="$(this).animate({width: '100'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')" 5: onfocus="$(this).animate({width: '215'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')" 6: onkeypress="if(event.keyCode==13) return BlogEngine.search('')" id="searchfield" /> 7: </div>
As you can see, you can submit search by simply calling JavaScript function search(‘’) - as long as text box with id= “searchfield” exists on the page. That frees our hands completely and we can implement pretty much any design in any theme very easily. Point to notice is that if your site is in the server root (“http://your.site.com” rather than “http://your.site.com/blog/”) , you would pass slash as an argument to search function: search(‘/’);
searchClear() does obvious thing - clears the box from default text when you click into the field and restores when you move out.
Nice little touch with search box sliding out is done with jQuery - if you don’t have jQuery installed on your blog and don’t want it - remove calls to “animate” from code above or you’ll get JavaScript error on the page.
Last but not least, we need to add control to theme’s master page where results will show up. Here is what the end result for main section looks like:
1: <div id="colLeft">
2: <blog:SearchOnSearch ID="sos" runat="server" />
3: <asp:ContentPlaceHolder ID="cphBody" runat="server" />
4: </div>
As usual, alongside goes CSS tweaking to make search results look nice. This time it is literally few touches to pad text and add a line separator.
As a bonus, I added date/author/category/tag/comments stab to the post title. Not much to explain there - take a glance at PostView.ascx in the theme folder if you interested in details.
Another change was “prettifying” comment form - I believe comments section is responsible for half of success or failure of any blog and you can’t spend too much time making it better. It wasn’t very hard and all I did was adding background image and changing CSS styles, but I can clearly see that there lots of space for improvement here on BlogEngine’s side. It got to be much more flexible and better yet form itself be a control in the theme’s folder much like CommentView or PostView.
One curious detail I ran into was styling “county” drop-down with background image. Turns out, Chrome does not support it - at least I could not make it work in that browser and from what I read in support forums it just does not do it period. Bummer.. Ended up removing it from the form all together. I used ugly hack to do it - looking up IDs in the FireBug and setting display to “none”. Again, having form as a template in the theme would make it so much cleaner. If it does not work for you - and it might - you’ll need to check IDs generated by ASP.NET on your site and make a correction. Here is mine:
1: #cphBody_CommentView1_imgFlag, #cphBody_CommentView1_ddlCountry, .commentForm label[for="cphBody_CommentView1_ddlCountry"]{ 2: display:none;
3: }
Updated “Boldy” can be downloaded here:
Boldy2.zip (267.76 kb)