RTUR.NET

.NET and Open Source: better together

NAVIGATION - SEARCH

How to convert theme to BlogEngine.NET part 3

widget

This is part 3 of converting theme to BlogEngine tutorial. In the first part we created a new theme and added HTML/CSS/JavaScript from chosen design template. Second part mostly dealt with customizing search. Today is going to be a widgets day.

Widgets are parts of the site that can be dynamically configured and updated by admin, usually you can see them in the side bar, like list of categories, tags etc. It is one of the main extensibility points in BlogEngine and can be very powerful, although you should not overuse it as having too many widgets can slow site down.

Widget Zones

Widgets can only exist inside of container, in BlogEngine term – zone. Since BlogEngine 1.6 you can have multiple zones (more on it here). Boldy will be using 2 widget zones, so your code base should be relatively up to date or you’ll need to remove second zone from the theme and replace it with hard-coded content. If so, you can copy and extend this content from the theme from part 1 or 2. One of the widget zones we will put in the sidebar:

   1: <div id="colRight">
   2:     <blog:WidgetZone ID="WidgetZone1" runat="server" ZoneName="be_WIDGET_ZONE" />
   3: </div>

And the other goes to the footer section:

   1: <div id="footerWidgetsInner">
   2:     <!-- BEGIN FOOTER WIDGET -->
   3:     <blog:WidgetZone ID="WidgetZone2" runat="server" ZoneName="PageBottom" />
   4: </div>

Now we should have drop down added to each place where widget zone is defined. For example, here it is in the footer (sure you have to log in as admin to see it):

footer-wg-1

 

Now you can add widgets to the zones. Once added, you’ll see menu items on every widget that let you edit, delete and move widgets between zones and also within zone:

footer-wg-2

The move menu:

footer-wg-3

Customizing widgets

Widgets added to the site might not look right in the new theme at first. As responsible theme author, I’d want to add every single widget to the sidebar and check out what it looks like. Next step is pulling all widget-related CSS from standard theme and modifying it if needed to fit with new design. Its not a walk in the park but not terribly complicated either, just requires some patience. Most widgets are unsorted lists and biggest problem is to make it work with both flat and nested lists. FireBug is your friend. Footer widget is a special case, we probably don’t need every widget look great inside it – just those that likely to be used.

CSS is sometimes not straightforward in a way one style takes precedence over the other which can be really annoying. One handy trick you can use is telling CSS parser that this style should be top priority over all others by using “important” keyword. I would suggest using it as last resort only, but again if you not accomplished CSS guru you might be tempted to throw towel quite often. I won’t  blame you:

   1: margin-left: 0 !important;

Overall this part is not much different from tweaking comment form – you load page and use FireBug to examine HTML and styles and do adjustments as needed.

Updated theme can be downloaded using link below:

Boldy3.zip (269.71 kb)

Comments (11) -

It's nice, but the Search bar on the top doesn't work?

It works in FireFox/Chrome/IE8. If you visited this site before, you might need to refresh cached data (hit Ctrl + F5 couple times). If it still does not work, let me know what exactly you using and I'll check this out.

Ok! It's work fine :).
I have another problem. When i change to this Themes. My Entry does't display correly as before.
http://img825.imageshack.us/img825/8521/9142010114323am.png
how can i fix in CSS files?
Thanks.

I see. It does what it should - wraps text around the picture. In your case, you could:
1. In the paragraph right after the picture add "clear:both" to its style so text will drop under the picture.
2. Make picture bigger to fill entire page width.
3. Replace picture with large thumbnail as first picture in the posts on my blog so wrapped text looks fine.

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"

Thanks for pointing this out. I've updated part two with a fix.

So. How can i fix it? plz

You need to pass this parameter to search function: BlogEngine.search('<%=Utils.RelativeWebRoot%>').

I added <%=Utils.RelativeWebRoot%> in the Search Function in site.master but nothing happen. it's still error.
Plz help me. Thanks

When search runs ok - what URL in the address bar looks like and how it is different when search errors out?

Nothing happened.
It's still like example above. URL isn't changed.
eg: it is "http://rtur.net/blog/post/2010/09/13/search.aspx?q=hihi"

Pingbacks and trackbacks (1)+

Comments are closed