If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS classes and style statements may give you some grief, or save your tooshie… This list will continue to be updated as I come across more!
Here is a quick table of contents for easier browsing:
Style statements that suck
Classes that save the day
Style statements that suck
Site background – Class: ms-backgroundImage
First we will check out this style statement, found in corev15.css:
.ms-backgroundImage {
/* [ReplaceBGImage] */ background-image:url();
}
If you have a composed look (theme) applied or background image applied via the composed look (AKA “Change the Look”) it will be plugged in here. Otherwise the background image parameter is still passed through but with a blank value (so it looks just the same as the statement above). When you are applying a background image to a site via CSS, most people would do this:
body {
background: url(insert image file here);
}
But this won’t work in SharePoint because of the ms-backgroundImage class automatically applied to the BODY tag. That is right… I said automatically applied. It doesn’t matter what your HTML or Master Page has, this class will still be added to your BODY tag when the page renders. And because the SharePoint class (ms-backgroundImage) has a higher specificity than using BODY only (specificity score is 10 vs. 1) the blank value for background-image will override what you set in your CSS. No worries, it can be fixed by simply doing this:
body.ms-backgroundImage {
background: url(insert image file here);
}
By adding BODY to the style statement you increase the specificity score to 11 and now your custom CSS will take precedence over the OOTB style statement. If you are scratching your chin over the 10 vs. 1 specificity, check out our post SharePoint CSS and CSS Specificity.
Site background overlay – Class: ms-core-overlay
Take a look over in corev15.css and you will find this:
.ms-core-overlay {
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color:rgba( 255,255,255,0.85 );
}
This applies an 85% opacity white background to the main content area wrapper in your SharePoint site. Or if a composed look (theme) has been applied, then the background color specified in the color scheme file is applied. No big deal if you are keeping the white background, but as soon as you implement a background color or image on (most typically) the BODY tag in your CSS, everything picks up a nice milky white sheen. Nix this in one of two ways:
- Delete the CSS class from the s4-workspace tag in the master page. Change this:
<div id="s4-workspace" class="ms-core-overlay">
To this:
<div id="s4-workspace">
This will disable the ability to override the background color using a composed look (theme).
- Add this to your custom CSS file:
.ms-core-overlay { background-color: transparent; }
Style statement for headers
I have to admit I find the inclusion of this next one a bit baffling. But at least it is easy enough to fix. In corev15.css there is this style statement:
h1,h2,h3,h4,h5,h6,.ms-h1,.ms-h2,.ms-h3,.ms-h4,.ms-h5,.ms-h6 {
margin:auto;
font-weight:normal;
}
When you then use a header tag like <H1> in your code, it will automatically be centered within its container. This is because of the margin: auto, which is telling the browser to auto calculate all four margins around the header element which results in equal widths and heights for the four sides, thus centering the content.
This style statement is also removing the default bolding for the headers (font-weight: normal).
You can fix this by resetting the margin for the entire style statement or selectively as your needs arise. And if needed you can reset the bolding as well.
#s4-bodyContainer h1 {
margin: 0;
font-weight: bold;
}
It isn’t necessary to include #s4-bodyContainer but this is an example of using a descendent selector to pinpoint which H1s you want to modify.
Site Logo – Class: ms-siteicon-a & ms-siteicon-img
One of the things you or your users can modify in your site is the site title, logo and description. Setting the site logo file is a simple thing and can be useful if you have different clients, departments, divisions, etc. and you want some site to site customization. If you are sticking with the OOTB layout you will be fine, but if you are using the site logo control in your custom layout, you will more than likely need to modify some styles.
The following two style statements are in corev15.css:
.ms-siteicon-a {
display:inline-block;
max-180px;
max-height:64px;
}
.ms-siteicon-img {
display:block;
max-180px;
max-height:64px;
}
These statements restrict the height and width of the logo image, no matter the actual dimensions of the logo file that you upload to the site. The first one (ms-siteicon-a) is applied to the wrapping hyperlink and the second (ms-siteicon-img) to the image tag. Having both is actually redundant. So you need add a new statement that allows any dimensions:
.ms-siteicon-img,
.ms-siteicon-a {
max-height: 100%;
max- 100%;
}
As an extension of this, you don’t have to use 100% for the values. If you want to restrict the allowed size you can set it to be whatever values you like.
Classes that save the day
Fixed width design – Class: s4-nosetwidth
This class look familiar? It is a carry-over from SharePoint 2010. If you want to use a fixed width design (for example restrict the width of your site to 960px), you have to add this CSS class to the s4-workspace container.
<div id="s4-workspace" class="s4-nosetwidth">
Remove from dialog box – Class: ms-dialog
Yet another carry-over from SharePoint 2010 is the class assigned to a parent element wrapped around the contents of the modal window / dialog box that pops up for various actions in SharePoint. Based on what you see in the master page, you could add “s4-notdlg” or “ms-dialogHidden” as a class to every element you don’t want to show in the modal window (for example your custom header or nav). However this is a pretty tedious way to hide things. Instead you can use the ms-dialog as the parent in a descendant selector in a CSS style statement and set the display to none. Our post, An easier way to hide page elements from the SharePoint dialog box, goes into detail about how to do this and still applies for SharePoint 2013.
.ms-dialog .myelement {
display: none;
}
More to come as they are discovered!
PS：
refer to: http://blog.sharepointexperience.com/2013/05/sharepoint-2013-css-classes-that-suck-and-save-the-day/