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]

For those who’ve not visited my site before, Welcome.

For those who’ve been here before, welcome back! You’ve probably noticed by now that this site is markedly different from my old, somewhat stagnant site. Why? Well, the old version of this blog only contained a few disjointed and out-of-date posts, but, perhaps more importantly, a recent event triggered a desire to start this blog afresh:

On July 23rd 2010, after just over 10 years with the company, I decided to leave Microsoft!

“Whut? Why?” some of you may be asking.

There are many reasons that led to my decision, but essentially, it all boils down to the fact that I want more freedom.

I absolutely loved my time working at Microsoft. During my various roles at Microsoft, I met some of the most fun, exciting, fascinating, exceptional and gifted individuals anywhere on the planet – both inside and outside the company. I was also extremely fortunate to be involved with designing, coding, testing, naming, branding, evangelizing, marketing and presenting a number of important technologies such as Windows Communication Foundation (WCF, codenamed “Indigo”), .NET Remoting, COM+ & DCOM, Visual Studio Team System and Windows CardSpace (codenamed “InfoCard”).

I’ve learned an enormous amount - not just about technology and business - but also about who I am and who I want to be. Over the last couple of years, I’ve had a growing itch to branch out and carve my own future and decided that now was the time to make the leap to make it happen.

“So, what’s next?”

I am not abandoning the Microsoft world. I intend to continue in its orbit where it makes sense to do so. In the future, however, I’ll be free to offer a slightly more objective viewpoint than I was able to when posting at my “Welcome to the Metaverse” Microsoft/MSDN blog ;)

I am in the process of forming my own company through which I’ll be consulting and mentoring clients; sharing my expertise and helping them make the most of today’s and tomorrow’s technologies. I plan to re-engage the community-oriented aspects of my prior roles too, returning to speaking at conferences and writing more articles and perhaps a book or two! I also have several plans underway to build some interesting web-based businesses.

I also aim to catalog much of what I experience as I build my fledgling business and discuss many of the technical subject areas through which my career has and will continue to plow.

So, stop-by now and again, and if you like what you see here, subscribe to my blog feed.