• Save
Share Point 2007 CSS Properties
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Share Point 2007 CSS Properties

  • 4,478 views
Uploaded on

Details of the different CSS properties used in key parts of SharePoint 2007 for help when modifying a theme (see related blog posts on web site)

Details of the different CSS properties used in key parts of SharePoint 2007 for help when modifying a theme (see related blog posts on web site)

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,478
On Slideshare
3,763
From Embeds
715
Number of Embeds
9

Actions

Shares
Downloads
67
Comments
0
Likes
0

Embeds 715

http://www.sharepointsharon.com 541
http://www.joiningdots.net 131
http://www.joiningdots.com 19
http://www.slideshare.net 8
http://udevit.wordpress.com 7
http://translate.googleusercontent.com 3
http://sharepointideas.posterous.com 3
https://twitter.com 2
http://webcache.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SharePoint CSS Properties Identifying elements to customise  the style and formatting of  SharePoint pages Sharon Richardson September 2009 Joining Dots http://www.joiningdots.net
  • 2. 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
  • 3. SharePoint Page
  • 4. Elements of a SharePoint Page Header Global Navigation Page body Web Part Quick Launch (Local Nav) Page structure
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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)
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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)
  • 15. 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
  • 16. 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)
  • 17. 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
  • 18. 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
  • 19. 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)
  • 20. Gantt Chart Property Description Various properties but all together in the theme.css file ms‐ganttTable + details
  • 21. 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
  • 22. 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