Lori neff senior consultant inetium 6 14 2008
1 / 22

Tips and Tricks for a Public-Facing Site in MOSS - PowerPoint PPT Presentation

  • Uploaded on

Lori Neff Senior Consultant, Inetium 6/14/2008. Tips and Tricks for a Public-Facing Site in MOSS. Topics. Considerations for Architecture Navigation Reusable Content Master pages Styling Login Pages Page Layouts & Content Types Custom Styles in Rich HTML Fields Style Search Results

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

PowerPoint Slideshow about 'Tips and Tricks for a Public-Facing Site in MOSS' - mabyn

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
Lori neff senior consultant inetium 6 14 2008

Lori Neff

Senior Consultant, Inetium


Tips and Tricks for a Public-Facing Site in MOSS


  • Considerations for Architecture

  • Navigation

  • Reusable Content

  • Master pages

  • Styling Login Pages

  • Page Layouts & Content Types

  • Custom Styles in Rich HTML Fields

  • Style Search Results

  • Hide Controls With Security Trimming

  • Create Print Page Link

  • Content maintenance scenarios

  • Planning Your Implementation

  • Surveys

  • Customize List Form

  • Accessibility Toolkit

Publishing feature
Publishing Feature

  • Today we’ll be covering sites with the publishing feature enabled

    • Create a standard site and then enable the publishing feature

    • Or, when creating your site collection, begin with the Collaboration Portal (if you want surveys or discussion groups or blogs later on, then you’ll want the Collaboration Portal; the Publishing Portal doesn’t even allow you to enable these OOB features later on)

Considerations for architecture
Considerations for Architecture

  • Consider the users involved:

    • Who will be visiting your site

      • Browsers involved (impacts CSS, navigation)

      • Level of interaction (navigation, media, web parts, RSS feeds, surveys, discussion forums)

      • Experience (simplicity of site, layout)

    • Who are your Content Editors

      • Power users – Can edit in SharePoint Designer, know HTML, etc. Can do some interesting things in CEWP (good/bad?)

      • New users – Don’t know HTML; HTML editors need to be restricted and built out to provide a consistent user experience. Impacts page layouts required, CSS, navigation, permissions

    • Who’s going to Implement Design

      • Need to be Familiar with SharePoint BEFORE they go to the SharePoint Designer classes; architecture impacts design decisions

    • Who will be your Site Administrators

      • What level of participation do you want to have in the ongoing maintenance of the site

    • Where is the content coming from?

      • Migrating information? from SQL? XML? Metadata?

Out of box navigation
Out-of-Box Navigation

  • Pros: Easy, quick, leaves power in hands of users

  • Cons: It’s not lightweight; customization in Master Page

  • Architect the site to leverage the OOB navigation best – create a site for each item that has sub-topics that will need to appear on the navigation

  • Note that this architecture will provide a structure for logical breadcrumbs, and use of the OOB site map

  • To customize:

    • You can do a lot with the assigned CSS classes

    • Width, number of levels deep, text wrapping are all set in the control; override settings in the master page

      • Example: change navigation to allow text wrapping

        • Select top navigation control; in Tag Properties panel, for ItemWrap, change from “False” to “True”

  • Issue with using Headings in Local Navigation (left nav)

    • If you inherit the top-level site’s Local Navigation, headings (and the links underneath them) disappear on the sub-site

    • You can find a fix at http://makingoffice2007work.blogspot.com/2007/12/sharepoint-how-to-make-navigation.html

Reusable content
Reusable Content

  • Pro: Easy to maintain, flexible

  • Con: Only available in Rich HTML publishing fields (NOT the CEWP)

  • To add a new Reusable Content item:

    • Select the text / html code that you’d like to repeat

    • From the top-level site, View All Site Content

    • Find the Reusable Content List

    • Add a new item to the list

      • Enter a name, description (if desired)

      • Click to enter content

      • To paste in HTML, click “Edit HTML” button

      • Click OK

  • To insert a Reusable Content item in page:

    • Enter Edit Mode for page

    • Click to Edit Content in page content field

    • In Rich HTML toolbar, click “Insert Reusable Content” button

    • Choose the desired Reusable Content Item from the list

