How to convert theme to BlogEngine.NET part 2
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):
<div id="topSearch">
<input type="submit" value="" id="searchsubmit"/>
<input type="text" id="s" name="s" value="type your search" />
</div>
And this is all you need to make it work with BlogEngine:
<div id="topSearch">
<input type="submit" value="" id="searchsubmit" onkeypress="BlogEngine.search('');" onclick="BlogEngine.search('');"/>
<input type="text" value="<%=BlogSettings.Instance.SearchDefaultText%>"
onblur="$(this).animate({width: '100'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')"
onfocus="$(this).animate({width: '215'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')"
onkeypress="if(event.keyCode==13) return BlogEngine.search('')" id="searchfield" />
</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:
<div id="colLeft">
<blog:SearchOnSearch ID="sos" runat="server" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</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:
#cphBody_CommentView1_imgFlag,
#cphBody_CommentView1_ddlCountry,
.commentForm label[for="cphBody_CommentView1_ddlCountry"]{ display:none; }
There is a small problem with Search Bar on the top. When i go to "http://rtur.net/blog", I use the Search bar, it works fine. But when i go to another page, eg: http://rtur.net/blog/post/2010/09/13/How-to-convert-theme-to-BlogEngineNET-part-3.aspx I use the Search bar, and it show a wrong link http://rtur.net/blog/post/2010/09/13/search.aspx?q=hihi
Good catch. The search function calls back end search.aspx and takes parameter that it will append in front of that “search.aspx”. If your site in the root, you just pass “/” and it works everywhere. With subfolder, easiest way to get it working is to pass relative root from Utilities.
Another issue I discovered is, when you move search fields under “form” as I did in part 3, clicking “submit” won’t work because it will literally submit form to the back and – so I have to return false on that click to cancel form submission. Final version of search looks now like this:
<div id="topSearch">
<input type="submit" value="" id="searchsubmit" onkeypress="BlogEngine.search('<%=Utils.RelativeWebRoot%>');" onclick="BlogEngine.search('<%=Utils.RelativeWebRoot%>');return false;"/>
<input type="text" value="<%=BlogSettings.Instance.SearchDefaultText%>"
onblur="$(this).animate({width: '100'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')"
onfocus="$(this).animate({width: '215'}, 300 ); BlogEngine.searchClear('<%=BlogSettings.Instance.SearchDefaultText%>')"
onkeypress="if(event.keyCode==13) return BlogEngine.search('<%=Utils.RelativeWebRoot%>')" id="searchfield" />
</div>
Updated Boldy can be downloaded here (fix described in update section is NOT included):
