Lori Neff
Senior 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 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

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/sharepointhow-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.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
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 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

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 in
 Wrong CSS loaded
 Mysterious 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