This blog post is written for Sitecore 8.2 update 5 (rev 170728) with SXA 1.4

This week we started building a new SXA site and design wise, we had a pretty simple case. Create a Partial which will have cover image as a background within a header with some navigation content and logo. Sounds simple, right? Hmmm, not really.

Required steps:

  • Create a Header Home Page partial
  • Assign it to Home Page design
  • Open Header Home Page partial in Experience editor
  • Add Container rendering within the header placeholder and assign background to it <-PROBLEM
  • Split the rows
  • Add content

Problem 1: There is no Background selection

When you open Experience Editor, select Container and click on edit the styles, you will see the Grid section and the Styles section. So where is the Background?
container without the background

Solution

Go back to the Sitecore CMS, select your Partial, click on Presentation Details, Final layout end select your Container. Voila, the background is there. Thanks Adam!


Problem 2: scLayout errors

Once I had image in place, I wanted to add Cover Background css style to it. Sometimes it would work, sometimes not, but most annoyingly, the changes couldn’t be saved due to the Experience Editor scLayout errors. And this saving error was completely random. I couldn’t point into a particular example when it would happen.

Exception: Newtonsoft.Json.JsonReaderException Message: After parsing a value an unexpected character was encountered: {. Path 'scLayout', line 1, position 1522. Source: Newtonsoft.Json at Newtonsoft.Json.JsonTextReader.ParsePostValue() at Newtonsoft.Json.JsonTextReader.ReadInternal() at Newtonsoft.Json.JsonTextReader.Read() at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id) at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue) at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent) at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType) at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings) at Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings) at Sitecore.ExperienceEditor.Speak.Server.Requests.PipelineProcessorRequest1.Process(RequestArgs requestArgs)

Solution:

Long live Sitecore community I would say!

Naveed Ahmad pointed me to a blog post http://jockstothecore.com/experience-editor-error/ and told me to apply last fix from the blog, '3rd time's a charm'. Keep in mind that the above article was written in March before 8.2 update 5 came out so I was a bit skeptical. So, I followed everything what was written, and boom! Magic, it works!

magic

Problem 3: Image background is rendered on the wrong place in the View

The background image by default is not rendered on the container div, but on one level bellow.

Original

`<div @Html.Sxa().Component("container", Model.Attributes)>
<div class="component-content"@Html.Raw(backgroundStyle)>
@Html.Sitecore().Placeholder(key)