Contents tagged with Orchard

  • Mobile theme for Orchard

    Tags: Orchard, mobile, CSS, Metro

    I have created a mobile specific theme for my blog! If you are on a mobile device this is not news to you!!

    I came across this post by Betrand Le Roy (the father of Orchard!) the other day whilst looking into this and it exactly what I needed for dynamically changing the theme in my blog.  Combine that will how much I like it when you go to a site on a phone and it’s layout is changed to make it easier to read/use.  And I’ve not seen many better than the blogspot/blogger theme by this guy, if you’ve got a few minutes, take a look at the site – his designs and artwork are pretty special.  You can see a demo of the mobile theme I am on about here on some Europe news blog.

    Now, I should manage expectations, my theme was created in a few hours and isn’t as good as that one…it has swipe events and everything!! Something I might look to do in the future!  I found a jGestures project on codeplex that should help.

    I could use something like jQuery mobile (which I’ve looked at before – apparently v1 is out now) or IUI, but they look very iPhoney and i think my iPhoney days are behind me, but anyway…I don’t want an iPhone look-a-likey, I think they generally look average and don’t work as well as a native app, so don’t make it look like one.

    I just want a simple theme that works well on a mobile device.  And this is what I come up with!!


    I have tried on my Windows Phone 7, but that doesn’t do screen shots…which is something I just found out!!  Trust me…it looked equally magnificent!!!

    Kept with my Metro theme – which for me means square and blue Smile

    Made the whole abstract and title area clickable so its easier for fingers.

    Search box is nice and big (I have hidden the search box when you are on a single blog page – keeping the focus on the content).

    Generally made buttons/text and stuff a bit chunky!


    I based it on the SafeMode theme that you get with Orchard, so really starting from the bare bones, which is good – kept the project nice and trim!

    I have overridden numerous views to get this far…


    Couple of problems with it:

    Navigation: I don’t have a menu, I don’t really want the same items as the main site and with the standard Orchard menu module, I don’t think its possible to have different menus.  Sure I could hack in something!

    Zones: I haven’t shown most zones, mainly because I want to keep it trim, but I would like to at least have the tags, I like using tag clouds on sites if nothing else it gives me a feel on what content I can expect to find here or where the author’s interests/expertise lies, but because I’ve got my tag cloud in the same zone as the twitter widget and I certainly don’t want that.  The solution is to probably put the tag cloud in a zone I don’t use on the main site as well as the one I do and render the respective zone in each theme!

    Bit bloaty: I’ve got a few js libraries like Syntax highlighter which give it a bit of bloat – I’m should run some tests to see how performance is!

    Moving around: Basically there is no way to move around, the theme mentioned above has back and next etc, I’m not sure this functionality is even available easily in Orchard, but currently you either need to hit the back button or scroll back up to hit the header once you’ve read something…making the wild assumption that anyone even makes it to the bottom!!

    Swipey stuff: Need to get some swipe actions happening!

    Theme switcher: I have put the code for the switching in my main theme, obviously means there is a dependency on having the mobile theme, not a problem.  However unless I set the Mobile theme as the current theme and then set it back to the main one again, the mobile theme is not loaded.  I don’t get an error, but none of the styles are loaded for the Mobile theme…i simply get “SafeMode”.

    Blog and only blog: This is specifically targeting at blog sites – it will need more work to handle pages etc.

    I’m going to hopefully work on some of those over coming weeks and release it to the Orchard Theme Gallery.



  • Migrate GeeksWithBlogs to Orchard CMS

    Tags: Orchard, GeeksWithBlogs, Migration, Metro, BlogML

    As you can see I have migrated my blog to the Orchard CMS platform.

    I’ve used Orchard for a few projects and having gone through the pain enjoyment of learning Orchard, it was really the only platform I was going to choose for my blog!

    The theme I created myself, based on the Metro blog engine theme and the Mango Orchard theme.  I used Metro Studio to create the icons you see in the top left!

    This, as expected was not going to be a simple export and import job, GeeksWithBlogs don’t enable the export to BlogML feature that SubText has, as they told me it was too buggy!

    Orchard has a format all of it’s own so some serious Googling was the only plan.

    Seems I was not alone in my quest to migrate from GeeksWithBlogs, I don’t have any issue with them or the platform really, yes the themes are quite ugly and its quite dated, I just wanted more control.  MrHinsh has a codeplex project for this, but as I wasn’t going to WordPress I kept looking.

    I found this solution on codeplex, to export from MetaWebBlog to BlogML and this to import from BlogML into Orchard.

    The export ran and worked fine, except it didn’t include the tags (categories) into the post and it didn’t add any of the comments.  So I played with the code, found out that GeeksWithBlogs doesn’t support the MetaBlog method (GetComments).  With MetaBlog all comments have their own RSS url, so I wrote a little method to take the blog post ID go away and get the XML for the comments, parse that and build it into the BlogML output file.

    IEnumerable<BlogMLComment> GetCommentsForPost(Post post) {
        string commentsUrl = _blogUrl + "/Comments/commentRss/" + post.postid.ToString() + ".aspx";
        XNamespace dc = "";
        XDocument doc = XDocument.Load(commentsUrl);
        var comments = from d in doc.Descendants("item")
                       select new BlogMLComment {
                           DateCreated = DateTime.Parse(d.Element("pubDate").Value),
                           UserName = d.Element(dc + "creator").Value,
                           Title = d.Element("title").Value,
                           Content = new BlogMLContent { Text = d.Element("description").Value }
        return comments ?? null;


    That worked great (I’m not really sure if the comments RSS URL format is specific for GeeksWithBlogs or is a MetaWebBlog thing). 

    The full code I am happy to share, I did get in touch with the author of the original project requesting to be added as a developer so I could check in my enhancements.  I’ve heard nothing yet, the last checkin from them was in 2008 so perhaps it’s a gone and forgotten project!  I might create my own project or submit a patch to the work item.

    So I have my content all ready to go!

    With the import I immediately came across a problem which i raise here, the Orchard module is not working in v 1.4.  This was swiftly sorted by the author and I’m very grateful!  Well there are a few of us in the discussion that are!!

    There were still a few little things to work around with the import, it didn’t import into the selected blog for example, it created a new one…the way round this was to put in a slug!

    So that’s it, the journey is complete!  From GeeksWithBlogs to Orchard in only 4000 steps!

    Not quite…images, ahhhhh, images!!!  The source url on all image elements are still pointing to GWB.  I haven’t sorted this and not sure I ever will!   Now it’ll be a job to spin through the Orchard content to update them all, something I would like to do, but finding the time and inclination will be challenge all in itself!

    With regard to the Metro theme, I haven’t published that to the Theme Gallery, it’s really in no state to do so!  I am overriding many views to make little changes here and there.  The way the navigation works is a little hacky as well, because I wanted to keep the standard navigation functionality in the admin section (don’t know why now!) I have overridden the view to stick in my own CSS class based on the title of the navigation item.  Then in CSS i set the image.  If I don’t want to use an image I suffix the title with /t!  hmmmm. 


    The tag cloud, if you are wondering is taken from here.  It does actually seem a little flakey…it sometimes doesn’t load – I may go back to the standard way!  It’s also a bugger to use on an iPad!

    I do want to create a mobile specific theme (it doesn’t work great on my phone!) – not sure how I go about switching themes on the fly in Orchard based on the browser, but I’m sure it’s possible.  One of the beauties of Orchard is it flexibility and extensibility!


  • 1