The information architecture and designer folk at my company were in need of being able to see what the SharePoint 2010 default out of the box lists, libraries, sites and web parts look like.

So I have taken some time and compiled 46 screen shots to show almost every page in SharePoint freshly created.

Sites

Document Center

Meeting Workspace

Search Center

Search Center – Landing		Search Center – Results
Advanced Search

Team Site

Publishing Site

Blog

Blog – Home Page		Blog – View Article
Blog – Category Archive

My Site Host

Profile – Memberships		Profile – Colleagues
Profile – Tags and Notes		Profile – Content
Profile Organization		Profile – Overview
Profile – Landing / Newfeed

Common Layouts

Pages

Publishing Basic Page		Enterprise Wiki Page
Web Part Page		Page
OSSSearch Results		View All Site Content
Create New Site		Create New Library

Libraries

Document Library

Default View		Default – Selected Item and Drop Down Menu
Edit Properties		View Properties
Add New Document

Picture Library

View All Pictures		View Single Picture

Lists

Calendar

Day View		Week View
Month View		Add New Event

Discussion

Web Parts

List of All Web Parts 1		List of All Web Parts 2
Image Web Part		Site Users Web Part
Pages Web Part		Summary Links Web Part
Workflow Tasks		Calendar
Table of contents

I originally posted about a solution here, but now looking back this is not the best way to achieve this.

So here is a better solution!

*Update: Added a selector in the JS for Day and Night Master Page

Simply add the following  in any CSS file / in the header of your master page.

#s4-bodyContainer {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}

This will vertically align your site like so…

This example shows the width set to 950 but of course anything will work.

Bonuses!

Center align your ribbon!

/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}

/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}

This code will align the ribbon tabs keeping our 950 width in tact. like so…

Content with a larger width!

This little bit of code will correct pages where the content is actually larger than the width of the site. I use jQuery in this example so you will have to include it’s library!

An example of a page where the width is too much.

The Fix:

$(document).ready(function(){

//Elements with the potential to be too wide.
elements = $(".ms-bodyareacell > div > *, .main-container > div > *");
leftPanelWidth = $("#s4-leftpanel").width();

//For each Elements
$(elements).each(function(){

//if it's wider than the side width
if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$("#s4-bodyContainer").attr("style","width:"+newWidth +"px!important")
}
});
});

With this code it will rescale the page width to the content that is too big for it!

Do  you ever have days when you sit back, take a breath and ponder just how rudimentary SharePoint Designer can feel when compared with a real IDE?

I know I do and it’s this very thought that compelled me to search for an alternative. What I ended up with was a quick and easy setup that allows me to have code collapse,  better syntax highlighting and jQuery Intellisense when I need to do some serious JavaScript editing.

Before I explain I want to make something clear. This is not for everyone. SharePoint Design is great for everything and anything SharePoint. It handles Wysiwyg editing, Web Part creation and much more, but some times I spend days upon days on just html, css and javascript. All I need is access to my layouts and branding files. If this sounds like you, keep on reading.

I have been using Visual Studio 2008 /2010 to edit files stored in my SharePoint Content database by simply mapping my Site Collection’s WebDAV to a drive! Follow these steps and you can too!

1) Map a network Drive

Enter your SharePoint site’s address and make sure you login with the SharePoint creds

In Visual Studio open a website

If you need to access a hidden folder simply type it and click open

Tada! SharePoint files from a content database in Visual Studio!

To add additional folders simply click the solution and “add” an “existing web site”

Here you can see 3 sites added. Instead of including the root directory I just mapped the 3 I would be using.

Now what about jQuery Intellisense?

Download the most current “Documentation: Visual Studio” on the jQuery website.

Include it in Javascript Directory. And add the following refrence at the top of your Javascript files.

Look! Intellisense on a JavaScript File located in the SharePoint Content Database!

You can even open Page Layouts, Edit and save.

Unfortunatly you can’t open Master Pages. But CSS and aspx pages are ok!

One of the biggest features of SharePoint 2010 is the Office Ribbon. Whether you love it or hate it, it’s here to stay and eventually you will be faced with the choice of including the ribbon within your site branding. What can be edited and changed in the ribbon? Microsoft spent millions, if not billions of dollars to research and develop the ribbon so how much should we change?

Just because we can…does it mean we should?

I was recently at a meeting with one of our clients and a Microsoft rep. The client was having a hard time grasping the concept of the SharePoint Ribbon and its role in editing, administering and browsing a site.  The discussion went back forth. Eventually everything was sorted out but it got me thinking…the new ribbon is quite the mental hurdle and this discussion is bound to repeat itself as 2010 adoption grows.

