SharePoint design, finding and amending default CSS in JavaScript pop-ups and elements.

On projects that I manage we are often amending the default CSS of SharePoint master pages to make things look a little better. I thought I would share the common tools that we use and also how to use these to get the CSS of pop-up menus and message boxes which aren't always on the page to inspect.

The best tool to use is to switch into Firefox and use Firebug(download needed). You can inspect any element of CSS on the page and also make real time changes to see the affects of changing the CSS without having to deploy your site to a test environment. IE also has this ability in its developer tools(F12) but it is not as good.

Recently we had made some changes to some default master pages and deployed a solution to one of our customers. One of the feedback points was to do with the fonts being too large in pop up messages. Using firebug it at first seemed like inspecting these elements was impossible. Before you can inspect them they disappear and because they are dynamically loaded by SharePoint there are no classes to be seen when the pop-ups are not activated.

A bit of head scratching later and I figured out that you could do this through the script debugger part of firebug. Click on Script, start the debugger and the JavaScript that fires will be shown in the console. Once you have what is being fired, put a break point in and step through the code using the play button until the pop-up is displayed. This may take some tinkering but once you can see the pop-up, switch into CSS mode and inspect the pop-up to see the applicable CSS. In this case H1 tags were what was causing the issue. Although we just changed the font size, the messages could also be brought on brand by some colour and font changes if needed.