Customizing the look and feel of sharepoint sites
Download
1 / 39

Customizing The Look And Feel Of SharePoint Sites - PowerPoint PPT Presentation


  • 223 Views
  • Uploaded on

Microsoft. Office SharePoint Server 2007. Customizing The Look And Feel Of SharePoint Sites. Customization Levels. Change Site Logo, Format, Parts. Browser. complexity. Change Colors, Backgrounds, Fonts Edit CSS files. SharePoint Designer. Change Page Layout and Content

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Customizing The Look And Feel Of SharePoint Sites' - trudy


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Customizing the look and feel of sharepoint sites l.jpg

Microsoft

Office SharePoint

Server 2007

Customizing The Look And Feel Of SharePoint Sites


Customization levels l.jpg
Customization Levels

Change Site Logo, Format, Parts

Browser

complexity

Change Colors, Backgrounds, Fonts

Edit CSS files

SharePoint Designer

  • Change Page Layout and Content

    • Edit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others

Build Themes and Site Definitions

SPD + Visual Studio


Tools overview l.jpg
Tools Overview

  • Browser for simple edits

    • Navigation tweaks

    • Apply a theme

    • Change a master page (MOSS only)

  • SharePoint Designer for Page and CSS editing

    • An evolution from FP2003

    • Great page and CSS tools

    • + IE Developer ToolBar

  • Visual Studio for XML editing to pull it together

    • Site definitions

    • Features

    • Pages… not so much


Customization levels4 l.jpg
Customization Levels

Change Site Logo, Format, Parts

Browser

complexity

Change Colors, Backgrounds, Fonts

Edit CSS files

SharePoint Designer

  • Change Page Layout and Content

    • Edit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others

Build Themes and Site Definitions

SPD + Visual Studio


Browser customization l.jpg
Browser Customization

After

  • Title and icon

Before


Browser customization6 l.jpg
Browser Customization

After

  • Navigation

Before


Browser customization7 l.jpg
Browser Customization

After

  • Theme

Before


Browser customization8 l.jpg
Browser Customization

After

  • Top Links

Before


Browser customization9 l.jpg
Browser Customization

After

  • Quick Launch

Before


Browser customization10 l.jpg
Browser Customization

After

  • Master Page and CSS

Before


Customization options and their tools l.jpg
Customization Options and Their Tools

Change Site Logo, Format, Parts

Browser

complexity

Change Colors, Backgrounds, Fonts

Edit CSS files

SharePoint Designer

  • Change Page Layout and Content

    • Edit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others

Build Themes and Site Definitions

SPD + Visual Studio


Customizing sharepoint css l.jpg
Customizing SharePoint CSS

  • Modifying a SharePoint stylesheet (in SPD) creates a local copy in the current site

    • Similar to “unghosting” of template pages

    • Local copy is used until deleted

  • Typical SharePoint Master Pages

    • Either /_layouts/{LocaleId}/styles/core.css or /_styles/core.css

    • + an additional MOSS “portal.css”

    • + an additional “AlternateCssUrl”

MOSS User Interface


Customizing sharepoint css13 l.jpg
Customizing SharePoint CSS

Customized

Normal

_layouts (on disk)

_styles (in web)

_layouts (on disk)

core.css

core.css

core.css

<CssLink/>

<CssLink/>

default.master

default.master



Top navigation areas l.jpg
Top Navigation Areas

ms-globalbreadcrumb

ms-globalright

ms-globalleft

ms-globallinks

ms-sitetitle

ms-siteaction

ms-globalTitleArea

ms-siteactionsmenu

ms-topNavContainer

ms-banner

ms-topnav +ms-topNavSelected

ms-bannerframe

ms-topnav

ms-bannerContainer


Body structure l.jpg
Body Structure

ms-titlearealeft

ms-pagetitleareaframe

ms-titlearearight

ms-titleareaframe

ms-pagetitle

ms-titleareaframe

ms-leftareacell

ms-navframe

ms-pagemargin

ms-pagebottommarginright

ms-pagebottommargin

ms-pagemargin

ms-pagebottommarginleft

ms-rightareacell

ms-bodyareapagemargin


Quick launch l.jpg
Quick Launch

ms-quicklaunchouter

ms-quickLaunch

ms-standardheader

ms-navSubMenu1

ms-quicklaunchheader

ms-navheader

ms-navSubMenu2

ms-navitem

ms-recyclebin


Page body l.jpg
Page Body

ms-bodyareacell

