Developing/Integrating themes for Sitefinity !

Dear all, I have been searching for Sitefinity themes with a clean design using responsive frameworks like Twitter Bootstrap and ZURB Foundation, but no luck when it comes to Sitefinity integrated themes and templates. WordPress themes can be found all over the place, and extremely nice ones too, fully integrated with WP CMS. Have a look at www.themeforest.com.

I have found two nice Html/JQuery/Css themes from Spab-Rice, and I have started some integration work, but seriously, the time investment for integrating them into Sitefinity is ridiculously huge. A big bag of problems and issues along the way and no help to find in the Sitefinity docs either. I started out with preparing a basic ASP.NET Master Page with the Bundling and Minification working flawlessly, and now I am tearing my hair to get the simple Html/JQuery/Css themes working with Sitefinity.

Have a look at these:

www.spab-rice.com/.../
www.spab-rice.com/.../

What does it take to prepare some working ASP.NET Master Pages for these two themes so that the Sitefinity design/Layout editor does not break?

Is it possible to define the Sitefinity design/layout editor content window as a full browser window boundary, so that menus and other JQuery stuff does not float all over or cover some Sitefinity buttons in the design/layout editor? At  the moment this is a real pain in the neck.

Anyone ?

Rgds/Gunnar

Hey Gunnar,

To answer your first question `what does it take` well I'd say some coffee, patience and good understanding of both Sitefinity's layouting principles and your theme css but to come to the second part of that question, the magic word here is the class "sfPublicWrapper".

The easiest way to adapt your theme's is if (using your pond example) is to have everything inside the #page-content be placed inside a wrapper div with that specific sfPublicWrapper. Sitefinity will wrap its page-editor around it.

All the other html/styling outside of that should be negated, which can be easily done as Sitefinity adds classes to the body tag when in page edit or template edit mode, so its simply a matter of css specificity to get those things out of the way.

From there you can just work your way down the list of things that break the interface.

---
Naturally you can also try the other way around and make the whole backend ui wrap and float correctly over your lay-out. Would give you a better experience but it will be a lot more time consuming.

---

As for full-browser window editing, Sitefinity has a feature called inline editing. It allows you to do full screen in-line editing of a page. It doesn't offer the full editing functionality as the page or template editor, as it is geared towards updating content but it can be helpful sometimes.

Hope it helps,
Jochem.