I want a jQuery only solution? AND I want it to span all pages on a site or across a whole site collection?

Well here is a very easy way to have just that.

In this example my code will add a button above the left navigation to toggle it off and on.

1) Create a new SharePoint 2010 solution in Visual Studio 2010.

2) Add your JavaScript files to be deployed to your preferred location. (This is usually either to the [Layouts] folder in the file system or the [Style Library] in the content db.

3) Create a new user control. You can either use code only control (C# or VB) or  you can create a visual control (.ascx)

I removed the code behind in this screenshot as it’s not needed.

4) Create a new empty module and add the following.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="AdditionalPageHead" ControlSrc="~/_controltemplates/StyledPoint.JavaScriptDelegate/JavaScript.ascx" />
</Elements>

This config points to a visual user control located in the _controltemplates folder.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="AdditionalPageHead" Sequence="1" ControlAssembly="$SharePoint.Project.AssemblyFullName$" ControlClass="StyledPoint.JavaScriptDelegate" />
</Elements>

This config points to the class of my user control in my assembly.

5) Create a feature and scope it to either Web or Site. The difference being that a site scoped feature will include your JavaScript solution on all pages, even sub sites whereas the Web scoped feature will only activate on a single site.

A good example of this would be something like a blog site. If you wanted to tweak or change something specifically on the site you would scope the feature to Web and then activate it in the blog only. There is another way we could about going this at the Site scoped lever but I will get into that in another post.

And finally the results!

Notice the lack of a toggle button above the left navigation?

Now we…

Activate the feature…

Toggling! – Open on the left and closed on the right.

Toggling! – Open on the left and closed on the right.

Download the example source here

Transforming the posts like so…

[Click for larger version]

Here is the quick and dirty on how I did just that.*
* note: this can also be done within XSLT without JavaScript, which I can blog about too, but like I said, this is quick with less chance for error.

1.   Copy the blog.xsl from the 14 hive.  Grab a copy of the original here

Located at : C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\XSL

2.   Edit this file and add the following lines of code.

Around line 15 is where the template for the blog home page is applied. We are going to add the jQuery library here.

Go to the jQuery home page and click the link to download the lastest source. Copy this source code. We are going to paste it right inside the XML between CDATA tags.

  1: <xsl:template match="View[@BaseViewID='0' and List/@TemplateType='301']" mode="full">

  2:     <script type="text/javascript"><![CDATA[ !!!!JQUERY SOURCE GOES HERE!!!! ]]></script>

  3:     <xsl:apply-templates select="." mode="RenderView" />

  4:     <xsl:apply-templates mode="footer" select="." />

  5: </xsl:template>

3.   Lower down, around line 396 we are going to add more JavaScript.

  1: <xsl:if test="$ShowBody=1">

  2:           <div class="ms-PostBody">

  3:             <div>

  4:               <xsl:apply-templates select="$Fields[@Name='Body']" mode="PrintField">

  5:                 <xsl:with-param name="thisNode" select="$thisNode"/>

  6:                 <xsl:with-param name="Position" select="$Position"/>

  7:               </xsl:apply-templates>

  8:

  9:               <script type="text/javascript"><![CDATA[

 10:                   $(".ms-PostBody[rendered!='done'] > div > div").each(function(){

 11:

 12:                      if($(this).text().length > 400) {

 13:                              text = $(this).text().substring(0, 400);

 14:                              $(this).html(text + "... " + "<a href='" + $(this).parent().parent().parent().find(".ms-PostTitle a").attr("href")  + "'>Read More</a>");

 15:                      }

 16:

 17:                   }).attr("rendered","done");

 18:               ]]></script>

 19:             </div>

 20:           </div>

 21:         </xsl:if>

 22: 

Here is a quick breakdown of the code.

  1: // For each post in the list that hasn't already been truncated..

  2: // (We use an attribute called 'rendered' as the flag to check for already truncated posts)

  3: $(".ms-PostBody[rendered!='done'] > div > div").each(function(){

  4:

  5:    //If the text of the post has more than 400 characters.

  6:    // (the jquery .text() method is awesome because it strips all html)            

  7:    if($(this).text().length > 400) {

  8:

  9:       //Let's truncate the text.

 10:       text = $(this).text().substring(0, 400);

 11:

 12:       //And finally change the post content, adding a "..." and a more link, which we get the url from the current posts title

 13:       $(this).html(text + "... " + "<a href='" + $(this).parent().parent().parent().find(".ms-PostTitle a").attr("href")  + "'>Read More</a>");

 14:    }

 15:

 16: //This last piece add the renedered flag. Deeming this post truncated.                           

 17: }).attr("rendered","done");

4.   Now take this new blog.xml (You can rename it if you want) and upload it to your root site collection site library.

For example :

http://styledpoint.com/Style Library/XSL Style Sheets/Blog_new.xsl

5.   After you upload the file, navigate to the SharePoint 2010 blog site and put the home page into edit mode, edit the blog post lists web part.

Got to the “Miscellaneous” section and put in the relative url of the xsl file in the [XSL Link] input.

6.   Hit apply and it should work and you will something that looks like this.

Leave any questions in the comments below.

You can download my modified xslt file here > [blog_new.xsl]

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.

Download HERE

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.

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!