Share Point 2007 CSS Properties

SharePoint CSS Properties Identifying elements to customise the style and formatting of SharePoint pages Sharon Richardson September 2009 Joining Dots 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 Notes Bar at top of page containing global Determines background of entire bar. Can control ms‐globalbreadcrumb breadcrumb overall font etc. Area containing global breadcrumb Determines background behind global links on the ms‐globalleft links (left side of bar) left Area containing personalisation links Same as above but for links on the right ms‐globalright (right side of bar) Add TD for separator bars between sets Global breadcrumb links on the left and ms‐globallinks personalisation links on the right Page header By default, contains the site icon, title ms‐globalTitleArea and global search box Title of site (displays next to site logo Site icon is configured in Site Settings (Title, ms‐sitetitle description and icon) ms‐SPLink Global link – ‘Welcome...’ Also SPLinkButtonActive and Inactive

Global Navigation Property Description Notes Overall container for global navigation area ms‐bannerContainer ms‐bannerframe Frame for entire global nav area Inside ms‐bannerContainer Banner surrounding tabs area (i.e. does not Inside ms‐bannerframe ms‐banner include Site Actions) Container surrounding the navigation tabs Inside ms‐banner ms‐topNavContainer All the navigation tabs, including the current ms‐topnav selected tab The current selected navigation tab This tab also takes properties from ms‐topnav ms‐topNavSelected Site actions button in top right section of global ms‐siteaction navigation Site Actions menu Appears when click arrow next to ‘Site Actions’ ms‐siteactionsmenu

Quick Launch Property Description Notes Overall container surrounding Inside leftareacell (see Page ms‐navframe sidebar nav Body structure – LEFT) Surround quick launch menu Inside navframe ms‐quicklaunchouter (outer border) Surround quick launch menu Inside quicklaunchouter ms‐quickLaunch (inner border) Background for menu area Does not include ‘View all site ms‐navSubMenu1 (headers and items) content’ or Recycle Bin Background for items area ms‐navSubMenu2 (under each header) Header area at top of Quick Within quicklaunch frame ms‐standardheader Launch menu Quick launch header (not Inside the standard header ms‐quicklaunchheader navigation headers – see area. Default is ‘view all site below) content’ Each header within the Quick ms‐navheader Launch menu Each item in each list beneath ms‐navitem each header ms‐recyclebin Recycle bin Sits under Sub menus

Page structure (left and right of page body) Property Description Area on the left above Quick Launch ms‐titlearealeft frame, contains image for lists Area on the right of the page ms‐titlearearight Within titlearealeft, above page ms‐titleareaframe margin and within titlearearight Left area of page (contains navframe ms‐leftareacell – see Quick Launch) Right area of page (not used ms‐rightareacell by default) Page margin either side of page ms‐pagemargin content ms‐pagebottommarginleft Area below Quick Launch frame ms‐pagebottommargin Area below page margin ms‐pagebottommarginright Area below right area of page (not in use by default)

Page structure (above and below page body) Property Description Frame containing page title ms‐pagetitleareaframe ms‐pagetitle Title of page, not visible by default for most site templates ms‐bodyareapagemargin Margin beneath page body

Page body Property Description Notes Entire body area, including page (cell within a table…) ms‐bodyareacell breadcrumb (cell within a table…) Inside bodyareacell Also used elsewhere ms‐propertysheet Actual frame containing body content Most content is managed within ms‐bodyareaframe web parts Bar containing page breadcrumb ms‐pagebreadcrumb Page breacrumb links and text ms‐sitemapdirectional

Web Parts Property Description Notes ms‐WPHeader Container for header elements Also used in web part gallery ms‐standardheader Usually only need to use WPTitle StandardHeader also used in Text displayed in header QuickLaunch (not in use by default) ms‐WPTitle Button to activate web part menu Also used in PageEdit toolbar (MOSS, ms‐HoverCellInActive not WSS) ‘Add new…’ link for web parts ms‐addnew displaying lists and libraries Container for custom body, e.g. ms‐summarycustombody message ‘there are no items…’ Text within custom body Text also used elsewhere ms‐vb (e.g. ilsts) Dropdown menu for web part ms‐WPMenu ms‐partline Line above ‘Add new...’ link

Web parts – Edit mode Property Description ms‐SPZone Web part zone ms‐SPZoneLabel Label for web part zone ms‐SPButton Bar and link to add web parts to page ms‐WPAddButton ms‐HoverCellInActive Used twice here and elsewhere ‘Edit’ text on button. Also used in page ms‐WPEditText edit toolbar

List view – Toolbar These items also apply to web parts displaying lists and libraries with full toolbar Property Description Notes ms‐listdescription Description for list or library If none, won’t appear Bar containing the list toolbar ms‐menutoolbar ms‐toolbar Each item in the menu toolbar ms‐separator Separator between each menu item ms‐viewselector Cell for changing list view Add ‘hover’ for appearance when hover ‘View’ label next to list views ms‐listheaderlabel ‘New button in menu toolbar Add ‘hover’ for appearance when hover over ms‐splitbutton Add ‘text’ for text formatting separating line between New button ms‐splitbuttondropdown and dropdown arrow Image used to activate dropdown Default is a small arrow ms‐menuimagecell menus for all toolbar buttons default appearance of buttons in For hover, remove ‘in’ from active ms‐menubuttoninactivehover the toolbar menu

List view – content area These items also apply to web parts displaying lists and libraries Property Description Notes ms‐vh‐icon Column heading for icons Also used for Attachments (same thing) ms‐vh2 Column heading Used for each column heading ms‐unselectedtitle Used if column is currently unselected ms‐vb Text used for column headings and items Also used elsewhere, same purpose (text) ms‐vb‐title Name of property in column (per item) Similar layout to column heading ms‐vb2 Second style of formatting for items ms‐alternating Formatting for alternating rows For background, different colour ms‐basictable Formatting for all rows in basic table view (not highlighted here)

Forms Property Description ms‐areaseparatorleft ms‐areaseparatorright Header area (property name seems odd) ms‐areaseparator ms‐titlearea Contains the breadcrumb navigation The links and text in the breadcrumb ms‐sitemapdirectional Title of form ms‐pagetitle Above and below form content ms‐formtoolbar Each area within formtoolbar. When in view mode, ms‐toolbar displays ‘attach file’, ‘spelling’ etc, For buttons within toolbar ms‐ButtonHeightWidth ms‐descriptiontext Table containing form content Column headings within form ms‐formtable Background for left side of form (column headings) ms‐formlabel Background for right side of form (column values) ms‐formbody ms‐formline Line at bottom of form, after last column field

Page Editing Toolbar (MOSS Only) Property Description Also ‘inactive’ and without ‘dark’. Buttons in toolbar, also used in web part headers ms‐HoverCellActiveDark so be careful if changing the contrast from defaults (i.e. Dark text/light background to dark background/light text) ms‐rteCustom‐Article… Title, Headline and ByLine – used for News publishing pages (not shown in image)

Calendar Property Description Lots of details. If going to customise the appearance of the calendar view, ms‐cal… use Heather Solomon’s files (link to Heather’s reference chart at end of this presentation). Heather has a cleansed version ready for branding ms‐datepickerouter Date picker (also used in all columns using Date type ms‐picker‐table… Date picker (various) – headers, days of week header, days, footer

Blog Property Description Wrap around post including data and ms‐PostWrapper post title ms‐PostDate Date of post (above title) ms‐PostTitle Post title ms‐PostBody Post content ms‐PostFooter Post footer – date, author, links ms‐CommentsWrapper Wrap around entire Comments area Header text (i.e. The word ‘Comments’) ms‐CommentHeader ms‐commenttable Wrap around each individual comment Text that appears if there are no ms‐commentsempty comments (not showing here) Title of individual comment ms‐CommentTitle Text of individual comment ms‐CommentBody Footer of comment including author and ms‐CommentFooter date

Wiki Property Description Wrapper around wiki toolbar (Edit, History...) also used in Site Directory ms‐wikieditouter (MOSS) for ‘Create a site’ and ‘Add link to site’ Background behind toolbar buttons ms‐wikieditthird Toolbar buttons ms‐wikitoolbar ms‐wikieditbutton Edit button in toolbar ms‐wikicontent Content area on current version of page ms‐diff… Delete, Insert, Change – view differences between versions of wiki page (not shown above)

Gantt Chart Property Description Various properties but all together in the theme.css file ms‐ganttTable + details

References • Heather Solomon’s CSS Reference Chart – http://www.heathersolomon.com/content/sp07cssreference.htm – Includes files to download and assist with customising a theme • Microsoft presentation at the Microsoft SharePoint European Conference, February 2007 – Customizing The Look And Feel Of SharePoint Sites by Mike Ammerlaan: http://sharepoint.microsoft.com/sharepoint/SPCEU2007/Breakouts/DEV05%20‐ %20Customizing%20The%20Look%20And%20Feel%20Of%20SharePoint%20Sites.ppt • This presentation and additional information can be found online in our SharePoint Guide: – http://sharepointsharon.com/library/moss2007/design.htm

This presentation is shared under the Creative Commons license. For full details: http://creativecommons.org/licenses/by‐nc‐sa/2.0/uk/ Sharon Richardson Joining Dots Ltd Email: sharonr@joiningdots.net Web: http://www.joiningdots.net http://sharepointsharon.com Presentation last updated: 15th September 2009

http://www.sharepointsharon.com	342
http://www.joiningdots.net	120
http://www.slideshare.net	8
http://udevit.wordpress.com	7
http://www.joiningdots.com	7
http://translate.googleusercontent.com	3
http://sharepointideas.posterous.com	3
http://webcache.googleusercontent.com	1

Share Point 2007 CSS Properties

by Sharon Richardson on Sep 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 491

Statistics

Share Point 2007 CSS Properties — Presentation Transcript