Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson
Created October 10, 2013 14:08
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save OllyHodgson/6918986 to your computer and use it in GitHub Desktop.
Save OllyHodgson/6918986 to your computer and use it in GitHub Desktop.
Some CSS fixes to make SharePoint 2010 Publishing sites get along better with Bootstrap 3. For the most part, it sets SP2010's own UI elements to use `box-sizing: content-box;` instead of `box-sizing: border-box;` as used by BS3. Either import this at the end of bootstrap.less, or after importing bootstrap.less into your own .less files.
/****************************************************************************
*
* 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