I also realized the impact that the ribbon is going to have on branding. With SharePoint 2007, if you had the skills, you could essentially make SharePoint look any way your heart desired. As long as you included the “site actions” and other essential one click menus you could design and layout SharePoint as you wished.

In SharePoint 2010, the ribbon is static at the top the screen and it never scrolls. It plays a massive part in usability and administration. I am always on the quest to customize SharePoint to a point beyond recognition, but how far can I alter the ribbon?

My Mission: To brand a 2010 site to my hearts content AND alter the look and feel of the ribbon making sure that it retains all previously established functionality and usability.

The Rules: Just using CSS, Javascript and a custom Master Page. No Server Side Code. I’m not adding functionality. I’m just altering the look and feel.

The Design:Whoa!  What did I do?! The ribbon isn’t at the top! What’s the reason for this? Well… I wanted to put more emphasis on the sites title and navigation; separating the two. This will allow my creativity to flourish because the ribbon is now it’s own entity. I can now focus on the design of the site as if it were a typical website; not having to worry about about my design functionality and its ability to mesh with the fixed ribbon on the top.

This image illustrates how I have removed the content from the “browse” tab and made it static, above the ribbon. If you were to click the browse button the ribbon will now just collapse.

As far as the design of the ribbon goes, I have just changed the colours, added the ruler background and rounded the corners all in an effort to align it with the look and feel I have chosen for the rest of the site.

Changing the Position of the Ribbon: I know that changing the placement of the ribbon seems like a daunting task, but in reality it’s just the tabs and actions of the ribbon in two controls. There are other items in the default ribbon and they do include the nav and title but once you understand what each control does, it’s not hard to pick it apart and move the pieces around.

Here is a breakdown of the essential controls laid out to better understand how it all works:

To move the pieces, we want to the correct zone so we simply move the following areas:

The Following code can be placed anywhere in your master page to change the location of the ribbon tabs and action icons.

<SharePoint:SPRibbon
runat="server"
PlaceholderElementId="RibbonContainer"
CssFile="">
<SharePoint:SPRibbonPeripheralContent
runat="server"
Location="TabRowRight"
ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg">
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>

Changing how the Ribbon looks: Just like any SharePoint branding it takes time and patience. To style the ribbon, I created a set of styles to work with the html that the SPRibbon Controls output. These styles are loaded last and override the initial default styles. In addition to these, I have used 3 background images to attain my design.

/* Removes the original background from the ribbon */
body #s4-ribboncont{
background-image:none;
margin-top:10px;
}

/* Globally set all the background colors to transparent and remove background images / borders */
#s4-ribbonrow,
#s4-ribbonrow *
{
background-color:transparent !important;
background-image:none;
border-width:0px;

}
.s4-ribbonrowhidetitle{
height:inherit !important;
}
/* After globally turning off borders.. turn back on the separators for the large icons*/
.ms-cui-groupSeparator {
border-right:1px solid #E7E7E8 !important;
}
.ms-cui-topBar2{
border-width:0px;
}

/* Set the background for the tabs at the top (Browse / Page) */
.ms-cui-ribbonTopBars{
background:url('../img/ribbon-top.png') no-repeat !important;
padding-top:0px;
padding-bottom:5px;
}

/* Set the background for the bottom part of the ribbon */
.ms-cui-tabContainer{
background:url('../img/ribbon-bottom.png') no-repeat !important;
padding-bottom:5px;
position:relative;
top:-6px;
}

/* Set the background for the additional dynamic tabs (Web parts / Lists ect) */
.ms-cui-cg-i{
background-image:url('../img/ribbon-tab.png') !important;
background-position:bottom left;
background-repeat:no-repeat !important;
height:20px;
margin-bottom:2px;
}
.ms-cui-cg-db .ms-cui-cg-t{
height:17px;
background-image:url('../img/ribbon-tab.png') !important;
background-position:bottom right !important;
background-repeat:no-repeat !important;
margin-left:4px;
}
.ms-cui-cg-t-i{
color:white;
font-weight:bold;
}
.ribbon-wrapper{
position:relative;
}

/* For use with the next step! read on! */

.fixed-ribbon{
position:fixed;
top:0;
width:950px;
z-index:21;
}

Have a look at the background images to give you an idea how I did it.

ribbon-top.png
ribbon-bottom.png

Changing how the Ribbon behaves: Now that I have the ribbon in the correct location and it’s styled to my liking, I have one last step. The ribbon was designed to always be visible. That’s why it’s fixed at the top of the screen. An example of this would be a content editor web part at the bottom of a page. You scroll down to the bottom but the controls to edit, change fonts and add links are in the header and would not be visible. I have now taken the ribbon from the fixed position at the top of the screen and have included it in the master page as a relative HTML box that scrolls.

