With summer behind us, you might want to change things a little bit to celebrate a new season. Like buy a new shoes or, may be, change a theme on the blog. I decided to do the later. My schedule is quiet busy, so I’ll do it in several steps and will share tips, tricks and findings with anybody interested.
I’m running relatively recent build of BlogEngine from source, but new theme should work fine with 1.6.x.x. Let me know if it doesn’t for you and I’ll do adjustments as needed. To start, I went looking for catchy free theme, no kind in particular - any design can be adopted to BlogEngine pretty easily. This WP theme looked pretty good to me. Below I’ll try to document adoption process step by step.
Laying down the foundation
- First download original design. It can be WP theme, generic CSS template or anything else - as long as it is HTML/CSS/JavaScript we should be fine, back end does not matter.
- In the BlogEngine site, copy “standard” theme and rename copied to “Boldy”.
Move all CSS, images and JavaScript files from original to newly created BE theme.
Override “style.css”. - Go to simplest page in the demo site (like this for example) and right-click/copy page source. Paste it into site.master and remove all server-side code from site.master.cs.
- Clean up copied HTML. For now you’ll need add only two things from standard site.master in there: directives from the very top (2 lines) and content placeholder (cphBody) where list of posts will show up.
- Check out download link at the end of this post to see how simple theme files really are after you clean them up.
Lining up comments and forms
Some CSS skills are required. FireBug is a big help. Mostly what you do here is looking through the FireBug at HTML generated by BlogEngine and apply appropriate style to it. Usually theme you are trying to adopt comes with some style for forms and sometimes comments, but HTML elements, class names etc. do not match. Probably best way to go is remove all form/comment related CSS and gradually move form/comment CSS from BlogEngine into new theme. Obviously, some things you’ll like to change to match new design. Easily most time consuming task in this first step.
Checking out archive
Copying “archive” section from “standard” theme almost did it, just a few minor changes and it looks the way I wanted.
Minor tweaks to content CSS
Depending on your content, you might notice that some things from your previous theme does not look quite right. I spent some time tweaking image display and few others playing with “float”, “margin” and alike.
Get a logo
Go to creatr and get yourself a little silly logo. Why not? It’s fun and easy!
You can download original Boldy theme here and theme adopted for BlogEngine using link below. It is far from done and you probably don’t want to put it on your blog just yet, but looks pretty good already. In the next steps I’ll get “search” working, add widgets and do a lot more to bring this theme to live.
Boldy.zip (257.51 kb)
Spam comments are annoying and sometimes looking at comment allowed by Akismet or some other anti-spam service you think – I’m sure I would do better. It is just so hard to get the plumbing in or I would made my very own solution. With BlogEngine.Net 1.6 it is not, you can easily implement your own anti-spam filter or add existing if you like it more than built-in Akismet. Here is how. More...
With BE.NET 1.5 release candidate out of the door, it is a good time to look at some of the new features. Most of them are small and incremental, but nevertheless are interesting. One such feature is support for compiled extensions. There are several reasons you want to compile extension rather than provide source code, such as security, protecting intellectual property, simplifying deployment (for large extensions) etc. If you find a reason to choose this route, this guide is for you. More...
Feedjit is a service that provides live traffic feed for your site. It is easy to set up – you copy chunk of HTML and insert it into your blog’s markup. That is, if you know HTML and used to editing files in your blog, which shouldn’t be a requirement for average blogger. This is why popular blog providers supply Feedjit widgets – so that blogger does not have to edit files by hand and FTP them to the host. In this little exercise we create such a widget for BlogEngine. More...
Default admin interface for extensions in BlogEngine works fine in most cases and very easy to use. But sometimes you just got to get creative, right? That means, you want no limits. Obviously, some of simplicity will be lost – but still it is surprisingly easy to get along using plug-and-play BlogEngine architecture. Lets say, we ran into nice DHTML color picker and want to use it in the admin page for our extension. We want admin page look like this picture – it should allow us to enter a word, size and color. This values will be saved in the extension manager, so we don’t have to deal with databases or file system – usual BE stuff. And when you click “Color picker” button, nice color picker will show up and you can visually select value for a color. More...
Lets say we want to write an extension to track user activities on our site. Blogger should be able to set basic settings, for example choose to track posts, pages or both. Then every time user requests post or page, we increment corresponding counter by one. Look at the picture above. Its clear that we need two sets of settings: one for post/page options and another to list user activity.
More...
In the first part, we wrote simple extension that changes case in the post to lower. Let’s say, we want user to decide show post in the lower or upper case. For this, we need to be able to maintain variable and let blogger change it’s value through admin interface. Normally, you would need to add a data access functionality for extension to handle this kind of operation, create admin form etc. BlogEngine uses Extension Manager to help make job a lot easier. Take a look at the code below. In the constructor, we subscribe to post serving event and then call InitSettings. There we create ExtensionSettings object, which can hold singe value (scalar) or/and table of values. In our case, we want it to hold single scalar value, so we set settings to scalar. We call our variable “Case” and initialize it with default value of “upper”, then call ExtensionManager.InitSettings and pass name of extension and settings object. More...
This is the first part in the series of tutorials about writing extensions for the BlogEngine 1.4. I’ll start with simple “hello world” example and then gradually move to the more advanced techniques. You don’t need to have any previous experience with BE extensions to follow this tutorial. More...
Widget is a special control you can add to the sidebar. What makes it special is that it is a member of the "zone" - area where you can add and configure these reusable components through the zone manager. It is similar to SharePoint WebParts - you can drag it around, set properties etc. And, in BlogEngine, you can build widget just in few simple steps. More...
