View RSS Feed

TheScarfedOne

Live from Learning Gateway Conference - Session 4

Rate this Entry
by , 15th July 2009 at 03:36 PM (1530 Views)
Branding your Portal

Penny Coventry (MVP)
www.sharepointdesignerstepbystep.com

Agenda:
What is branding
Branding Basics
Branding options in the browser
Using SPD
Next steps

What is branding
More than just a header, its about site and content design. Was difficult in V1 and V2, WSS3 and MOSS2007 isnt so bad now. Still a challenge.

Its more than just colouring! Navigation, etc. Know what you need to alter. Know who is doing what - visitors, editors etc.

Consider the users involved and their requirements
-Who is visiting
-Who is adding content

-Home page design (and sub sites/pages)
-Colour schemes
-Navigation
-Rollup information/Format
-Target information (audiencing)

--> Map to development: Master Pages, Themes, Page Layouts, Custom XSL for CQWP or DFWP.

Themes
Change a site theme - in the browser
CSS and Images

Choice of about 18 in WSS3

You can create your own custom themes
-Files are stored on the web server
-Seen by all sites
-Changes the CSS properies for the site
-However, they do not apply to all sites.
-These apply to the "user" part of the site as well as the "admin" part of the site

Types of Site (aka Templates)

Internet Sites (aka Publishing sites) - larger number of users. These are like shop fronts, only a small number of people can contribute to them - and this requires confirmation.

Collaboration Sites - smaller number of users. More people have access to make changes (i.e. upload content). Content goes live immediately.

Master pages

Every page rendered, is actually a combination of two files - the master page (defining the navigation, header, footer and other "all pages" bits), and your content.


New in WSS2/MOSS2007
All sharepoint Content Pages associated with on Master Page
Can be changed post site creation
Provides constant Look/Feel

=>

Themes plus more!!
Contains common page elements.

When applying master pages to sites using the "All Site Actions" >> "Master Pages" section...

You can also do this at an individual site level, so that different section of a site have a different look and feel/colour scheme.

Remember: The first section only points at Publishing sites (as they use a custom action). In order to reflect these changes to a Collaboration site, you must also use the second section - and tick the reset subsites option. Beware - there are some sections in master pages and their CSS which will not apply to some custom areas (eg blog pages navigation). Test, test and test - and double check your CSS class references.

Page Layouts

Used on Publishing Sites

Navigation
In the same way you can break permissions to change the access for users - you can do the same with the top bar navigation. Make sure you leave some way to return to the top level site.

Browser vs SPD

Before doing any work on Master Pages, download minimal copies of master pages from Heather Soloman (www.heathersoloman.com) CSS is attached to the master page not the content page. There are copies of this page for Publishing/Collaboration/Wiki/Blog etc...

CSS...so, if you want to change these, open up your master page, click on the item you want to customise - and SPD can help you by showing which CSS class affects that area. If the CSS comes from core.css (ie is not shown as being changed in the CSS attached to the master page.

There is a reference of all the CSS classes/styles on Heather's site. You can then add this style to the CSS attached to your master page. Make sure you have the item selected in SPD, and click new style. It will then walk you through the process. You may find that this has some unexpected results....

Dealing with CSS takes a while, as you need to get to learn which controls are affected by which CSS class. To get around some of the issues, you may have to change the class name of the object to refer to it directly in your CSS.
Categories
Uncategorized

Comments

Trackbacks

Total Trackbacks 0
Trackback URL: