My golden site design coding rule is site design supporting images are only referenced through the CSS. This would include logos, header images, gradation bars, decorative backgrounds, etc. Content supporting images (like Bob and Joe hanging at the company picnic) … Continue reading
Add a tool tip for an image you create in CSS originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
A CSS Challenge from Fred: Make lists look like basic MS-Office tables: dark background header row with white text alternate rows with light color background dark bottom borders on every rows Here is the CSS to start your list/library styles! … Continue reading
CSS Challenge Response: Simple styles for SharePoint list originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
A CSS Challenge from Justin: Make Sharepoint Custom Lists align to the right. By default any Dollar or Percentage type columns align to the right. Here is the CSS to control your SharePoint list text alignment! The first selector (.ms-listviewtable … Continue reading
CSS Challenge Response: Text alignment for SharePoint list originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
A CSS Challenge from Jennifer: I have a masterpage with a black background and white links…however when I edit a page and insert an item the popup box is white background with white links. I would like to change the … Continue reading
CSS Challenge Response: Change dialog box background originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
I updated the Change dialog box post to include a new CSS Challenge for the Tags and Notes pop-up box.
Change dialog box post updated originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
@porlyp asked on Twitter if it was possible to change the styling of the search scopes drop down menu in SharePoint using just CSS. Here is a sample of what we are targeting: So I did a little research and … Continue reading
Twitter Response: Change select box arrow style with CSS originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
This is the fourth post in a SharePoint 2010 ribbon series. Be sure to check out posts 1through 3 as well: 1) Boil it down to the basics… the SharePoint 2010 ribbon 2) Gathering requirements for your ribbon needs 3) … Continue reading
Ribbon visibility using CSS originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
I recently refreshed my Just the Essentials SharePoint 2010 master pages and a part of that refresh included the addition of HTML5 versions of the master page files. In this post I am going to step through how to convert … Continue reading
Convert SharePoint 2010 master page to HTML5 originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
I recently read an interesting post that I think is a good starting list for judging CSS files. You can check it out here: Judging CSS / Spotting Bad Code Reading that article and my ensuing comment that I posted … Continue reading
What makes good SharePoint CSS? originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
CSS specificity (weight) and SharePoint When dealing with SharePoint CSS one of your biggest friends is specificity. It also happens to be one of the harder things to wrap your head around, especially if you are just getting into creating … Continue reading
SharePoint CSS and CSS Specificity originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
Understanding SharePoint:CSSLink and how to add your custom CSS in SharePoint 2010 CSS is a wonderful tool for branding SharePoint; unfortunately SharePoint 2010 has done a decent job of making things pretty hairy and confusing with working with CSS in … Continue reading
SharePoint CSSLink originally appeared on Our SharePoint Experience
If that's not where you see it now, someone stole it. Won't you tell us about it?
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
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.
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:
<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).
.ms-core-overlay {
background-color: transparent;
}
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.
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-width:180px;
max-height:64px;
}
.ms-siteicon-img {
display:block;
max-width: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-width: 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.
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">
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!
One of the current trends in the web world is to use icon fonts with and for various things in your web user interface. They are fast to load, easy to scale in size, quick to change color, and it’s simple to add effects. Icon fonts can be used in SharePoint with just a little CSS. This post contains demos for both SharePoint 2010 and 2013.
There are several free fonts available and of course some paid ones too. You can check out these popular free icon fonts:
For my demos below I used Fontello, which allows you to custom build a font from several sources using only the icons you want. If you like, you can download the custom font I built (has only 6 glyphs).
When you want to use an font in your site that most people don’t have installed on their computer, you have to provide the font for them. But it isn’t as easy as just uploading the font file to your web site. Different browsers use different font file formats (such as WOFF and EOT) so you need to upload several versions of the font in order for it to work with the various browsers. There are online tools like Font Squirrel that will convert your font to the different file formats that you need. If you want to get really nerdy and learn some of the back story, check out this article on Smashing Magazine.
The nice thing about these icon fonts is most of them come already converted and ready to go for your web site. All you need to do is add the files to SharePoint. I personally like to keep font files with the CSS files, be it on your web server or in the Style Library. You can create a folder and add the files just like you would any other file type. Below is a screen shot of my sample SharePoint site showing the font files and the CSS file I am using, all stored in the Style LIbrary.
With these instructions, I am assuming you have a custom CSS file already in place.
When you want to specify a font in CSS you just do this:
font-family: sans-serif;
When using a custom font that you are providing, you need to declare the font files in the CSS file. You do this with @font-face:
@font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?19603093');
src: url('fonts/fontello.eot?19603093#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?19603093') format('woff'),
url('fonts/fontello.ttf?19603093') format('truetype'),
url('fonts/fontello.svg?19603093#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
The above code block was generated for me by Fontello and all the major icon font providers will give you the code to use. All you need to do is update the paths to point to where you stored the font files. Now that the CSS knows where to find the font, you can use the regular font-family:
font-family: fontello;
For these demos I just picked some key areas in the out-of-the-box (OOTB) SharePoint branding and traded out the default icons for glyphs in the icon font. You could use this technique for lots of things in SharePoint and in your custom design.
All of the CSS has been commented so you can understand what the property/value pair is doing. These comments are not required in your CSS file.
All of these tricks use the :before pseudo element. This is supported in all major browsers (check out your browser support on CanIUse.com) and is a great method for adding embellishments to your site.
This post includes the following demos:
You can also get the code.
I have to admit, I sometimes snicker at these highly customized SharePoint sites that use the default magnifying glass for search. There is nothing wrong with it but when everything else in the user interface has been changed, why not that little magnifying glass? It is dead easy to do with CSS. Here is the HTML (trimmed for demonstration purposes) that is generated for the icon:
<td class="ms-sbgo ms-sbcell">
<a href="javascript:S3031AEBB_Submit()" title="Search">
<img style="border-width:0px;" src="/_layouts/images/gosearch15.png" alt="Search" class="srch-gosearchimg" onmouseout="this.src='\u002f_layouts\u002fimages\u002fgosearch15.png'" onmouseover="this.src='\u002f_layouts\u002fimages\u002fgosearchhover15.png'" title="Search">
</a>
</td>
Using CSS we will hide the OOTB magnifying glass by targeting the IMG and then place in an icon font glyph where the anchor (A) is that triggers the search. We will utilize the CSS class of ms-sbgo as a descendant selector in order to change only the search go area.
/* Hide default Search icon */
.ms-sbgo img {
display: none;
}
/* Expand search Go anchor to create clickable area */
.ms-sbgo a {
width: 20px; /* Update value as needed for icon size */
height: 20px; /* Update value as needed for icon size */
display: block; /* Required to effectively set image height and width to show full icon image */
margin: 2px 0 0 5px; /* Create space between anchor and search input */
}
/* Add icon to Go anchor */
.ms-sbgo a:before {
content: '\e801'; /* Magnifying glass icon in Fontello */
font-family: fontello;
font-size: 16px; /* Size of icon */
color: #3ABCFE; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Alter icon on hover */
.ms-sbgo a:hover:before {
color: #1B920B; /* Color of icon on hover */
}The approach is mostly the same as search to switch out the icons for Recycle Bin and All Site Content. The CSS hides the default icons and places the new ones using the SPAN tags that are wrapped around the original icons.
Here is the HTML (trimmed for demonstration purposes) that is generated for the Recycle Bin:
<a href="/sites/masters/_layouts/recyclebin.aspx" class="s4-rcycl">
<span class="s4-clust s4-specialNavIcon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
<img style="border-width:0px;position:absolute;left:-0px !important;top:-428px !important;border-width:0px;" src="/_layouts/images/fgimg.png">
</span>
<span class="ms-splinkbutton-text">Recycle Bin</span>
</a>
Our CSS will target the nested IMG, the anchor (A) assigned a class of s4-rcycl and the SPAN assigned a class of s4-clust, which is a class used in multiple areas of SharePoint.
/* Hide default Recycle Bin icon */
.s4-rcycl span img {
display: none;
}
/* Add icon to Recycle Bin text */
.s4-rcycl .s4-clust:before {
content: '\e802'; /* Trash icon in Fontello */
font-family: fontello;
font-size: 15px; /* Size of icon */
color: #2E9226; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Alter icon on hover */
.s4-rcycl .s4-clust:hover:before {
color: #7C111A; /* Color of icon on hover */
}
Here is the HTML (trimmed for demonstration purposes) that is generated for the All Site Content link:
<a href="/sites/masters/_layouts/viewlsts.aspx">
<span class="s4-clust s4-specialNavIcon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
<img style="border-width:0px;position:absolute;left:-0px !important;top:-0px !important;border-width:0px;" src="/_layouts/images/fgimg.png">
</span>
<span class="ms-splinkbutton-text">All Site Content</span>
</a>
Since there isn’t a class assigned to the anchor, we will use an attribute selector to target that element.
/* Hide default All Site Content icon */
a[href$="/viewlsts.aspx"] span img {
display: none;
}
/* Add icon to All Site Content text */
a[href$="/viewlsts.aspx"] .s4-clust:before {
content: '\e803'; /* List icon in Fontello */
font-family: fontello;
font-size: 15px; /* Size of icon */
color: #48497C; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Alter icon on hover */
a[href$="/viewlsts.aspx"] .s4-clust:hover:before {
color: #7C111A; /* Color of icon on hover */
}
Let’s change direction and instead of updating an icon in the regular web page, let’s update an icon in the Site Actions drop down menu. Check out the HTML (trimmed for demonstration purposes) for the Site Permissions menu item:
<li type="option" class="ms-MenuUIULItem">
<div class="ms-MenuUIULItem" text="Site Permissions" text_original="Site Permissions" description_original="Give people access to this site." valorig="">
<a class="ms-MenuUIULLink" id="mp1_0_10_Anchor" href="javascript:;" onclick="return false;">
<span class="ms-MenuUIIconLarge" style="white-space: nowrap;">
<img width="32" height="32" class="ms-MenuUIULImg" id="mp1_0_10_ICON" src="/_layouts/images/Permissions32.png" alt="" title="">
</span>
<span class="ms-MenuUILabel" id="zz7_MenuItem_SitePermissions">
<span style="white-space: normal;">Site Permissions</span>
<br>
<span class="ms-menuitemdescription" style="white-space: normal;">Give people access to this site.</span>
</span>
</a>
</div>
</li>
The wrapper DIV has a class of ms-MenuUIULItem but this is used for every item in Site Actions. So instead of using the class we will use an attribute selector to target just Site Permissions. There are also several SPAN tags in use so we will use the class ms-MenuUIIconLarge in order to only target the SPAN wrapped around the icon image.
/* Hide default Site Permissions icon */
div[text="Site Permissions"] span img {
display: none;
}
/* Add icon to Site Permissions text */
div[text="Site Permissions"] .ms-MenuUIIconLarge:before {
content: '\e805'; /* Lock icon in Fontello */
font-family: fontello;
font-size: 30px; /* Size of icon */
color: #AD1716; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
padding-left: 5px; /* Adjust padding so icon is centered in existing space */
}
/* Alter icon on hover */
div[text="Site Permissions"] .ms-MenuUIIconLarge:hover:before {
color: #12AD27; /* Color of icon on hover */
}
Any of the items in the Site Actions menu can be altered using this method. You just need to change the attribute selector to pinpoint the appropriate menu item. I was able to capture the HTML code by using Firebug in Firefox however any DOM inspector in a browser should work.
What we have been doing is nice, but is tiny. Let’s put an icon font glyph in a larger area in SharePoint. Here is the HTML (trimmed for demonstration purposes) for the “I like it” & “Tags & notes” social links in SharePoint.
<a title="Tags this page with 'I Like It.'" id="AddQuickTag_ctl00_ctl37" class="ms-socialNotif">
<span>
<span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">
<img src="/_layouts/images/mossfgimg.png" alt="Tags this page with 'I Like It.'" id="AddQuickTagImg_ctl00_ctl37" style="border:0; left:-0px !important;top:-132px !important;position:absolute;">
</span>
<span class="ms-socialNotif-text">I Like It</span>
</span>
</a>
<a title="Tags help you remember links and classify the page." id="TagsAndNotes_ctl00_ctl37" class="ms-socialNotif">
<span>
<span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">
<img src="/_layouts/images/mossfgimg.png" alt="Tags help you remember links and classify the page." id="TagsAndNotesImg_ctl00_ctl37" style="border:0; left:-0px !important;top:-300px !important;position:absolute;">
</span>
<span class="ms-socialNotif-text">Tags & Notes</span>
</span>
</a>
If you look closely at the code you will see that both social icons use the ms-socialNotif CSS class. This CSS class can be used to target both social links, then we can use an attribute selector to target each social link separately. Since there is sharing of properties, we can remove duplicate info and condense down our CSS. The social links also introduce a challenge with the state of previously set tags and notes, as well as a different type of hover style.
/* Hides default SharePoint Social Data images */
.ms-socialNotif img,
.ms-socialNotif span {
display:none;
}
/* Adjust padding around social data container */
.ms-socialNotif-Container {
margin: 0 10px 0 0;
}
/* Alter height of divider */
.ms-socialNotif-groupSeparator {
height: auto;
}
/* Hyperlink around icon/button
-Sets new width and height for Social Data icons */
a.ms-socialNotif,
a.ms-socialNotif {
width: 35px;
height: 30px;
}
/* Shared properties for new Social Data icons */
a.ms-socialNotif:before {
font-family: fontello;
font-size: 25px; /* Size of icon */
color: #A9A9A9; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Off state icon for "I like it" */
a.ms-socialNotif[ID*=AddQuickTag]:before {
content: '\e800'; /* Smiley icon in Fontello */
}
/* Hover state icon for "I like it" */
a.ms-socialNotif[ID*=AddQuickTag]:hover:before,
a.ms-socialNotif[ID*=AddQuickTag]:focus:before {
content: '\e800'; /* Smiley icon in Fontello */
color: #54AD28;
}
/* Off state icon for "Tags and Notes" on a page with *no* previously set tags
-This seems repetitive based on style below (a.ms-socialNotif[title*="0 tags or notes"]) but this is required to show the off state on page load. */
a.ms-socialNotif[ID*=TagsAndNotes]:before {
content: '\e804'; /* Tags icon in Fontello */
}
/* Hover state icon for "Tags and Notes" and On state for "Tags and Notes" on a page with previously set tags - only shows up after hovering over icon once */
a.ms-socialNotif[ID*=TagsAndNotes]:hover:before,
a.ms-socialNotif[ID*=TagsAndNotes]:focus:before,
a.ms-socialNotif[title*="tags or notes"]:before {
content: '\e804'; /* Tags icon in Fontello */
color: #4098AD;
}
/* Off state icon for "Tags and Notes" on a page with *no* previously set tags
-This is needed to override On state set in previous style statement. */
a.ms-socialNotif[title*="0 tags or notes"]:before {
content: '\e804'; /* Tags icon in Fontello */
color: #A9A9A9;
}
/* Changes default SharePoint hover styles */
.ms-socialNotif:hover,
.ms-socialNotif:focus {
background-color: transparent;
border:1px solid transparent;
}
The SharePoint 2013 code for search doesn’t differ too much from what was used for SharePoint 2010. A class name has changed for the wrapping HTML (trimmed for demonstration purposes):
<a href="javascript: {}" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_SearchLink" class="ms-srch-sb-searchLink" title="Search">
<img alt="Search" id="searchImg" class="ms-srch-sb-searchImg" src="/_layouts/15/images/searchresultui.png?rev=23">
</a>
In addition to the class name change there is new hover effect that needs to be removed that OOTB SharePoint provides. Here is the final CSS:
/* Hide default Search icon */
.ms-srch-sb-searchLink img {
display: none;
}
/* Add icon to Go anchor */
.ms-srch-sb-searchLink:before {
content: '\e801'; /* Magnifying glass icon in Fontello */
font-family: fontello;
font-size: 16px; /* Size of icon */
color: #3ABCFE; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Alter icon on hover */
.ms-srch-sb-searchLink:hover:before {
color: #1B920B; /* Color of icon on hover */
}
/* Remove OOTB search Go anchor hover formatting */
.ms-srch-sb-searchLink:hover {
background: transparent;
text-decoration: none;
}
Here is the HTML (trimmed for demonstration purposes) for the Follow link in the Suite Bar, which goes across the top of a SharePoint 2013 site:
<a style="display:inline-block;" class="ms-promotedActionButton" id="site_follow_button">
<span class="s4-clust ms-promotedActionButton-icon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
<img style="position: absolute; left: -218px; top: -48px;" alt="Follow" src="/_layouts/15/images/spcommon.png?rev=23">
</span>
<span class="ms-promotedActionButton-text">Follow</span>
</a>
Based on the HTML, this will be straightforward CSS. We can target the Follow icon through the unique ID site_follow_button on the anchor (A).
/* Hide default Follow icon */
#site_follow_button .s4-clust {
display: none !important; /* !important necessary to override OOTB inline style */
}
/* Add icon to anchor */
#site_follow_button:before {
content: '\e800'; /* Smiley icon in Fontello */
font-family: fontello;
font-size: 14px; /* Size of icon */
color: #3ABCFE; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
margin-right: 5px;
}
/* Alter icon on hover */
#site_follow_button:hover:before {
color: #54AD28;
} 
Everything so far has been changing out images for icon font glyphs but you can just as easily add in icons that weren’t there before. For example, let’s add an icon in the Site Actions menu, which in SharePoint 2013 has all of the menu item icons hidden. The following is the HTML (trimmed for demonstration purposes) for the Site Contents link in the Site Actions drop down menu:
<li class="ms-core-menu-item">
<a class="ms-core-menu-link" id="mp1_0_5_Anchor" href="javascript:;" onclick="return false;" title="Site contents">
<div class="ms-hide">
<img src="/_layouts/15/images/allcontent32.png?rev=23" alt="" title="" id="mp1_0_5_ICON">
</div>
<div class="ms-core-menu-label" id="zz9_MenuItem_ViewAllSiteContents">
<span class="ms-core-menu-title">Site contents
</div>
</a>
</li>
Interestingly enough, an icon is present (allcontent32.png) but is hidden with ms-hide. But we are going to ignore that and add an icon by targeting the SPAN tag with a unique ID that contains ViewAllSiteContents. Here is our CSS:
/* Add icon to text */
div[id$="ViewAllSiteContents"] .ms-core-menu-title:before {
content: '\e803'; /* List icon in Fontello */
font-family: fontello;
font-size: 14px; /* Size of icon */
color: #3ABCFE; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
margin: 0 5px 0 -10px;
}
/* Alter icon on hover */
div[id$="ViewAllSiteContents"] .ms-core-menu-title:hover:before {
color: #262AAD;
}
Throughout all of these examples, the technique remains the same:
:before pseudo element to insert a glyph from the icon font.You can grab a copy of all of the CSS used in these demos and the custom font created at Fontello:
I came across an oddball issue today where the background area of the Styles preview boxes in the Ribbon turned black when using a custom master page in SharePoint 2013. Here is a quick CSS fix that will correct this issue.
Here is a screenshot of what is going on:
And here is a CSS style statement that will force the background back to white:
/* Fixes bad background color bug in Styles preview boxes */
.ms-rte-stylePreviewBoxInner {
background: #fff !important; /* !important used to override inline SharePoint style */
}
When you look at the source code, the background color is actually coded as an inline style for the preview area. No styles in my custom branding created the issue. It literally popped up out of nowhere. OOTB branding has an inline style of white, and the site I am using with custom branding applied has an inline style of black.
Ever have one of those days where SharePoint just makes you say, umm, WTF??? Yeah, me too. Tag another one on the long list.
I wanted to absolute position the ribbon’s tab row right DIV contents of SharePoint 2013 to a different location on the page. In non-SharePointy code speak, I just wanted to move the links on the right side of the page that consist of Share, Follow, Edit/Save, Focus on Content and Developer Dashboard to a different place on the web page.
Seems easy, right? SharePoint 2013 laughed in my face.
These links and icons are child elements of a DIV that is part of a trio of elements that makes up the SharePoint ribbon. Essentially the ribbon is an unordered list sandwiched between two DIVs that each provide a peripheral area where you can stick other stuff. The links and icons are in the right DIV, aptly named through the ID RibbonContainer-TabRowRight. It also has a few classes assigned to it, one of which is ms-cui-TabRowRight.
Based on the available code in the page, my CSS started as this:
.ms-cui-TabRowRight {
position: absolute;
}
I don’t have to go any farther than that to create an issue:
The ribbon tabs collapse. And the whole set of links/icons that I was targeting disappeared from the page. Upon further investigation two things emerged:
.ms-cui-tts-scale-2 .ms-cui-tt-a {
overflow: hidden;
width: 20px;
}
The 20 pixel width explains the tiny ribbon tab slivers you see in the screenshot above.
If you take away the absolute positioning or just do something as tame as changing it from absolute to relative, then the inline style goes back to display: block and the applied CSS class for the UL switches back to .ms-cui-tts.
OK so maybe it was the absolute positioning… when you move elements like that things can go wonky. So I switched it to a float (keep in mind this DIV is floated by SharePoint in the first place):
.ms-cui-TabRowRight {
float: left;
}
Well that doesn’t break anything in SharePoint. 
It also doesn’t do much for me either. So let’s add a negative left margin:
.ms-cui-TabRowRight {
float: left;
margin-left: -10px;
}
Annnnd we are back to breaking SharePoint.
Note that if you leave the DIV as a right float (OOTB treatment) or just specify a negative left margin (which doesn’t change anything in the design) SharePoint remains happy. You can even set negative top or bottom margins. The inline style and CSS class gets changed when you try to move these items into what SharePoint perceives as the ribbon tabs space… or something like that? An absolute position OR the combination of a left float AND negative left margin creates the issue.
No big deal, I can fix troublesome CSS with new CSS (note I switched back to absolute positioning in order to better control placement):
/* Move Ribbon Tab Row Right (Share/Follow) to the left of Suite Bar Right */
.ms-cui-TabRowRight {
position: absolute; /* Remove from content flow and create precise placement based on parent container */
top: -35px; /* Shift above default placement */
left: 10px; /* Add space to left between page edge and text */
display: block !important; /* Override inline OOTB SharePoint style */
}
/* ms-cui-tts-scale-2 class is auto applied when .ms-cui-TabRowRight is absolute positioned -which results in small ribbon text space. Following declarations correct the issue. */
.ms-cui-tts-scale-2 .ms-cui-tt-a {
width: auto; /* Reset small width to auto size based on length of text */
padding: 0 9px; /* Pad out the ribbon text */
}
Some of this could have been avoided if I was dealing with a custom master page and just manually moved the links and icons out of the ribbon’s peripheral right area, but the idea was I needed to make a change with only CSS, so there you go.
When you search for ways to hide items from the SharePoint Ribbon, such as the Font formatting block or the Edit HTML Source option, you will generally find a bunch of methods that involve fancy code and creating a new project in Visual Studio. One thing the Ribbon does have going for it is a ton of added classes and IDs to all the various options, buttons, links, blocks and components. You can target and remove elements from the Ribbon by just using CSS.
If your user isn’t loading CSS for some reason, you honestly have a bigger problem on your hands than if they can see the Bold option in the Ribbon. So set aside the programatic approaches and just add these simple snippets to your custom CSS file. This list is by no means comprehensive as there are so many options in the Ribbon, but it will get you going in the right direction and provide how you can target any item you wish in the Ribbon.
I use browser inspector tools constantly, especially with SharePoint, and this is no exception. Break out your favorite browser and inspector tool and take a look at something in the Ribbon. I prefer Firefox and Firebug, and use it pretty much exclusively for SharePoint client-side code exploration.
For this post I am using a SharePoint 2013 Enterprise Wiki site and targeting a rich text editor control, but these techniques can be applied to any site template in any SharePoint version. The code snippets provided work for SharePoint 2010, SharePoint 2013 and SharePoint Online.
#Ribbon\.EditingTools\.CPEditTab\.Font {
display: none;
}To hide the font face AND size:
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-0 {
display: none;
}To hide the ONLY the font face:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Fonts-Medium {
display: none;
}To hide the ONLY the font size:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontSize-Medium {
display: none;
}Using this technique you can target any number of things in the Ribbon area. Here is a list of selectors to get you started:
Entire font section:
#Ribbon\.EditingTools\.CPEditTab\.Font
Font face and size:
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-0
Font face:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Fonts-Medium
Font size:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontSize-Medium
Font formatting (all):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1
Font formatting (Bold, italic, underline, strikethrough, sub/super script):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-0
Font formatting (Highlight and font color):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-1
Font formatting (Clear formatting):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-2
Bold:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Bold-Small
Italic:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Italics-Small
Underline:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Underline-Small
Strikethrough:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Strikethrough-Small
Subscript:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Subscript-Small
Superscript:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Superscript-Small
Highlight:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontBackgroundColor-Small
Font color:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor-Small
Entire paragraph section:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph
Paragraph formatting (Bullets, numbering, outdent/indent, paragraph direction):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0
Paragraph formatting (Alignment options): #Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-1
Bullets and numbering:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-0
Bullets:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Bullets-Small
Numbering:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Numbering-Small
Outdent and indent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-1
Outdent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Outdent-Small
Indent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Indent-Small
Paragraph direction (both):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-2
Left to right:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.LTR-Small
Right to left:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.RTL-Small
Align left:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignLeft-Small
Align center:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignCenter-Small
Align right:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignRight-Small
Justified:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignJustify-Small
Entire style section:
#Ribbon\.EditingTools\.CPEditTab\.Styles
Paragraph:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle0-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:first-child /* Within drop down */
Heading 1:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle1-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(2) /* Within drop down */ (browser support)
Heading 2:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle2-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(3) /* Within drop down */ (browser support)
Heading 3:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle3-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(4) /* Within drop down */ (browser support)
Heading 4:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle4-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(5) /* Within drop down */ (browser support)
Heading Alternate (All):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr
Heading 1 Alternate:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:first-child
Heading 2 Alternate (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(2)
Heading 3 Alternate (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(3)
Heading 4 Alternate (browser support): #Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(4)
Text Styles (All):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles
Text Styles 1st Row:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child
Normal:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:first-child
Quote (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(2)
Intense Quote (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(3)
Emphasis (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(4)
Intense Emphasis (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(5)
Text Styles 2nd Row (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2)
Reference:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:first-child
Intense Reference (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(2)
Accent 1 (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(3)
Accent 2 (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(4)
Wow just the title of this blog post is a mouthful. Just wait, it will get worse. This post was inspired by one of my students who wanted to hide the second and third search scopes (Result Sources in SharePoint 2013) in the drop down in the SharePoint user interface AND needed to provide support for IE8. Using CSS this can be done really quickly.
To make things easier, I will refer to the search scopes/result sources as just “search scopes”.
If you use a browser inspector tool like Firebug, you will see that the HTML source code for the drop down box is straightforward but lacks unique identifiers for each scope:
<div id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_NavDropdownList" class="ms-qSuggest-list" style="width: 249px;"> <div class="ms-qSuggest-listItem">Everything</div> <div class="ms-qSuggest-listItem">People</div> <div class="ms-qSuggest-listItem">Conversations</div> <div class="ms-qSuggest-listItem">This Site</div> </div>
If you want to target the first nested DIV (the Everything scope) then you could add this CSS style statement to your site:
/* Hide the "Everything" Scope */
.ms-qSuggest-list div:first-child {
display:none;
}
End result:
The first-child pseudo element selector offers good browser support. If you want to target the second scope (People), third scope (Conversations) or fourth scope (This Site), then you could use a nth-child pseudo element selector, which was introduced in CSS3. Here is a style statement using the nth-child in place of first-child.
/* Hide the "People" Scope */
.ms-qSuggest-list div:nth-child(2) {
display:none;
}
End result:
For the Conversations scope you would change it to :nth-child(3) and for the This Site scope, :nth-child(4). It is neat and tidy, and not supported in Internet Explorer 8.
Booze helps.
No really, there is a solution (at least in addition to the booze).
One of the often ignored selectors in CSS2 is the sibling combinator selector. It comes in two flavors, adjacent and any sibling. For an adjacent combinator you use a plus sign (+) between two selectors and it requires that the two elements are adjacent to each other. For the any sibling (or general sibling) combinator, you use a tilde (~) instead and it dictates that the elements have to be siblings, but not adjacent. For example:
Sample sibling combinators
Using sibling selectors, the second, third and/or fourth search scopes can be targeted. And better yet, it is supported by IE8. The only issue is that it is not as neat and tidy as the nth-child selector.
Let’s walk back through the same examples as above, this time using sibling selectors. The first example doesn’t need to change since IE8 does support the first-child pseudo element. We are going to take advantage of this and use it again to target other scopes.
/* Hide the "Everything" Scope */
.ms-qSuggest-list div:first-child {
display:none;
}
To target the second scope (People), third scope (Conversations) or fourth scope (This Site), we are going to start what we did for the Everything scope and add a sibling selector to pinpoint a specific sibling starting from the first DIV (Everything scope).
/* Hide the "People" Scope */
.ms-qSuggest-list div:first-child + div {
display:none;
}
End result:
To hide the Conversations scope, you can use this:
/* Hide the "Conversations" scope */
.ms-qSuggest-list div:first-child + div + div {
display: none;
}
And for the This Site scope, use this:
/* Hide the "This Site" scope */
.ms-qSuggest-list div:first-child + div + div + div {
display: none;
}
As an alternative if you want to hide all of the scopes except for the Everything scope, you can use the any sibling selector instead:
/* Only show the "Everything" scope */
.ms-qSuggest-list div:first-child ~ div {
display: none;
}
End result:
It is important to note that these style statements have been created to provide support for IE8, but all major browsers will support them. You can add these styles in an IE8 specific CSS file, or just use these instead of nth-child selectors.
Last week I posted CSS for hiding SharePoint ribbon elements. Some of the selectors in that post use nth-child pseudo element selectors. If you want to hide these elements in IE8, then you need to use sibling selectors instead.
For example, to hide the Heading 2 Alternate style in the ribbon Styles section, you could add this to your CSS file:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(2) {
display: none;
}
The backslashes embedded in the style statement escape the periods used in the ID, which would normally signal a class name in CSS.
For IE8, you would need to use the following style statement instead:
/* Hide "Heading 2 Alternate" from Styles */
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:first-child + td {
display: none;
}
To hide the Heading 4 Alternate from Styles, the CSS style statement would be updated to the following:
/* Hide "Heading 2 Alternate" from Styles */
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:first-child + td + td + td {
display: none;
}
Sibling selectors can get you out of some tight spots with IE8, but they can’t help you with some variations of the nth-child selectors, such as targeting all of the odd or all of the even elements. For that you will need to turn to jQuery.
I had a great question from a student last week… how can you stack the SharePoint 2013 Suite Bar on top of the Ribbon, thus collapsing down the needed real estate for the top area of your SharePoint site. You can accomplish this with a few lines of CSS.
If you look at the Suite Bar, the items on the left (SharePoint text and links to tools) aren’t necessary, but the right side has some pretty vital stuff (welcome menu/sign in link and Site Actions).
If you look at the Ribbon, items on the right are important but items on the left (sharing, focus on content toggle, etc.) are less so.
These two areas can be collapsed down to reduce the needed space for the Suite Bar and the Ribbon at the top of your site.
You can hide the unnecessary items with the following CSS:
/* Hide the left Suite Bar and right ribbon areas */
#suiteBarLeft {
display: none;
}
#RibbonContainer-TabRowRight {
display: none !important; /* !important needed to override SharePoint inline style */
}
Next the Suite Bar needs to be removed from the flow of the document so the Ribbon area can slide up to the very top of the page. You can do this with a simple float:
#suiteBar {
float: right;
width: auto;
}
Works great but the Suite Bar is under the Ribbon area.
The DIV that wraps the Suite Bar is before the DIV that wraps the Ribbon, so their natural stacked order is for the Ribbon to be on top. Trying to fix this by targeting the Suite Bar and altering the stacking order (z-index) doesn’t work, but you can target the Ribbon and alter the stacking order for that instead.
#s4-ribbonrow {
z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
}
This works, but renders the Ribbon useless because you can no longer click on the Ribbon tabs. Add a little secret sauce in the form of position:static to get this working again:
#s4-ribbonrow {
z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
position: static; /* Secret sauce - needed to maintain ribbon functionality */
}
And the final result:
/* Hide the left Suite Bar and right ribbon areas */
#suiteBarLeft {
display: none;
}
#RibbonContainer-TabRowRight {
display: none !important; /* !important needed to override SharePoint inline style */
}
/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
#suiteBar {
float: right;
width: auto;
}
/* Alter stacking order and set positioning for ribbon */
#s4-ribbonrow {
z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
position: static; /* Secret sauce - needed to maintain ribbon functionality */
}
Everyone seems to love accordion navigation effects and I love CSS so it was only natural to try to implement an accordion effect for SharePoint navigation using only CSS. Typically folks use JavaScript or jQuery to add in an accordion, but it is possible to do it with pure CSS. When it comes to SharePoint there is only one caveat – you can create a CSS only accordion menu as long as the accordion effect fires on hover and not when the navigation header is clicked. Let’s see why, and let’s see how…
If you want to skip the why and you can go straight to the how.
There are lots of demos out there for creating an accordion menu effect using only CSS. All of these techniques have two types of content:
These techniques also rely on the presence of one of two HTML elements:
<a href="#section">Once all of these HTML elements are in place you can use CSS to style the headers and to hide the accordion content that should be displayed on toggle. Then using CSS and the :checked pseudo-class for form inputs or the :target pseudo-class for the anchor, the hidden accordion content is displayed when the user “checks” the form input or “clicks” the hyperlink (since the link has no real target the user is not taken to a different web page). It is nice and tidy and widely supported with the exception of IE 6, 7 & 8. For those browser versions you can use something like Selectivizr to create support.
The generated SharePoint navigation, like lots of areas within SharePoint, is locked down and you can’t edit the HTML that is generated for the menu. Also by default, all of the navigation items are links to different pages so an accordion would be useless because when you selected an item it would not get a chance to show the hidden accordion content before it runs off and changes the page.
Luckily in SharePoint you can create your own navigation headers that don’t link to anything. This takes care of the issue of the page changing when you want instead to show accordion content. But when you don’t specify a target URL for a custom header in the SharePoint navigation settings, you only get the simple SPAN tags in the generated navigation HTML and not the anchor tag. And unfortunately you can’t specify an in-page anchor like “#” or do other tricks like “javascript:function Z(){Z=''}Z()“. The result is you can’t include the anchor tag in your HTML. So this knocks out one of the two ways to show the accordion content (via clicking an anchor).
Lest we forget that we can’t modify the HTML generated for the navigation, so there is no way to use the form input method either for showing accordion content.
Both of these methods…
<a href="#section">…are non-starters for SharePoint. Hence why you can’t do an accordion menu that is activated via a user clicking navigation header text.
One thing I love in CSS is the :hover pseudo-class. It isn’t picky, it doesn’t require an anchor tag. You can slap that baby on to most anything and when you hover over that element on the page, be it a link, a header, a DIV or a random bulleted list item, it can have a hover effect. By using the :hover pseudo-class we can find a compromise for an accordion styled navigation menu in SharePoint.
First off, a JavaScript or jQuery solution for an accordion effect is going to be the more elegant way to go. You just get the flexibility you need once you move over to scripting. However, if you need a CSS only solution it is possible. There is just one burp along the way that creates some jagged usability. More on that later.
.ms-core-listMenu-verticalBox li.static {
height: 2em;
overflow: hidden;
}
Or the following code for SharePoint 2010:
.s4-ql li.static {
height: 2em;
overflow: hidden;
}
If your headings wrap to multiple lines, you will need to adjust the height value.
.ms-core-listMenu-verticalBox li.static:hover {
height: auto;
}
Or for SharePoint 2010 you will add this:
.s4-ql li.static:hover {
height: auto;
}
Surprisingly, that is it! Now this CSS does not style your headers and content, it only gives you the hide/show effect. You can keep going to make it fancy.
Previously I mentioned there was a bit of a burp for usability when you use this method. If you have more than one heading on your site, mouse over the first heading (and let the accordion content show), then mouse straight down to the next heading. When you hit heading #2 the accordion content will show and heading #1 content will disappear, thus making heading #2 content slide up to take its place. If you have a short list of content, the heading #2 content will slide right out from under your mouse thus killing the hover state and heading #2 content will also disappear.
From this point forward the code samples will be for SharePoint 2013. However, any of this CSS can be used for SharePoint 2010. Just replace .ms-core-listMenu-verticalBox with .s4-ql in the CSS style statements below.
It is also easier to comment out the CSS code that creates the hide/show for accordion content until you are done styling the menu.
The header text is just plain text that is not wrapped in an anchor tag. When the user hovers over the text they will not get the typical “hey pal, this is a link” style cursor. So we need to add to the CSS to change the text to look like a link when you hover over it.
.ms-core-listMenu-verticalBox li > span.menu-item {
cursor: pointer;
}
You can continue to jazz it up:
/* Format the headers */
.ms-core-listMenu-verticalBox li > span.menu-item {
cursor: pointer;
background: #0171C6;
color: white;
border: solid #fff;
border-width: 1px 0;
}
Next you can add some style to the accordion content:
/* Format the accordion list items */
.ms-core-listMenu-verticalBox a.menu-item {
color:#000;
background:#C9D4FF;
border:1px solid #97C8F7;
border-bottom:none;
}
/* Format the header hover, list item hover and currently selected item */
.ms-core-listMenu-verticalBox li > span.menu-item:hover, /*Header */
.ms-core-listMenu-verticalBox a.selected, /* Selected */
.ms-core-listMenu-verticalBox a.menu-item:hover /* List item */{
color:#FFF;
background:#073D7D;
}
If you want to get really fancy you can tweak the hide/show CSS code to include a CSS transition. Just be aware that it will further accentuate the usability issue previously mentioned.
.ms-core-listMenu-verticalBox ul.root > li.static {
max-height: 2em;
overflow: hidden;
transition: max-height 1s linear;
}
.ms-core-listMenu-verticalBox ul.root > li.static:hover {
max-height: 500px;
}
As a follow up to the post Hide items from SharePoint Ribbon using CSS, here are a few more selectors to hide specific font faces from the font formatting options in the Ribbon. I received a question from a SPTechCon Boston 2014 attendee about this and I have to say, I don’t blame the guy for not wanting to give his users 14 font face options for their content. :)
This is a continuation of a previous post (Hide items from SharePoint Ribbon using CSS) so please check out that post first for more in-depth introduction information and how-to.
The font face dropdown in the Ribbon provides two generic options, Body (theme font) and Heading (theme font). Next is 12 individual faces that vary from Calibri to Comic Sans to Times New Roman. Here are the CSS selectors to target in your custom CSS file to hide any one of these options:
| Font face groups: | |
|---|---|
| Theme Fonts: | #msFontFamily-0 |
| Fonts: | #msFontFamily-1 |
| (If you take away both Theme Fonts and Fonts, it is better to remove the entire font dropdown using #Ribbon\.EditingTools\.CPEditTab\.Font\.Fonts-Medium) | |
| Font faces: | |
| Body (theme font): | #fseaFont-0-0-Menu |
| Heading (theme font): | #fseaFont-0-1-Menu |
| Calibri: | #fseaFont-1-0-Menu |
| Comic Sans: | #fseaFont-1-1-Menu |
| Courier: | #fseaFont-1-2-Menu |
| Garamond: | #fseaFont-1-3-Menu |
| Georgia: | #fseaFont-1-4-Menu |
| Impact: | #fseaFont-1-5-Menu |
| Lucida Console: | #fseaFont-1-6-Menu |
| Palatino Linotype: | #fseaFont-1-7-Menu |
| Segoe UI: | #fseaFont-1-8-Menu |
| Tahoma: | #fseaFont-1-9-Menu |
| Times New Roman: | #fseaFont-1-10-Menu |
| Trebuchet MS: | #fseaFont-1-11-Menu |
Example code:
/* Hide Comic Sans, Segoe UI and Tahoma from the Ribbon */
#fseaFont-1-1-Menu,
#fseaFont-1-8-Menu,
#fseaFont-1-9-Menu {
display: none;
}
You can apply the same technique to remove some of the font size options as well.
| Font sizes: | |
|---|---|
| 9: | #fseaFontSize-0-0-Menu |
| 11: | #fseaFontSize-0-1-Menu |
| 13: | #fseaFontSize-0-2-Menu |
| 18: | #fseaFontSize-0-3-Menu |
| 24: | #fseaFontSize-0-4-Menu |
| 36: | #fseaFontSize-0-5-Menu |
| 48: | #fseaFontSize-0-6-Menu |
| 72: | #fseaFontSize-0-7-Menu |
Example code:
/* Hide font sizes 36, 48 and 72 from the Ribbon */
#fseaFontSize-0-5-Menu,
#fseaFontSize-0-6-Menu,
#fseaFontSize-0-7-Menu {
display: none;
}
