To thoroughly customize your SharePoint site, you'll need to use a custom CSS. SharePoint offers a way to specify a single CSS file to use via the "Master page" settings for the site. However, using this approach still limits you to customizing only those IDs and classes that are included on the pages by SharePoint. Moreover, using this setting applies to both site and system pages, which may not be desirable.
With these downsides in mind, the best approach is to create a custom master page and include references to one or more custom CSS files. Follow the steps below to include a custom CSS file in your master page.
- Open SharePoint Designer (SPD) and connect to the root level of your site's site collection.
- In SPD, open the "Style Library" folder.
- Create a new CSS file and name it (e.g. "customstyles.css").
- Open your master page file in SPD.
- In the <head> tag add a link to your custom CSS just above the content place holder named "PlaceHolderAdditonalPageHead" as follows:
<link src="/Style%20Library/customstyles.css" rel="stylesheet" type="text/css" />
Your custom master page is now using your new CSS file in addition to all of the CSS files SharePoint uses out-of-the-box. The idea is that you are taking advantage of the "cascading" property of cascading style sheets by layering your custom styles on top of what SharePoint creates in order to alter the SharePoint look-and-feel as desired—like a skin.
how to i set the masterpage (in which i added this custom css) as the default for all users .. not just admins. Thx
Posted by: Berman Huber | 04/09/2010 at 06:02 AM
Berman, check in, publish, and approve your master page in the root /_catalogs/masterpage directory. Then in your browser go to [root]/_layouts/settings.aspx. Under the Look-and-Feel column click on the "Master Page" link. For the Site Pages, select your master page from the select box. If you want to force that master page for all sub-sites and overwrite any master page selections by those sub-sites, click the "Reset all.." link. Click the OK/Save button.
Posted by: Brandon Anderson | 04/09/2010 at 09:15 AM