What's New
0

SharePoint 2010 – Branding My Sites and Person.aspx

By
Eric Overfield
– October 17, 2011Posted in: SharePoint

While at SharePoint Conference 2011 last week in Anaheim, California, I was asked to participate as the SharePoint Branding Expert at the “Ask the Experts” event. I was asked a few questions that required code to better explain. I already provided code on a fixed footer in SharePoint 2010. Another question came up regarding SharePoint Branding and My Sites. Below I provide some guidance on a way to modify person.aspx in the My Sites site collection.

One of the conference attendees was having difficulties with the layout in their My Sites person.aspx page that loads the public profile of their employees. In particular they wanted to add content or a web part that could not be modified by the end user. What I suggested was simply adding a web part directly into the person.aspx page using SharePoint Designer.

Opening My Sites site in SharePoint Designer

My Sites in SharePoint 2010 is just like any other site in SharePoint, meaning that if you have the correct permissions set up, you can open your My Sites site collection in SharePoint Designer. Once you do this, look in the Navigation Bar under All Files. In the root of your My Sites folder you will see a few aspx pages. The public profile for each of your users is defined by the person.aspx page by default. Open person.aspx and then in Code View, click on Advanced Mode found in the Ribbon, in the Editing section.

Now you can go ahead and update the person.aspx page as required. I have two quick ideas.

Add a web part outside of a web part zone.

This will lock the web part, so that it cannot be modified or removed via the web browser.

Or how about this.

Automatically add a web part to a web part zone

Adding a web part to a web part zone in the person.aspx would make it much easier for an administrator to modify or remove the web part via the web browser. This may or may not be a problem, that is up to you.

The outcome of the two different techniques in my examples would produce a very similar outcome from the perspective of those that visit someone’s Profile page.

Conclusion

Using either a prebuilt web part, or custom web parts, you should have no problems modifying the person.aspx page to meet your needs. You could use the RSS Reader webpart to pull data from many sources, you could pull data from lists, many options are at your disposal. You could also add jQuery and other hardcoded html/css/javascript to provide rotating banners or messages.

There is a catch that you will want to be aware of. This method requires you to add the webparts to the Master Page itself so the account you are using to modify the masterpage would require the proper permissions to write to this file. Along this same line, since you are modifying the Master Page, all users would see the same web parts, you could not use this technique to allow each user to modify the web parts on their profile page.

How have you modified your My Sites site collection? Or what are you trying to do? Please tell me, I and others would like to know.

Tags: , , ,
0

SharePoint 2010 – Adding a Fixed Footer to your SharePoint Master Page

By
Eric Overfield
– October 13, 2011Posted in: SharePoint

While at SharePoint Conference 2011 last week in Anaheim, California, I was asked to participate as the SharePoint Branding Expert at the “Ask the Experts” event.

One of the conference attendees was having difficulties applying a fixed footer to his SharePoint 2010 Foundation site. After trying to explain the theory of having to modify the height of the s4-workspace div, I told him I would create sample code for him and publish it on our PixelMill blog.

Please note that this solution requires javascript as well as a current jquery library. I have found so few browsers that do not allow javascript that I believe this to be a reliable solution. I also assume that the ribbon will stay at the top and that the s4-workspace div is still being used for your primary content.

Create the Fixed Footer

Creating a fixed footer is easy enough. All you need to do is create a new div and add it most anywhere in your Master Page. It can go almost anywhere because it will be fixed to your browser window. I recommend right after the closing </div> tag of your s4-workspace div though. So after you create a copy of your v4.master Master Page, because we all know you should never modify the v4.master file directly, add the following code, right after the closing tag of the s4-workspace div.

<div id="footer-fixed">
</div>

You can of course add whatever content, child tags and containers, etc, you want within this footer-fixed div. Next we need to provide basic css for this div, that has an id of footer-fixed. Add the following css in a location of your choice.

If you choose to add the css to the head section of your Master Page, add the following just before the closing </head> tag.

