Skip to content

Instantly share code, notes, and snippets.

@garystorey
Created October 10, 2013 15:52
Show Gist options
  • Select an option

  • Save garystorey/6920703 to your computer and use it in GitHub Desktop.

Select an option

Save garystorey/6920703 to your computer and use it in GitHub Desktop.
Sharepoint 2010 updates for Bootstrap 3
/****************************************************************************
*
* This LESS file contains fixes to make Bootstrap 3 play nicely with
* SharePoint 2010 Publishing pages. It mainly switches SP2010's UI
* elements back to the "content-box" box-model.
*
* It also incorporates the CSS portions of Kyle Schaeffer's fixes for
* scrolling on SP2010. The JS part is called from the master page.
*
****************************************************************************/
/****************************************************************************
*
* BEGIN Fixes for scrolling on SP2010
* See: http://kyleschaeffer.com/sharepoint/sharepoint-2010-scrolling/
* Note: The JS patch is called from the master page.
*
****************************************************************************/
html {
min-height: 0;
}
body {
#s4-ribbonrow {
position: fixed;
z-index: 1000; /* Override Bootstrap */
.ms-MenuUIPopupBody,
.ms-popoutMenu,
.ms-cui-menu[id ^= "Ribbon."] {
position: fixed !important;
}
}
#s4-workspace {
overflow: visible !important;
}
form#aspnetForm {
height: auto;
}
}
.navbar-default {
border-width: 0;
}
.ms-dlgOverlay {
width: 100% !important;
}
/****************************************************************************
*
* END Fixes for scrolling on SP2010
*
****************************************************************************/
/****************************************************************************
*
* BEGIN Sharepoint 2010 Fixes for Bootstrap 3
*
****************************************************************************/
.sbg-contentboxmodel {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Allows the site to be responsive */
body #s4-bodyContainer {
min-width: 0;
}
/* Fixes a bit of ribbon breakage */
body #s4-ribbonrow {
line-height: 1.2;
.s4-breadcrumb-menu {
background-color: #FFFFFF;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
}
}
/* Fix some text sizing issues with the .ms-dlg modal popup, tooltips and the page status bar */
body {
#pageStatusBar,
.ms-cui-tooltip {
line-height: 1.1;
font-size: 8pt;
}
.ms-dlgContent {
line-height: 1.1;
}
/* There are a lot of things in the SP2010 UI that don't like box-sizing: border-box */
#s4-ribbonrow *,
#s4-ribbonrow *:before,
#s4-ribbonrow *:after,
*[class*='ms-dlg'],
*[class*='ms-dlg']:before,
*[class*='ms-dlg']:after,
.ms-dlgFrameContainer > div,
.ms-dlgFrameContainer > div:before,
.ms-dlgFrameContainer > div:after,
.ms-dlgFrameContainer > div > div,
.ms-dlgFrameContainer > div > div:before,
.ms-dlgFrameContainer > div > div:after,
.ms-MenuUIPopupBody,
.ms-MenuUIPopupBody:before,
.ms-MenuUIPopupBody:after,
.ms-MenuUIPopupBody *,
.ms-MenuUIPopupBody *:before,
.ms-MenuUIPopupBody *:after,
.ms-ToolPaneOuter,
.ms-ToolPaneOuter:before,
.ms-ToolPaneOuter:after,
.ms-ToolPaneOuter *,
.ms-ToolPaneOuter *:before,
.ms-ToolPaneOuter *:after,
*[class*='ms-cui'],
*[class*='ms-cui']:before,
*[class*='ms-cui']:after,
*[class*='ms-cui'] *,
*[class*='ms-cui'] *:before,
*[class*='ms-cui'] *:after {
.sbg-contentboxmodel;
}
/* Work around an issue in IE10, where drop-down menus blank the screen
See http://davemcmahon81.wordpress.com/2012/12/11/sharepoint-2010-ribbon-and-ie10-screen-goes-white/
*/
.ms-cui-modalDiv-ie,
.ms-cui-glass-ie {
background-color: transparent;
}
}
/* Note I added class="outer" to <div id="MSO_ContentDiv"> in the Master Page */
.outer {
/* Sort out some font size and face issues (overrides corev4.css:1072) */
.ms-WPBody {
font-family: inherit;
font-size: inherit;
}
/* Responsive images break the webpart toolpane */
.ms-ToolPaneOuter img {
display: inline-block;
max-width: none;
}
}
/****************************************************************************
*
* END Sharepoint 2010 Fixes for Bootstrap 3
*
****************************************************************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment