Professional SharePoint® 2010 Branding and User Interface Design

CSS in SharePoint

❘

197

Now go back to your browser and refresh your page. It should look like Figure 7-9.

FIGURE 7-8

FIGURE 7-9

584644c07.indd 197584644c07.indd 197 10/27/10 11:46:45 AM10/27/10 11:46:45 AM

198

❘

CHAPTER 7 CASCADING STYLE SHEETS IN SHAREPOINT

As you can see, the headers for the Quick Launch area are all now italicized.

You might have noticed when you looked at the actual CSS code in

corev4.css that the color rule

is a bit weird. Typically, the CSS rule for setting the color of an element resembles the following:

color: #0072bc;

This would set the foreground color for your element to #0072bc (a sort of steel-blue color); and if

you referred back to Firebug (see Figure 7-8), that is how the rule appears. However, the actual code

in

corev4.css looks like the following:

/* [ReplaceColor(themeColor:”Dark2”)] */ color:#0072bc;

This means that this color is a themed color that is initially set to color #0072bc. If you don’t

remember what this means, it is explained in more detail in Chapter 5. Just understand that the

defi ned color can also be overridden by the colors defi ned in whichever theme is currently applied to

the site.

Using this same approach, you can easily locate and modify any of the rules being applied to your

site collection elements using Firebug and SPD. This ...