ms-pagebreadcrumb

ms-propertysheet

ms-sitemapdirectional

ms-bodyareaframe


Web parts l.jpg
Web Parts

used in edit mode only

ms-HoverCellInActive

ms-SPZone

ms-SPZoneLabel

ms-SPButtonms-WPAddButton

ms-WPEditText

ms-WPHeader

ms-standardheaderms-WPTitle

ms-HoverCellInActive

list view web part only

ms-addnew

ms-summarycustombody

ms-vb


List views l.jpg
List Views

ms-listdescription

ms-viewselectorhover

ms-menutoolbar

ms-listheaderlabel

ms-toolbar

ms-splitbuttonhover

ms-vh-icon

ms-separator

ms-vh2

ms-unselectedtitle

ms-vb

ms-alternating

ms-vb-title

ms-unselectedtitle

ms-vb2

ms-vb

ms-globalTitleArea


Forms l.jpg
Forms

ms-areaseparatorleft

ms-areaseparatorright

ms-areaseparator

ms-pagetitle

ms-titlearea

ms-sitemapdirectional

ms-formtoolbar

ms-toolbar

ms-ButtonHeightWidth

ms-formtable

ms-formlabel

ms-formbody

ms-formtoolbar

ms-toolbar

ms-descriptiontext


Layouts landing pages l.jpg
_layouts Landing Pages

ms-settingsframe

ms-createpageinformation

ms-informationtablestatic

ms-pageinformation

ms-linksectionheader

ms-standardheader

ms-propertysheet

ms-descriptiontext


Layouts form pages l.jpg
_layouts Form Pages

ms-formareaframe

ms-propertysheet

ms-descriptiontext

ms-sectionheader

ms-standardheader

ms-descriptiontextms-inputformdescription

ms-authoringcntrolsms-inputformcontrols


Css features tips and tricks l.jpg
CSS FeaturesTips and tricks

  • Modify any style from a SharePoint stylesheet to trigger customization

    • Custom CSS file stored in _styles folder in web

    • Delete to turn off customization

  • In SPD:

    • Use filters in Apply Styles taskpane to see just the styles used by the current page or selection

    • Use CSS Property Grid to analyze overrides

    • Use the Summary mode in CSS Property Grid to view only the set properties

  • Use IE Developer ToolBar, as well!(or Mozilla…)


Customization options and their tools25 l.jpg
Customization Options and Their Tools

Change Site Logo, Format, Parts

Browser

complexity

Change Colors, Backgrounds, Fonts

Edit CSS files

SharePoint Designer

  • Change Page Layout and Content

    • Edit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others

Build Themes and Site Definitions

SPD + Visual Studio


Master page concepts l.jpg
Master Page Concepts

Master Page “Chrome” (default.master)

  • One page (master) holds the “chrome”

  • Many pages point at the Master

  • Master Page defines “Placeholders” which can be overridden in child page

Content Page (default.aspx)


Master page tokens l.jpg
Master Page Tokens

  • Two dynamic tokens

    • ~masterurl/default.master

      • spweb.MasterUrl

      • “System Master Page” in MOSS

    • ~masterurl/custom.master

      • spweb.CustomMasterUrl

      • “Site Master Page” in MOSS

  • Two static tokens

    • ~sitecollection/default.master

    • ~site/default.master

MOSS User Interface:


Sharepoint page layout l.jpg
SharePoint Page Layout

Application Pages

Content Pages - http://myserver/

spweb.MasterUrl

/_layouts/

application.master

/shared documents/

/

/_catalogs/masterpage/

.master

default.aspx

allitems.aspx

default.master

.aspx

.aspx

.master

/_layouts/

create.aspx

“ghosting”

Pages\

SiteTemplates\STS

Global\

.aspx

default.master

viewpage.aspx

default.aspx

File System - \.. \web server extensions\12\


Default masterplaceholders l.jpg
Default.masterPlaceholders

Default.master contains ~30 placeholders, ~22 of them in the page body

All of them must be defined in a replacement master


Master page customization l.jpg
Master Page Customization

Two techniques for customizing layout:

  • Start with a copy of default.master

    • Remove markup around placeholder

    • Rebuild in place

  • Start with a blank master

    • Build from ground up

    • Copy placeholders from default.master


Master page cast of control characters in order of appearance l.jpg
Master Page Cast of Control Characters(in order of appearance)

<SharePoint:CssLink>

<head>control

Renders path to default CSS file for site, plus spweb.AlternateCssUrl, if specified