<style type=”text/css”>
#footer-fixed {
	position: fixed;
	height: 60px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	background-color: #000;
}
</style>

Or just add what is between the <style></style> tags in an alternative CSS location or your own custom stylesheet.

What this little block of CSS code does is tells the html element with an id of footer-fixed, our footer div, that it’s position is fixed to the browser window, that its height is 60 pixels (you can change this as needed), it’s width is 100%, or the entire width of the window, and to then position the element 0 pixels from the bottom of the browser window and 0 pixels from the left of the browser window. I have set the background color to black just so that the footer is more visible without any content.

You can change the height to fit your needs, but I do not suggest adding margins or padding to this footer div. If you need padding and margins then I suggest you add a child div within this footer-fixed div and apply the margins and padding here. This is primarily because if you want left or right padding or margins then the width is no longer 100% and if you add top or bottom padding or margins then the browser will have more difficulty determining the height of the div.

If you added the style directly to your Master Page, go ahead and save the Master Page if you wish and set it as your default master page for now. If you added the css to a custom stylesheet, update your Master Page to reference this stylesheet and save. Reload your site and you will see the fixed footer, but if the page you load has too much content to fit in the browser window then the vertical scrollbar ends up under the fixed footer. This is because the right and bottom scrollbars are not a part of the browser window, rather they are added by SharePoint’s init.js javascript file to the s4-workspace. This was Microsoft’s way of having a fixed ribbon on the top of SharePoint sites and has caused many Branding projects delays.

So how do we fix this?

My method is to use a little jquery and a built in javascript function provided by SharePoint. We will now want to link to jquery somehow. I personally suggest downloading the latest jquery library from jquery.com, then adding it to your Style Library, Site Assets or scripts directory. In my case I added it to the /Style Library/scripts directory.

Then add the following line of code to the head section of your Master Page.

<SharePoint:ScriptLink language="javascript" name="~SiteCollection/Style Library/Scripts/jquery-1.5.min.js" runat="server"/>

I added this line just after the <SharePoint:CustomJSUrl runat=”server”/> line, although you could add it to the bottom of your head section. Don’t forget to change the “name” value to match the directory where you placed your jquery library.

Finally add the following javascript at the bottom of your <head> section

<script type="text/javascript">
function resizes4WP()
{
	if ($("#s4-workspace").length && $("#footer-fixed").length)
		$("#s4-workspace").css('height', ($("#s4-workspace").height() - $("#footer-fixed").height()) + 'px');
	}
	ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(resizes4WP); }, "init.js");
</script>

This is where the magic happens. What we are doing is creating a simple function, resizes4WP that makes sure that s4-workspace and footer-fixed exist. It then simply modifies the height of the s4-workspace div to allow room for the fixed footer. Great little function, but we need it to run after the browser has already fired the built in javascript code that determines the proper height of the s4-workspace in the first place. Luckily SharePoint 2010 provides such a function, then ExecuteOrDelayUntilScriptLoaded function. You can learn more about this function here http://msdn.microsoft.com/en-us/library/ff411788.aspx, although the gist of it is that any time the s4-workspace div is resized, our function will be triggered right afterwards.

Conclusion

There are other ways to accomplish this same task. I have heard of using padding at the bottom of the s4-bodyContainer div, but then you have to add more javascript to still account for the size of the s4-workspace div to make the horizontal scrollbar visible.

Have you used a different technique? Please tell us as others would probably like to know as well.

Tags: , , ,
0

Thoughts from SharePoint Conference 2011

By
Eric Overfield
– October 7, 2011Posted in: SharePoint

Well after one excellent, long week, SPC 2011 is over. Although we only got to a few sessions, the ones we hit up were great.

It was nice meeting the many of you who stopped by our booth. Being the only company dedicated to SharePoint Branding at this conference gave us an opportunity to hear all of the many ways that you are trying to customize the SharePoint platform.

It was encouraging to hear several presenters stress the importance of branding in their presentations. We know it’s not always easy and there’s often little information available to address the number of questions about effectively branding in SharePoint.