With some jQuery we can overcome this inherent problem by toggling the ribbon to become fixed when the page scrolls to a position where the ribbon would be out of the viewable area.
*Note: This assumes that the ribbon has been placed in a custom div with the class of “ribbon-wrapper”

// This is written in jQuery.
// This piece of code will toggle the ribbon from a fixed position to a relative position based on the viewable area in the browser

// When the Window Scrolls
$(window).scroll(function () {

// The Current Window in an object
var jWindow = $(window);

// If the Ribbon is turned on...
if(hideRibbon != true)
{

//If the top of the page is over 145 pixels scrolled then...
if(jWindow.scrollTop() > 145)
{

// Set the height of the ribbon box and toggle it to fixed.
$(".ribbon-wrapper").css("height", $("#s4-ribbonrow").height() + "px");
$("#s4-ribbonrow").addClass("fixed-ribbon");

}

//If the top of the page is less than 145 pixels scrolled then...
else if(jWindow.scrollTop() < 146)
{

// Remove the set height and toggle it back to relative
$("#s4-ribbonrow").removeClass("fixed-ribbon");
$(".ribbon-wrapper").removeAttr("style");

}
}

});

Last but not least, since I have now removed the title from being displayed in the ribbon when “browse” is selected, let’s collapse the ribbon to only show the tabs.

// If there aren't any buttons in the ribbon don't display the box.
hideRibbon = true;

// The the Ribbon is loaded in the DOM
$("#RibbonContainer").ready(function(){

// Loop through the children of the ribbon icons. And if you find a child, set the flag to false.
$("#s4-ribboncont .ms-cui-tts li").each(function(){
hideRibbon = false
});

//If the flag was never triggered (no icons were found) then hide the ribbon box.
if(hideRibbon)
{
$("#s4-ribbonrow").hide();
}
});

Conclusion: Branding the ribbon is not for the faint of heart. As you can see it takes a lot of time and effort. I know that the ribbon was never meant to be branded or moved but I really do think that we can’t fully establish a custom look and feel until everything has been branded.

Being able to change the location and design of the ribbon to a safe level of customization will satisfy those of us on the eternal quest to make SharePoint our own…for ourselves and for our customers.

The new whitepaper I just wrote on branding SharePoint has just been release by the company I call home, Non~Linear Creations.

In my paper I dive into the Five steps for transforming the visual design of SharePoint.

Check it out and let me know what you think.

http://www.nonlinearcreations.com/Whitepapers/SharePoint-Branding-Best-Practices.aspx

I retackled this fix and now have a much better way of doing this that I have been using for many projects.
Please see my new solution here

— Old Solution for archive purposes ——————

I was faced with the challenge of creating my first fixed width SharePoint site and the content had to be centered!

SharePoint 2010 implements a complicated system of divs, css and JavaScript to attain their static ribbon at the top of the screen but unfortunately this can get messy with different layout types.

In the master page remove the s4-workspace ID from the the div. This is the ID the java script looks for to resize the content.

Second, add the following to your branding css file or a style tag in the header after the core.css

/* Page Wrapper */
body{
overflow:auto;

}
form
{
width:950px;
margin-left:auto;
margin-right:auto
}

That’s it!

The fixed width gets centered by the auto margins and the page properly shows the scroll bars because of the overflow:auto!

I recieved this weird error in SharePoint Designer.

Cannot perform this operation. The file is no longer checked out or has been deleted.

After googling it I found some solutions.

but all were in mention to the web cache.

Locate the WebsiteCache directory below and delete it:

Vista: %UserProfile%\AppData\Local\Microsoft\WebsiteCache

Windows 2003/XP: %UserProfile%\Local Settings\Application Data\Microsoft\WebsiteCache

This didn’t work for me. After trying a million things I found out that you can’t access your site from anything but the host name. For me I use an external version of SharePoint designer accessing my SharePoint VM.

So instead of using an IP I ended up making an entry in my host file

%SystemRoot%\system32\drivers\etc\host

123.123.123.123      sharepointvm1

Simple solution? Yes. but took me a while and wanted to share my findings.

I’m back and It’s time to get back to work! Expect some more interesting posts in the future!

The Photoshop Comp

The Results of my HTML Coding.

Seeing that I am doing this for SharePoint I decided to tackle my HTML with SharePoint Designer.

The official blurb from Microsoft.com wraps it up nice and vaguely =)