Master pages
Master pages

  • Tip: Consider what you’ll need to style

    • If your readers will never see the lists, consider only styling the Custom Master Page

  • If you customize the Master Page, Plan how you’ll deploy updates (features are your friends)

Styling login pages
Styling login pages

  • Login pages (and all other pages that reside in the _layouts folder) live on the file system in the 12 hive

  • Method A:

    • You can edit these files on the file system, but be careful; it will affect all the web apps on that file system

  • Method B:

    • Create a local copy of the contents of the _layouts folder (put it in the root of your site collection)

    • Style the simple.master and other pages in the local_layouts folder as desired; necessary when you have multiple sites on one server with different designs

Add fields to page layout
Add fields to Page Layout

  • You get only one page content field in the OOB page content type.

  • Scenario: Product page; content with “callout box”

    • Go to top level Site Settings, Site Content Types Gallery

    • Create new content type that inherits from Article Page

    • Create new site column with a type of Publishing HTML

    • From SPD, create a new Page Layout using the new content type you just created

    • In the Toolbox panel, under the list of Content Fields, you should see your new site column.

  • Plan for maintenance and scalability

    • Create a structure that will require no updating (or as little as possible)

    • Refer to implementation notes later

Custom styles in rich html fields
Custom Styles in Rich HTML Fields

  • CSS files that contain the OOB Rich HTML editor styles:

    • HtmlEditorCustomStyles.css

    • HtmlEditorTableFormats.css

  • To override these styles:

    • Make a copy with the exact same file name

    • Store it in your site (say, in your Style Library)

    • Make the desired changes (i.e., remove a style altogether)

    • Register it in your master page

  • To add to these styles

    • Add a new class and prefix the name with “ms-rte-Custom”, e.g., .ms-rteCustom-FabrikamTitle

Style search results 1
Style Search Results - 1

  • Create a search results page

  • Edit search results web part; Modify XSLT – copy existing and save for later

  • Replace xslt with this to show the raw xml results:

    <xsl:stylesheet version="1.0"


    <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>

    <xsl:template match="/">

    <xmp><xsl:copy-of select="*"/></xmp>



  • Save and then run the search.

  • You'll see the raw xml results.

  • Save these xml results in a little xml page.

Style search results 2
Style Search Results - 2

  • Go into SharePoint Designer, create a blank aspx page.

  • Go to the Data View menu and click "Manage Data sources“

  • In the Data Source Library pane, upload the xml file you saved a moment ago:

  • Expand the xml files node and click "Add an XML file“

  • Browse to the file on the Source tab, click ok

  • Now you'll see your file listed in the Data Source Details pane

  • Click on the file's dropdown menu and show the data.

  • Select the nodes you want and drag them onto the page.

  • SharePoint Designer will render the data.

Style search results 3
Style Search Results - 3

  • Click on the Common Data View Tasks (chevron at top right of control)

    • Here you can define paging, columns, grouping, sort, layout, etc.

  • When you have the data (at least in HTML view), you can change aspects of the field result;

    • Change an image hyperlink to show its picture instead.

    • Change the title to be clickable (and its target should be {url} instead of {title}, but display is still {title})

    • Format the date time of the creation date

  • Now just copy the xsl from the code view (everything within the XSL tag)

  • When you go back to your page, there's a small problem that the search results web part is too big to be edited.

    • So just go into the web part management view (add "?contents=1" to the end of the page url) and remove that web part.

    • Now go back to edit the page and add that web part back in again.

    • Paste your xslt into the editor.

Hide controls with security trimming
Hide Controls with Security Trimming

  • Simple way to hide controls using security trimming:

    <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageLists">

    Insert control here


  • The left nav (quick launch) is wrapped in a security trimming control

