When choosing a blog engine I wanted to use a clean and simple blog engine implemented atop .NET. For now, I’ve selected BlogEngine.net which is built atop ASP.NET WinForms. I may yet change to use an ASP.NET MVC-based engine, but I’ll need to do a little testing to find one that sufficiently meets my needs.
In the meantime, BlogEngine.net is fine – it’s simple, reasonably cleanly implemented, and offers most of the features I need for now.
After installing BlogEngine in a website on my test server, I then looked for a theme that was, again, relatively clean and simple. I came across OneSoft’s “iNove” theme. When I applied this theme against my site, it looked great, but I noticed that the “search widget” on the right of the page looked somewhat misplaced!
I also noted that there appeared to be an extra search gadget above the widget bar running down the right-hand side of the page. Hmmm, odd! Why two search controls?
Let’s examine the misplaced search widget first:
Using Internet Explorer’s (very useful) developer tools (hit F12 in IE), I searched for the offending panel using the “Find | Select element by click” feature. Clicking on the search box took me to the relevant HTML:
I noticed that for some reason, the search box was set to float:right. Why?
I opened the corrected the stylesheet in ”~/themes/iNove/style.css” and found the “searchbox” style declarations:
#searchbox {
width:280px;
float:right;
padding:4px 10px;
}
#searchbox .textfield {
line-height:16px;
width:180px;
float:right;
}
#searchbox .switcher {
background:url(img/icons.gif) 0 0 no-repeat;
float:right;
width:18px;
height:22px;
line-height:16px;
display:block;
text-indent:-999em;
float:right;
padding:0 2px;
height:16px;
margin-top:3px;
}
I removed the float:right from the #searchbox declaration, saved the file and refreshed the page. The searchbox now appears to be positioned correctly:
However, I then noticed that there is no “search” title for the search widget (more on this below) and that the search gadget (with the magnifying glass) has now moved to the left of the page!
Huh?
Because the search gadget does not appear in the default or other themes, I guess that this is an additional element added in the iNove theme. Opening “themes/iNove/site.master”, I found the following code:
<div id="searchbox" style="float:right">
<div class="content">
<input id="searchfield" class="textfield" type="text"
onkeypress="if(event.keyCode==13) return Search('<%=Utils.RelativeWebRoot%>')" />
<div id="Div1">
<div class="bt">
<a class="switcher">Switcher</a>
</div>
</div>
</div>
</div>
As we can see from above, an additional element has been added called “searchbox”. Alas, there is a problem here: In any given HTML page, elements’ ID’s should be unique, but there are now two div’s with id="searchbox". The searchbox element also has an inline style declaration. To fix this, I modified the search gadget’s elements’ ID’s and the corresponding styles:
#searchbox{
padding: 4px 10px;
}
#searchfield{
width: 75%;
}
/* iNove Search Gadget */
#searchgadget{
float: right;
padding: 4px 10px;
}
#searchgadgettext{
width: 180px;
float: right;
}
I also noticed that the style declaration for the search gadget’s icon contained incorrect, unnecessary and redundant elements and it also needed to be re-named:
#searchgadgeticon
{
background: url(img/icons.gif) 0 0 no-repeat;
float: right;
width: 16px;
height: 16px;
margin-right: 4px;
text-indent: -999em;
}
/* iNove Search Gadget End */
I then altered the code for the search gadget to reflect the style changes and remove the inline style declaration:
<div id="searchgadget">
<input id="searchgadgettext" type="text" onkeypress="if(event.keyCode==13) return Search('<%=Utils.RelativeWebRoot%>')" />
<a id="searchgadgeticon">Search</a>
</div>
We’re almost there! :)
The search widget and search gadget are now in the correct places, but as I pointed out above, the search widget’s “Search” header isn’t showing. This has been disabled in the code (rather than via CSS) so I found the search widget implementation in widgets/search/widget.ascx.cs and modified the “DisplayHeader” method to return true:
public override bool DisplayHeader
{
get { return true; }
}
Now, finally I have the layout of my blog’s search features as I want them:
In fact, I actually opted to remove the search gadget for now as I found it superfluous and unnecessary.
I hope you find this useful for when you find yourself spelunking through themes for BlogEngine (and other skinnable sites too) to modify them to your requirements.
A zip file containing the fixed iNove v2.0 files can be downloaded here. Extract this file to the root of your blog and you should be good to go. Enjoy!
[Updated 2010-08-05: Fixes to code snippets]
24092727-81f5-432e-9272-ccbc34c3d7ca|1|1.0
BlogEngine.NET, Blog