Office SharePoint Designer 2007 provides you with tools to automate your business processes, build efficient applications on top of the Microsoft SharePoint platform, and tailor your SharePoint site to your needs, all in an IT-managed environment.

I know that SharePoint Designer is a full solution for SharePoint development and content editing, but at this point in the game I’m using her strictly for HTML development.

When coding in HTML i believe in doing it the right way. Unfortunately (Or fortunately as I see it) this means WYSIWYG is out of the picture. I hand code everything. In the past I have used DreamWeaver, but today that’s not in the bag. As you can see. The Demo Site I coded is XHTML 1.0 Strict! (valid HTML).

It’s also important to take note that I assumed SharePoint Designer was Visual Studio 2008′s HTML editor stripped and stuck into Another App, but it’s not. It looks the same but there is subtle and extreme differences. Don’t be fooled!

The first look and comparison.

As you can see. Both look simple enough.

Each have

• Syntax Coloring
• Line Numbers
• File Navigation
• Code hints
• Auto Completion
• WYSIWYG (Never used it, don’t ask)

Everything else is over and above the features I would use in a typical hand coding session. I don’t like the buttons you push that sticks in pre made tags.  Any part of the IDE that inserts or alters my code in any way is risking my page and it’s chances of passing validation. Microsoft products are notorious for this. Especially in WYSIWYG and the ASP.Net HTML controls.

Off the top of my head. Things that Microsoft loves that aren’t valid.

• Uppercase tags (<DIV></DIV>)
• No quotes on attributes (<div id=tom rocks></div>)
• HTML tags aren’t properly constructed (<br> instead of <br />)
• Tags are grandfathered (<b> instead of <strong>)

The Verdict?

CSS Inteli Sense

Intelisense is something I have always loved in ASP.Net coding. Any developer would agree that it’s one of their favorite features in Visual Studio. It’s partly the reason the I fell in love with DreamWeaver when it first came out. It’s code completion for HTML and CSS was astounding. I loved it.

Typical code completion.

SharePoint                      DreamWeaver

but I found that SharePoint Desinger had great intuition in a couple of other situations. Take CSS for example. If I was coding CSS to alter a specific Child Element of a parent with an ID. SharePoint Designer would give me a list of all child elements of that parent element. VERY COOL!

See how all the child elements are listed? So useful!

Validation Tips!

You can’t put nested Style tags in HTML for XHTML strict? THANKS!

Don’t get me wrong. DreamWeaver has validation. but it’s a tool you run every once and a while. The results are shown in a list. I never use it. This just adds error lines under the wrong tags (Just like when coding in Visual Studio).

Tag Erros!

As you are typing along there is always checks going on behind. Have a look here. Because one <ul> tag is broken the IDE tells you multiple spots this affects other tags.

The Error Messages

Conclusion

I was really surprised with my results. I like HTML coding. I find it to be challenging. I never use cross browser hacks. I never use IE if cases. My CSS is solid across Firefox, IE, Safari and Chrome. I guess the point I’m trying to make it this… I’m a solid HTML coder that sticks to his tools and knows what’s useful and what’s not when it comes to advanced coding in an IDE.

When I was recommend to try SharePoint Designer 2007 I laughed hearing that it was the new front page, but what I got was a rock solid HTML coding textpad with perks. Just the way I like it.  I’m astonished to see the amount of work gone into just the source code editing.

If you take home anything… I hope that maybe I’ve opened your eyes, or maybe make you second guess your preconceptions on SharePoint designer.

… A couple ‘hope to have improvements’ in the future from my perspective

Taking what I love from each of the IDEs I use on a weekly basis (VS 2008, DreamWeaver, SQL Manager) here are some things I think would really put SharePoint Designer on the top as far as hand coding goes.

• Intuitive tag closing. In DreamWeaver if you make a <div> opening tag. It won’t auto make the closing tag (It does in SPD2007 but you can turn it off). You can type in content and then just type “<” and the IDE will know what tag to close it with.
• Javascript Debugging. It’s in VS 2008. Would be nice to have it in SPD.
• Integrated Development Server. I know this might be a big one, but sometimes URL’s break when testing on a local file system because of root pathing.. EX “/css/file.css”
• jQuery (or other frameworks) and Javascript intellisense. Would be awesome.
• CSS intellisense in EXTERNAL css files. Not just header style tags.
• I miss my code collapse. and i would nice to have it intuitive to the closing tag of my current element.
• I like how some IDE’s will bold or highlight the closing tag of your current tag.
• Code bookmarks and maybe something like Region tags in VS.
• The Tabbed interface in SharePoint Designer is nice. but you can’t reorder tabs. The are stuck in the order you opened them in.
• Cascade your tabs to open side by side.