CSS Challenge Response: Change dialog box background

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 background of the box but my designer tool won’t pull the information so I can see what style is controlling it.

The dialog box can be tricky. What is happening is your HTML is getting loaded up in an iFrame so you essentially have your master page within your master page. The HTML, FORM, BODY (etc.) tags are all repeated again.  The trick to controlling the dialog box is to reference the class (.ms-dialog) that is assigned to the HTML element that is within the iFrame.

Here is the CSS to control the background of your dialog box.
The second selector (.ms-dialog .s4-ca) is needed because the s4-ca DIV element also sets a background color.

/* Change dialog box background */
	.ms-dialog body.v4master,  /* Dialog box body */
	.ms-dialog .s4-ca /* Dialog box content area */ {
		background: black;
	}

The other thing to note is that you can’t use browser tools/add-ons/editors (like Firebug) to test dialog box CSS edits. The changes you make won’t get pushed through to the dialog box. You need to save the changes to the SharePoint CSS file and then close the dialog box and do a browser refresh to test your changes.

The OTHER dialog box

This CSS Challenge was actually in reference to the pop-up box that appears when you choose to insert in an item, like a picture within the rich text editor.  That pop-up box is run totally different than the standard one used to create a new item for a list.  I focused on the standard dialog box because that is the one people always ask about.

For the insert pop up box, you can still edit the background with CSS.  The popup is using dialog.master and does not use the .ms-dialog iFrame. This is important… if you have a custom master page applied to your site or you are editing v4.master, changes to your CSS file referenced by the master page will not affect the insert pop-up since it uses a different master page. You need to either edit the dialog.master file to link to your custom CSS file or specify a custom CSS file in Alternate CSS URL (Site Actions > Site Settings > Master Page) for the site.  What you set for the Alternate CSS URL will affect dialog.master.

Here is the CSS to modify the background color for the insert popup box:

/* Change popup box background */
	.ms-dialogBody, /* Body */
	.ms-dialogBody .ms-dialogBodyMain, /* Table cell that wraps table that contains links */
	.ms-dialogBody table.ms-toolbar /* Header area above links */ {
		background-color: black;
	}

If you are working with a dark background, this could be one of those things where it is easier to change the text back to black for the pop-up. Once you change the background to a dark color other design elements start to pop out that you may not want to see, like the table’s white borders. It is easy to slip into a situation where you are “fixing” way more than it is worth for having that dark background in the pop-up box. Here is the CSS to switch the text color back to black for the pop-up box:

/* Change text color inside popup box */
	.ms-dialogBody td, /* Plain text */
	.ms-dialogBody td a /* Hyperlinks */ {
		color: black !important; /* !important needed to change font color for directory links on left */
	}

These style statements focus on changing the background color and font color but can be used to alter other style properties for the dialog and pop-up boxes.

Update June 8, 2012

We aren’t done yet… another dialog box

I am updating this post to include a CSS Challenge from Jannicke.

I’m doing some custom styling of the pop-up dialogues in our intranet, and it works like a charm on all except for the dialogue for ‘Tags and Notes’. The issue is the ribbon below the title. I cannot find a way to change the background color of this.

So this one took a little digging. When you click Tags and Notes in the ribbon/header area, it generates a new pop-up window that loads SocialDataFrame.aspx. This page does not reference a master page. So any changes you make to your master page or a CSS file referenced by that master page won’t affect the Tags and Notes pop-up box. You can control the styling on this page by specifying a custom CSS file in Alternate CSS URL (Site Actions > Site Settings > Master Page) for the site.  What you set for Alternate CSS URL will affect SocialDataFrame.aspx.

The next challenge is writing a CSS statement that will affect the Tags and Notes popup box without affecting anything else in your SharePoint site. SocialDataFrame.aspx does not include a unique class or ID in the BODY element. Fortunately it does use a unique class for the TABLE element that wraps most of the page contents:

<table id="s4-mainarea" class="trcDlgMain ms-socialDataRibbonContents" cellpadding="0" cellspacing="0">

So we just need to include either .trcDlgMain or .ms-socialDataRibbonContents in our CSS statement. For this example I am going to use ms-socialDataRibbonContents because even though it is the longer class name, it makes sense when you read it thus increasing the readability of my CSS.

/* Change ribbon background in Tag and Notes popup box */
	.ms-socialDataRibbonContents #s4-ribbonrow {
 		background-color: black;
 	}