18 March 2015

Bootstrap... Experience editor few fixes

I am sure you all love Bootstrap. We are using the framework quite a lot here and save us quite a lots of time in development for Responsive. It offers banner carousel and plenty of other things that gives you a good quick and easy start... If you don't know it yet, you can check it out: http://getbootstrap.com/
Another great thing about it is it works with Sass and Less.

Well one thing I noticed when putting it all into Sitecore 8 is that the some element on the Experience Editor was a little off. For instance, on the Nav Bar when selecting a child page you will see the following:

There is also a few missaligned buttons, and the Add Here buttons when selecting "Components" are displaying a little funny:

Well those are not really too annoying as it does not affect the functionalities but it make the User experience a bit better. So a quick solution is to create a specific Stylesheet for the Experience Editor in which we will be able to add any style specific for displaying the pages on the experience editor. Having those in a separate Stylesheet will means that those will not increase the size of the CSS file for the Live website. Well not that this file will be too big though. So here we go:

The first thing to do is to create a CSS file:

Now on our layout, lets make sure this file is loaded only when the page is in Editor mode

All good, well know what can we put in there to make it better in Experience editor:

.scInsertionHandleCenter{box-sizing: content-box !important;  -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; }
.scInsertionHandleCenter,.sc-breadcrumb .sc-breadcrumb-item-path, .sc-breadcrumb-item-path img, .scChromeCommand{  -webkit-box-sizing: initial;  -moz-box-sizing: initial;  box-sizing: initial;}
.sc-breadcrumb-item-path img{vertical-align: initial;}
.sc-breadcrumb-item-path span{font-size: 12px; } 

4 March 2015

Sitecore 8 MVC version conflict

After playing a bit with Sitecore 8 and setting up a solution, I ran into an error which was kind of interresting:

Like many of my fellow dev, I usually include MVC through Nuget Packages. But I did not thought this would break the site... Well seems like the MVC version in Sitecore 8 is: MVC 5.1.0

and obviously the one coming from Nuget was newer: 5.2.3

Well although you could update your Nuget to get a specific version of MVC, I found that the easiest way was to update the Sitecore MVC version on the Web.config

This will simply use MVC version 5.2.3 for any call to the dll version earlier than 5.2.3 (including the 5.1.0 from Sitecore 8)