SharePoint 2013 Ribbon styles preview box – fix for bad background

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:

Screenshot showing bad background for Styles


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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.