Yes, I think it’s a great idea to have horizontal Widget Zone in BlogEngine.NET
So how I done it? Thanks to CSS.
Here’s what to do
In your favorite theme. There’s a file named site.master and style.css.
For example. in Indigo theme (this is my default theme)
site.master
Code:<div class="content">
<blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<br/>
<div style="height: 2px; background-color: #b2b2b2;margin-top: 10px;"></div>
<div class="horiwidgets">
<blog:WidgetZone ID="WidgetZone1" runat="server" ZoneName="be_HORI_WIDGET_ZONE" />
</div>
</div>
I added there the <div class=”horiwidgets”> and inside that block, I have <blog:WidgetZone ID=”WidgetZone1” runat=”server” ZoneName=”be_HORI_WIDGET_ZONE” />
“If you want to have multiple Widget Zone, always keep in mind that they must have a unique ID and ZoneName.”
and in my style.css I added this styles
Code:
.posts
{
clear: both;
float: none;
}
.horiwidgets>.widgetzone
{
float: left;
width: 100%;
}
.horiwidgets>.widgetzone>div
{
margin: 0px 10px 0px 10px;
float: left;
width: auto;
clear: none !important;
}
and that’s all to have Horizontal Widget Zone! Tested on Google Chrome, Firefox, IE 7 and 8
Cheers!
