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. Continue reading CSS Challenge Response: Change dialog box background

CSS Challenge Response: Simple styles for SharePoint list

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

Dustin and Heather will be presenting at SPTechCon Boston in July

If you are headed to SPTechCon in Boston this July, please stop by one of our sessions and say hello! The conference is running a registration special through June 15th. Save $400 bucks. 🙂

Our sessions…

Tuesday, July 24, 11:30 AM – 12:45 PM

Creating Custom Views with any HTML and JavaScript – It’s Magic

See how easy it is to bend SharePoint’s XSL-based list view (a.k.a. the Data View Web Part) to your will, creating a view that generates any HTML and JavaScript your geeky heart desires. And now, learn how to do it without using SharePoint Designer. With just a Web browser, you’ll learn the secrets of creating magical, powerful and totally customized list views. Web designers and developers: Don’t miss this session!

Wednesday, July 25, 11:30 AM – 12:45 PM

Learn How to Put HTML5 in Your SharePoint Master Page

HTML5 is the new Web hotness. If it seems daunting, or you think you have to scrap what you have now and start over, then check out this class. Learn how to easily convert your existing SharePoint master page to HTML5 while creating better structure for your content. And yes, everyone will still be able to access your site!

Wednesday, July 25, 3:30 PM – 4:45 PM

Make SharePoint Look Good!

Master pages are so yesterday. The real key to branding SharePoint is CSS. Update SharePoint controls, create different branded versions of your Web site, and write crafty CSS statements that override inline SharePoint styles. Become best friends with descendent selectors, pseudo selectors and attribute selectors. We will round out the class with taking a look at the many things CSS3 has to offer.


Add a tool tip for an image you create in CSS

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) are content supporting images and therefore can end up in other places outside of CSS.

A question that often comes up when I teach this is “what about the ALT text value for the image?”. Continue reading Add a tool tip for an image you create in CSS