<SharePoint:Theme>

<head>control

Renders theme CSS files, if a theme is specified for the site

<SharePoint:ScriptLink>

<head>control

Renders a link to a script file with a date time hash

<SharePoint:CustomJSUrl>

<head>control

Renders a link Custom JavaScript URL defined in onet.xml (if present)

<SharePoint:SoapDiscoveryLink>

<head>control

Renders path to .disco file, which lets clients like VS2005 discover web services on the sever


Slide32 l.jpg

Master Page Cast of Control Characters

<SharePoint:DelegateControl>

<head>control

  • Allows swapping of controls via feature

    • Example: search is basic in WSS, advanced in MOSS

    • Lower sequence number in feature.xml determines winner

Allows for feature-driven, declarative determination of a child

control to render in a page

  • Delegate Controls:

    • AdditionalPageHead – Free for all

    • GlobalSiteLink0, 1, 2 – Area at top right of page

    • SmallSearchInputBox – Search area

    • TopNavigationDataSource

    • PublishingConsole

    • QuickLaunchDataSource


Slide33 l.jpg

Master Page Cast of Control Characters

<WebPartPages:SPWebPartManager>

nonvisual control

Enables web part framework on MasterPages. WebPartManagers should generally always be defined in master pages.

<asp:SiteMapPath id="GlobalNavigationSiteMap" >

Provides top navigation breadcrumb. Connects to SPSiteMapProvider (also used for page breadcrumb)

<wssuc:Welcome >

Provides Welcome <user> dropdown with per-user options.

<SharePoint:SiteLogoImage>

Renders logo of the site if defined on the web, or the value of the LogoImageUrl property

<SharePoint:SPLinkButton>/<SharePoint:ProjectProperty Property="Title“>

Renders Title of the Site with a link back to the home page.


Slide34 l.jpg

Master Page Cast of Control Characters

<SharePoint:AspMenu ID="TopNavigationMenu"

Displays top navigation “tabs”.

<SharePoint:SiteActions>

Renders the SiteActions dropdown. Note that the SiteActions dropdown can be extended via ‘features’ or directly in page.

<wssuc:DesignModeConsole >

In edit mode, shows the editing status of the page and provides an Exit Edit Mode button.

<SharePoint:SPNavigationManager>

Manages a left hand navigation control (either the Quick Launch list, or the tree view)

<SharePoint:FormDigest>

nonvisual control

Renders a security hash into the page; needed for performing some updates.


Building a minimal master l.jpg
Building a minimal.master

  • A minimal master needs:

    • All content placeholders

    • Core CssLink/ScriptLink/RobotsMetaTag

    • WebPartPages:SPWebPartManager

    • UI to recover yourself:

      • Site Actions dropdown

      • <wssuc:DesignModeConsole>

    • FormDigest Control


Master pages tips and tricks l.jpg
Master PagesTips and tricks

  • Toggle Visual Aids off for WYSIWYG view

    • Collapses empty placeholders

  • Split view is your friend

    • Select in Design view, see source in Code view

  • Use Master Page toolbar to select placeholders by name

  • Use Tag Toolbar to diagnose hierarchy and make tricky selections

  • Safety net:

    • Use Version History command to roll back

    • Use Revert command to get back to original master from site def


Moss layout architecture l.jpg

WSS Layout Architecture

MOSS Layout Architecture

tasks/forms/allitems.aspx

default.aspx

_catalogs/masterpage/default.master

gets “chrome” from

spweb.MasterUrl

gets “layout” from

pages/gearsofwar.aspx

gets “chrome” from

_catalogs/masterpage/game.aspx

_catalogs/masterpage/default.master

spweb.CustomMasterUrl

pages/lostplanet.aspx


Customizing page layouts office sharepoint server l.jpg
Customizing Page LayoutsOffice SharePoint Server

  • Design for Publishing Pages is simple:

    • Browser UI for entering content (authors)

    • SharePoint Designer for creating/editing new Page Layouts (designers)

  • Like ghosting, but inside the content DB

  • Special entry point in SharePoint Content section of File : New dialog when Publishing feature is activated

  • Special Toolbox categories appear when editing a Page Layout


Summary customization options l.jpg
Summary: Customization Options

Change Site Logo, Format, Parts

Browser

complexity

Change Colors, Backgrounds, Fonts

Edit CSS files

SharePoint Designer

  • Change Page Layout and Content

    • Edit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others

Build Themes and Site Definitions

SPD + Visual Studio


ad