Also of interest was just how many people showed up to this conference. There was no major launch of a new version, no major annoucements, no major impovements, yet between 7,000 to 8,000 people were here. This goes to show just how big and powerful the SharePoint platform is. A few other key points that I noticed through sessions and listening to others is the growing importance of governance in SharePoint 2010 and the power available if you need it. Sure SharePoint has built in workflows, allows for great collaboration between groups and more, but there needs to be a plan in place to guide or steer the process.

Another often heard topic of conversation was SharePoint’s built in search and FAST search. If you haven’t looked into FAST Search Server for SharePoint, I suggest you check it out. The results from FAST Search Server provide an amazing intranet search of content and people and allow for searching, sorting and filtering your organization’s data that will make your SharePoint users more productive. But do not take FAST Search Server lightly, with power comes responsiblity. A good search administrator is a must with FAST Search.

Lastly, for those of you who attended the conference, don’t forget that all session slides and session videos are available online in your MySPC account for the next three months. Go review the sessions you went to or find out what you missed when you were too busy, or unable to maybe drag yourself out of bed for a 9am session Wednesday morning?

We look forward to helping provide more valuable content, as well as essential products and services to address your concerns. Feel free to learn more about how PixelMill can help your SharePoint Branding projects.

Tags: , ,
0

Ask the Experts at SharePoint Conference 2011

By
Eric Overfield
– October 6, 2011Posted in: SharePoint

What a great experience. Last night during the SharePoint Conference 2011 “Ask the Experts” night, it looks like the SharePoint Branding table experts were unable to attend.  A huge thanks to Erik Swenson, author of the upcoming book, “Practical SharePoint 2010 Branding and Customization” from APress  for helping pick up the slack.

But what was exciting to me is that someone came by, threw me a shirt and said get in there, we need a SharePoint Branding expert in there now. I was of course happy to lend a hand as was able to help quite a few attendees out with their branding questions.

For those of you that needed examples emailed to them, I will try to get those out to you as quickly as I can. I appreciate everyone’s patience while I gave every person as much assistance as I could, even after they started turning the lights out on us.

Eric Overfield as the SharePoint Branding Expert

Thanks to the organizers for recognizing PixelMill’s expertise in the SharePoint Branding field. We will continue to look forward to helping all of you out both online and at events we attend with all of your SharePoint Branding needs.

Do you need more hands on assistance with your next Branding project? Check out our SharePoint Custom Services page.

We would be happy to help.

Tags: , ,
0

PixelMill is at SharePoint Conference 2011

By
jduron
– October 2, 2011Posted in: SharePoint

Alright dear readers, PixelMill is here at Mircosoft’s SharePoint Conference 2011, in sunny Anaheim, California. If you are not going to be here, you can read more about this conference at the SharePoint Conference 2011 site, www.mssharepointconference.com. The rumor is that this show is sold out at over 7,000 attendees. Way to go SharePoint Nation.

You can find us at booth 160. Please stop by and talk to any of our team members any time the Exhibit Hall is open. Let us know if you have any questions about how to brand SharePoint or problems with your customization project. We’d love to help.

It’s great to see the number of quality exhibitors at the event. SharePoint is really attracting the best tech providers around. What’s interesting though is that it looks like we are the only company dedicated to SharePoint Branding as far as we can tell while we were walking around checking out the other exhibitors and their booths.

For those of you who will be joining us a SPC 2011, what is in store for you? Based on the list of sessions, hands on labs, outside activities including a trip to Disneyland Tuesday night just for Conference goers, this is going to be a packed week. I highly recommend you attend Randy Drisgill and John Ross’ sessions on branding, as well as sessions hosted by Ted Pattison. He’s a great speaker with excellent information to share. I am sure the sessions that SPC has lined up will be great.

There are also great sessions on Search, Workflows, Infopath, SharePoint and Social, Administration, Architecture, and much more. In between sessions, be sure to hit the exhibit hall and stop by to say hello.

Hope to see you soon.

Tags: , ,