Join Simon Allardice for an in-depth discussion in this video Detecting what CSS styles are being applied, part of SharePoint Designer 2007: Branding SharePoint Sites.
When you're working with CSS in SharePoint here is one of your first challenges. You are going to look at a page and want to find out what styles are being applied to one particular link, whether that's the header or one of the tabs or say the link View AllSite Content here. Now you might think that you can just open View Source, find the element and visually look to see what classes, or IDs are being used on it, and that kind of works a little bit, but it's not always that reliable. Once again, if you're coming from a background of validating well-structured XHTML and CSS, you might be very happy with this.
That will too be very reliable. In SharePoint, not so much. It's still can be useful. So if I right-click and say View Source, do a Find for View All Site content, I can see it here, and I might just take my eyeballs and look around it. And see it seems to be contained in a div with a class equals ms-quickLaunch header. I could take that and find out what's being applied there. Well how would I do it? By switching back over into SharePoint Designer, if you don't have a copy of core.css, which as I've mentioned is a useful thing just to have one lying around.
But if you have, say, the page open in Design View, you will see your Apply Styles menu. If you go up to the top of that where you see the phrase core.css and just double-click that, and it should open it up. And in here I could do a Find on the phrase ms-quicklaunchheader. Jump down. It's at line 917. We appear to have quite a few things around it. Because if you see here we've got a ms-quickLaunch at line 909 and quicklaunchheader, quicklaunchheader with an anchor tag, quicklaunchheader with an anchor tag of a hover state.
There's a whole bunch of stuff that could be going on. And yes, changing these may be completely reliable. But sometimes you'll also find that because that's been embedded in another div, or another table tag, you might have multiple styles being applied to it. So I am going to show you a better way to reliably find where you have to change. Going back into Internet Explorer here. Now I'm on Internet Explorer version 8, which has a built-in feature called the IE Developer tools. These are available for IE 6 and IE 7, but they are an extra download.
You'd have to go and search for the phrase IE Developer toolbar. And I am going to show you a couple ways of doing it. But on an IE 8 I have my page opened, I just hit F12, and it opens up this whole developer screen here. Well it doesn't look immediately obvious here, but what I'm doing is I can break down and open up, and start going through the HTML that the page has generated. Yes, I am going to have to dropdown a little bit in there, but I can actually say and find that phrase View AllSite Content.
And it's going to show me in a very structured DOM format, document object model, of exactly where that is in the HTML, not only that, but show me over here all the different styles that could be being applied to it. So I can see that I have my ms- quicklaunchheader here, which is affecting the font size of 8 points and the font weight of normal. And that because it's a link it's also having the Anchor Tag that the color is 003399. But I can also see things like where's my font family coming from? Well it's all the way back up here.
That in core.css in the dot ms-nav is a font family of tahoma there. So this allows me to see where my different styles are actually being applied. You also have Trace Styles option here, which is actually showing you kind of the other way round about where the individual piece i9s coming from. More focusing on the individual things like text alignment, font size, font family, instead of the actual style names themselves. So very useful stuff. You got the Layout option just kind of giving you some hints and reminders on the box model, that kind of thing.
There's an awful lot you can do with the IE 8 Developer toolbar. It'll allow you to have a CSS browser, as I can see by clicking this tab here, so definitely something worth get into grips with if you're going to spend a lot of time doing this. If you're not an IE 8 person, you might be aware of the equivalent on the Firefox browser, which is called Firebug. If I open up F12, there it kind of splits the screen in two. The cool thing about this is as I start to expand the different parts of HTML, when I highlight the different parts of my page, like my table class is highlighting everything, but as I step down and expand it, I've got my table body and the individual table rows.
I can start to identify the different parts of my page itself. I can perhaps drop down in here into my table row eventually start finding the tables. Here is where we really get to see kind of the levels of nesting that we have that were nesting one inside another. But I'm starting to narrow that down and expand it to the different things that I have. Again, I do have to drop down, as you can see, several different levels inside that. There is the quickLaunch bar dropping down even further, QuickLaunchmenu a body inside that, just a whole bunch of different stuff in here.
Now one of the great things about it is every time you select an element, it will actually tell you a style area over here and tell you where it's drawing some of its information from, where its drawing the font family from, the font size, the line height, where its being inherited from the TD tag override, the table.ms-nav. So another way of looking at it. This is a plug-in. It's a free plug-in for the Firefox browser, and it's available from getfirebug.com. Using either of these tools, IE 8 Developer tools or Firebug, you can find exactly where a particular piece of CSS is affecting your elements.
You want to pick one of these tools and become very, very comfortable using it. Taking just you own eyeballs to the markup that SharePoint generates is a recipe for frustration.
- Setting site permissions
- Customizing existing CSS files
- Implementing the WCM (Web Content Management) features in SharePoint
- Using master pages
- Designing accessible pages
- Creating a Page Layout template
- Editing and copying themes
- Building out the Publishing Portal
- Customizing navigation