Sharepoint

SharePoint CSS Properties
Identifying elements to customise  the style and formatting of  SharePoint pages

Sharon Richardson Joining Dots

September 2009 http://www.joiningdots.net

Intro Notes
• This presentation is based on existing documents, specifically  Heather Solomon’s CSS Reference Chart and Microsoft’s CSS  presentation (see references at the end of this presentation) •This presentation applies to SharePoint Server 2007 and  Windows SharePoint Services 3.0 (launched in 2007). Where  possible, we will highlight which bits apply only to  SharePoint Server 2007 (anything web publishing, like page  editing toolbars) • As always, information is provided ‘as is’, with no warranties,  guarantees of accuracy, blah, blah, etc. SharePoint and other terms are trademarks of Microsoft Corporation. This  presentation has been created for internal use and shared  freely online for anyone to use at their own risk

SharePoint Page

Elements of a SharePoint Page
Header Global Navigation Page body

Web Part

Quick Launch (Local Nav)

Page structure

Header

Property

Description Bar at top of page containing global breadcrumb Area containing global breadcrumb links (left side of bar) Area containing personalisation links (right side of bar) Global breadcrumb links on the left and  personalisation links on the right Page header Title of site (displays next to site logo Global link – ‘Welcome...’

Notes Determines background of entire bar. Can control  overall font etc. Determines background behind global links on the  left Sameas above but for links on the right Add TD for separator bars between sets

ms‐globalbreadcrumb ms‐globalleft ms‐globalright ms‐globallinks ms‐globalTitleArea ms‐sitetitle ms‐SPLink

By default, contains the site icon, title  and global search box Site icon is configured in Site Settings (Title,  description and icon) Also SPLinkButtonActive and Inactive

Global Navigation

Property

Description Overall containerfor global navigation area Frame for entire global nav area Banner surrounding tabs area (i.e. does not  include Site Actions) Container surrounding the navigation tabs All the navigation tabs, including the current  selected tab The current selected navigation tab Site actions button in top right section of global  navigation Site Actions menu 

Notes

ms‐bannerContainer ms‐bannerframe ms‐bannerms‐topNavContainer ms‐topnav ms‐topNavSelected ms‐siteaction ms‐siteactionsmenu

Inside ms‐bannerContainer Inside ms‐bannerframe Inside ms‐banner

This tab also takes properties from ms‐topnav

Appears when click arrow next to ‘Site Actions’

Quick Launch
Property Description Overall container surrounding  sidebar nav Surround quick launch menu  (outer border) Surround quick launch menu (inner border) Background for menu area  (headers and items) Background for items area (under each header) Header area at top of Quick  Launch menu Quick launch header (not navigation headers – see  below) Each header within the Quick  Launch menu Each item in each list beneath  each header Recycle bin Sits under Sub menus Within quicklaunch frame Notes Inside leftareacell (see Page Body structure – LEFT) Inside navframe

ms‐navframe ms‐quicklaunchouter ms‐quickLaunch ms‐navSubMenu1 ms‐navSubMenu2 ms‐standardheader ms‐quicklaunchheader ms‐navheader ms‐navitem ms‐recyclebin

Inside quicklaunchouter

Does not include ‘View all site  content’ or Recycle Bin

Inside the standard header  area. Default is ‘view all site  content’

Page structure (left and right of page body)Property Description Area on the left above Quick Launch  frame, contains image for lists Area on the right of the page Within titlearealeft, above page  margin and within titlearearight Left area of page (contains navframe – see Quick Launch) Right area of page (not used  by default) Page margin either side of page  content Area below Quick Launch frame Area below page margin Area...