Thursday, March 3, 2016

Problem with broken layout in Sharepoint Online when use themes

During provisioning of big sites which uses themes into Sharepoint online via client object model you may face with the following problem: layout may be broken although there were no issues during provisioning. Symptoms may be the following:

I.e. in top left corner there will be following links visible which are hidden in regular state:

  • Turn on more accessible mode
  • Skip to main content
  • Turn off animations

If you face with similar issue check 4 following files in /_catalogs/theme/themed/{id} folder (id will be unique for each installation):

  • COREV15-51C31438.themedcss
  • COREV15-88C811FA.themedcss
  • corev15app-DDE41C8D.themedcss
  • corev15app-EA1D5047.themedcss

Their normal size is about 250Kb. If they have less size something could go wrong during provisioning and they may contain incorrect css which breaks layout of the site:

   1:  
   2: /* _lcid="1035" _version="16.0.5004"
   3: _LocalBinding */
   4: body,
   5: .ms-core-defaultFont,
   6: #pageStatusBar,
   7: .ms-status-msg,
   8: .js-callout-body
   9: {
  10:  font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
  11: font-size:13px;
  12: }
  13: body,
  14: .ms-core-defaultFont,
  15: .js-callout-body
  16: {
  17:  color:#294754;
  18: }
  19: .ms-core-defaultFont
  20: {
  21: font-weight:normal;
  22: text-decoration:none;
  23: white-space:normal;
  24: word-break:normal;
  25: line-height:normal;
  26: }
  27: body
  28: {
  29: margin:0px;
  30: overflow:hidden;
  31:  background-color:#fff;
  32: background-size:cover;
  33: background-repeat:no-repeat;
  34: }
  35: html > .ms-core-needIEFilter
  36: {
  37:  -ms-filter:

In order to fix this issue copy content of these files from working sites and replace incorrect css. After that layout will be fixed.

No comments:

Post a Comment