TIPS AND TRICKS FOR A PUBLIC-FACING

SITE IN MOSS

Lori NeffSenior Consultant, Inetium

6/14/2008

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 Hide Controls With Security Trimming Create Print Page Link Content maintenance scenarios Planning Your Implementation Surveys Customize List Form Accessibility Toolkit

Publishing Feature Today we’ll be covering sites with the

publishing feature enabledCreate a standard site and then enable the

publishing featureOr, 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 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 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 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 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

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 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 CSS files that contain the OOB Rich HTML editor

styles:HtmlEditorCustomStyles.cssHtmlEditorTableFormats.css

To override these styles:Make a copy with the exact same file nameStore 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 stylesAdd a new class and prefix the name with “ms-rte-

Custom”, e.g., .ms-rteCustom-FabrikamTitle

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" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <xmp><xsl:copy-of select="*"/></xmp> </xsl:template></xsl:stylesheet>  

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 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 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 Simple way to hide controls using security

trimming:<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageLists">

Insert control here</SharePoint:SPSecurityTrimmedControl>

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

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"></a>

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(){

var sUrl = 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){SetPrinterFriendlyCSS();}                 function SetPrinterFriendlyCSS() {document.write('<style> @import url("<asp:Literal runat="server" id="lit5" Text="<

% $SPUrl:~sitecollection/Style Library/print.css %>"></asp:Literal>");</style>');}

 </script>

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 DeploymentGood 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 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 Make sure you have a fully qualified

DNS entry for Alternate Access Mappings

Telltale signs:Can’t check files inWrong CSS loadedMysterious permissions errors in SharePoint

Designer

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 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 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