Create print page link 1
Create Print page link - 1

  • Create a file called print.css

  • Create definitions in css to hide necessary classes/tags/ids

    • Example:

      • .topNav { display: none; }

  • Add css link to master page:

    <link rel="stylesheet" type="text/css" href="/style library/print.css" media="print" />

  • Save Master page and return to browser; test new css – go to print preview to see how the print.css changes the page

  • To add a button that will do a print preview for you, then add the following (see next slide for more):

    <a onclick="javascript:PrintPreview();">

    <img alt="Print this page" src="/Style%20Library/images/print.gif" border="0">


Create print page link 2
Create Print page link - 2

  • Now add the following script to the head tag in master page:

    <script type="text/javascript" language="javascript">

    function PrintPreview(){

    varsUrl = window.location.href + "&PrintPreview=true";

    if(window.location.href.indexOf("?") == -1)

    {sUrl = window.location.href + "?PrintPreview=true";}

    window.open(sUrl, "_blank", "width=950,height=700,resizable=1,toolbar=1", true);


    if(window.location.href.indexOf("PrintPreview=true") >-1)


    function SetPrinterFriendlyCSS() {

    document.write('<style> @import url("<asp:Literalrunat="server" id="lit5" Text="<% $SPUrl:~sitecollection/Style Library/print.css %>"></asp:Literal>");</style>');



Content maintenance scenarios
Content maintenance scenarios

  • Publishing on production

    • SharePoint’s publishing feature allows content to go through an approval process, and to publish at scheduled times

  • Content Deployment

    • Good in a situation where you have a read-only site, with your web apps on two different farms

    • Difficulties when custom content types are added to the equation

Planning your implementation
Planning Your Implementation

  • Tip: Create the initial design in a development environment, then implement it with features/solutions

    • Create your CSS, master pages and basic page layouts via the browser and SPD on a dev site

    • Create content types and lists via features, then implement them on the dev site

    • Since you might have page layouts that are built on a custom content type, plan accordingly

  • Pros:

    • Actual version control in TFS or equivalent

    • Streamlined implementation through different environments

  • Cons:

    • Investment of time and planning, and setup

    • Deactivating a feature leaves artifacts (i.e., a content type that is still being used in the site will remain)

Set up aam properly
Set up AAM properly

  • Make sure you have a fully qualified DNS entry for Alternate Access Mappings

  • Telltale signs:

    • Can’t check files in

    • Wrong CSS loaded

    • Mysterious permissions errors in SharePoint Designer

Surveys anonymous
Surveys - Anonymous

  • To allow anonymous users to access a survey, but not allow them to edit the survey contents:

    • First, anonymous access has to be set up on the site collection

    • Go to the survey, go to survey settings. 

    • Click on “Title, description and navigation.” 

    • Go to “Advanced settings.” 

      • Under “Read access”, allow users to read All responses. 

      • Leave the Edit access at “Only their own.” 

      • Click OK. 

    • You should be back at the settings page for the survey. 

    • Now click “Permissions for this survey.” 

    • Under the Settings menu, choose “Anonymous Access.” 

    • Check “Add Items” and “View Items” (you need to keep view items because you can’t let them add without also letting them view). 

    • Click OK. 

Edit list form
Edit List Form

  • Create a Customized List Form:

    • In SPD, open the NewItem.aspx page, and do a File, Save As, and give the form a new name, such as NewItemForm.aspx

    • Delete the default List Form Web part from the page.

    • Go to Insert > SharePoint Controls > Custom List Form

    • Select the appropriate list, content type and form type

    • This will insert a Data Form Web Part that you can customize as you like.

  • If you want a survey to go to a different page than overview.aspx:

    • Remove the existing OK buttons.

    • Add a Form Action Button (from the Data View Controls section of the Toolbox)

    • Add an action to Commit and then add an action to direct to a new page. It adds the javascript for you.

Accessibility toolkit
Accessibility Toolkit

  • December of last year, HiSoftware created an Accessibility toolkit

  • Contains:

    • CSS files (all relative sizing)

    • A size utility (to change absolute sizes to relative)

    • Master pages (essentially copies of existing OOB master pages with adjustments for sizing, etc.)

    • Control adapters (accessible wrappers for current web parts, such as Excel, Search, lists and documents)

    • A Feature install