How do I ‘brand’ this thing called SharePoint?
As any good web designer/developer knows, after a site’s aesthetic design is agreed upon; beginning with static page templates (dummy HTML/CSS) is the best starting point. So I had created my major page templates already….but now to make this ready for SharePoint’s dynamic content.
Master Pages
I created a new site collection in SharePoint, using a Publishing Site template (because hey, I’m creating a publishing website here folks). Then I copied the ‘Night and Day’ masterpage to begin my customizations. For goodness sakes, do NOT alter a system template. Since, I was no expert in SharePoint, asp, sharepoint controls, etc., I slowly and carefully eliminated components in the masterpage that I didn’t need, and swapped out the HTML components and css classes I needed from my dummy templates. I personally found this easier than using one of the minimum master pages you find out there…
Calling myself out here…coming in cold in the world of SharePoint and asp/aspx, I had to mess up my masterpage more than a few times making edits. This is why versoning is great. There is bad news though when altering masterpages and page layouts in a Publishing site….making small changes and wanting to see them reflected in the browser can be very painful when you have to publish, submit, and accept the updated version of the document each and every time. Hey SharePoint dev team….how ‘bout a simple feature to turn on/off publishing on certain files or file types? This would make the development process much easier when working on a Publishing site.
Page Layouts
I figured out that I had certain components that were global (browser background, header, logo, navigation, footer) and that these obviously belong in the master page. Thus began
the job of building out Page Layouts. I cannot stress enough how important PLANNING is here. If you don’t have a robust information architecture devised before doing this, you are spinning your wheels and creating unnecessary work for yourself.
For my purposes, I ended up creating a page layout that worked for ~80% of the pages on the site. It consists of a title, and a bunch of webpart zones. This allowed me to drop in my webparts and content editors to allow for my site pages to be as flexible as possible. Webparts are great…and I’ll post another article soon on how I used them, customized them, etc.
CSS is King
Man I love CSS. It’s such a great way to control display of so much on a powerful CMS like
SharePoint. I gotta say, the markup that SharePoint 2010 creates when rendering in a browser can be a bit scary at times. The pervasive use of tables is disheartening, (luckily the navigation uses unordered lists) and the use of “element.styles” is too common (styles directly in the markup, rather than classes being assigned and styles provided externally). BUT, if you are good with CSS (which you’d better be) you can do a lot without having
to touch the source code. But you’d better turn on your Developer Tools (IE) or FireBug (Firefox) so you can see what you’re working with.
Anonymous Access
Obviously, for a customer-facing web site on SharePoint we
absolutely had to support un-authenticated users. The first thing
I needed to do was turn on Anonymous Access. That was pretty straightforward….Here
is a link if you don’t know how.
How does this relate to branding? Well….I had to eliminate the Ribbon UI if the
user wasn’t logged in. Wouldn’t that be confusing to see if you were coming to a website? That’s where this post came in handy. That worked great, but now as an admin or editor on the site, how the heck do I get in? After all, when I get to the site, I’m anonymous.
That’s when I devised this approach (hack). I’m not saying it’s a best practice, but worked well for my needs.
I just placed this code in my masterpage where I wanted the item to appear, wrapped in a div:
<wssuc:Welcome id=”IdLogin”
runat=”server”
EnableViewState=”false”></wssuc:Welcome>
<wssuc:MUISelector
runat=”server”/>
Then, because in the ribbon (which would now appear on login) the normal user account actions are present, I hide the div using css (property – display:none). Now the original login link which has now become a redundant user account menu upon login, won’t be
displayed to confuse the user.
So, that’s a start to my branding woes. I’m going to be posting more articles around what
it took to customize the site: InfoPath forms, WebParts, and SharePoint Search to name a few. Stay tuned…
On SharePoint you want to create web application in central administration.
Next find authentication providers, followed by selecting enable anonymous,
and save.
Find web application management, select site, under anonymous policy, check deny write.
Simple orders to follow to Navigate to Site:
1. Choose Site Action
2. Select Site Setting
3. Select Site Permissions
4. And then click Anonymous Access, followed by Entire Website, then OK.
Now close all browsers and go back into the website again. Once back in if you did everything correctly you will be browsing as anonymous!
Shawn Zernik
http://www.internetworkconsulting.net
Hi, man i like your post, i need to develop a website and an intranet with SP10, i need some help. I have done the html and a bit of css, but how do i get the animation sharepoint gives??? like the menus and having the site actions button in my design??? please help me man
Hello Nelson,
I’m not sure how exactly you are approaching this design, but it sounds like you are starting from ‘scratch’ when creating a master page. I urge you to look into using a “minimal master page” to build your design on. This will include the necessary controls from SharePoint in the master page that will render the ribbon and other default SharePoint javascript components that you mention. Randy Driskell has a great article about this that should help you get started. Good luck!