Monthly Archives: April 2012

Learning to Brand from the start

I set myself on the quest of changing the Global Navigation or Top Links Bar of my SharePoint 2010 Team Site. That is the horizontal bar at the top of your SharePoint where new sites you create typically go. Like any good SharePoint branding beginner, I started by looking online for help and searched popular books about branding. The first book I read started talking to me about Master Pages, Page Layouts and other concepts, this is way too complex – I need something for a beginner. Online documentation read the same thing with articles like “Edit your Master Page to add a Megadropdown menu with jquery”.

If you remember my previous post “Brand your SharePoint?”, I mentioned that I am neither a developer nor a graphic designer. So where should I start? Knowing only some very basic CSS knowledge and having a strong will to BRAND my SharePoint. Across my research online I came across this CSS Chart that, for a given location, will tell me which CSS classes are used. From my reading of 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours a CSS Class is a way for me to set “design settings” that can be used in html. If you haven’t read this article yet, I strongly recommend you do before we get deeper into branding SharePoint in coming weeks.

I thought to myself “Jackpot! CSS Chart”, but soon I realized I did not know what to do with this.

Starting Safely

Before adjusting the look and feel of our SharePoint, we need to make sure that any changes we make will not have a disastrous effect on our SharePoint Server. The idea is to safely test and apply changes but limiting the possible collateral damages.  For this, we have an easy solution, the Content Editor Web Part. The Content Editor will allow someone to write code that will only be applied if someone visits the page on which it was added. What does this mean exactly? Well if we change the colors of hyperlinks for example, by adding our changes in the Content Editor’s HTML editor, it will only affect the page we are on.

Adding the Content Editor Web Part can be done in 6 easy steps:

  1. Click on Edit Page
  2. In the Ribbon, select Insert, then Web Part
  3. Find and add the Content Editor Web Part under the Media and Content category
  4. Make sure you are inside the Content Editor Web Part by click on the “Click here to add new content” link inside the web part or by just clicking inside of it.
  5. In the Format Text tab of the ribbon, select HTML as shown below then Edit HTML Source
  6. You should get a blank HTML Source Editor popup

Detailed Step by Step with pictures are available here: How to edit source in Content Editor Web Part in SharePoint 2010

I’d like to add that this method of adding CSS by Content Editor Web Part is purely for testing. In coming articles we will see how to add CSS using best practices, but for now we’re keeping it simple.

Small beginnings

Although my goal is to change the Global Navigation in SharePoint from this:

To something, a little more like this:

Or even:

I will first need to make sure that editing in the Content Editor works the way I intended it to. I added the Content Editor Web Part using the 6 easy steps mentioned above. Added the following CSS to change the color of the Global Navigation:

<style>

DIV #s4-topheader2  {

BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #323232; PADDING-TOP: 4px; PADDING-BOTTOM: 2px;

}

</style>

**The padding is to add a little space above and below my Navigation bar**

I think we are on to something here.

Following up

Why did I use DIV #s4-topheader2 in my code? What does it mean?

In my next article I’ll search for the answer to that question by exposing the Global Navigation to you.

Brand your SharePoint?

I have been working with SharePoint for quite some time now with SharePoint 2003, 2007 and 2010. Having worked on numerous projects, it allowed me to see SharePoint as a platform, which allows companies to map their business processes, build Intranets and Extranets. It changes the way people see them from outside through a Public Facing site as well as other scenarios. Throughout my personal experiences of meeting different interesting people and evaluating their unique needs, it allowed me to touch many aspects of SharePoint like Governance, Information Architecture, Taxonomy, Server Architecture, Site Architecture and of course today’s topic, Branding.

I am not a developer nor am I a graphic designer but I have lost many hours getting that Team Site, Publishing Site, Web Part and even the Search Results to look the way that I wanted.

Why?

Some questions started popping in my mind like “Why do I feel it is so important for that logo to appear exactly the way I wanted it to? Why am I spending so many hours getting the global navigation to look the way I had planned it? Why is the Quicklaunch getting a makeover right now? Why do I spend time on TopSharePoint.com ?”.

And most importantly, “Why does the SharePoint Project only go into Production once it is perfectly Branded- even though it has been functional for quite some time?”

So why is it important to Brand?

Proud– As the person in charge of a Team Site, it is important for me that people that come and visit/collaborate with me on the Team Site are enthusiastic and interested. It is the same reason you always wear your favorite shoes, shirt to an important event; it is the image and feeling which it conveys which makes the item a staple of your wardrobe. Every Site Owner in SharePoint feels like their SharePoint Site is theirs.

Senses of belonging – Today, businesses have changed; they have taken very different inventive methods to give a sense of identity, of partnership to their employees. Why? Because it is believed that someone that is proud of where he works, that feels responsible or attached to his work, will use their skills and talents to their full potential. Just as large product companies develop Brand recognition through their website, it is no different with a SharePoint Site directed and used by the employees.

Would you show me your SharePoint?I started asking this question to some at the SharePoint Summit in Québec and most of them tried to either evade the question with a grin, letting me know that it wasn’t really something they were proud of or were still using the out of the box look and feel.

Why not use SharePoint as an opportunity to showcase you- change your answer to yes.

Starting to Brand SharePoint

In coming weeks I will throw myself into this mystical world of branding to better understand how to apply it in SharePoint Sites. I will take apart the Site piece by piece, and see everything that we can do to it and how. I will show you the steps I took to get something to work, but I will also share with you the problems I encounter.

A friend of mine recommended I read this article:

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours

I strongly recommend you read this article, if like me, you feel it’s time you took your SharePoint Site to the next level with Branding. Yes it takes a good day to get through, but is an easy read and very informative.

Stay in touch as we go through this Branding experience together.

But meanwhile, would you show me your SharePoint?

Stay Tuned!

Hi all.

New project this year! We are writing a book about Agility and SharePoint. My colleague Philippe Sauvé and I will embark in this endeavor to give you, the reader, the best possible means to understand how to achieve succes with your SharePoint deliveries.

I look forward to your comments regarding what you would like to see in this book.

Thank you,

Benjamin

Create a SharePoint Lookup Column to another Site

The story of a Site Column

I have been working with SharePoint for quite some time now, and have come to realize that a lot of SharePoint users do not use what is available out of the box. Very popular example for this is the lookup column.

The problem:

I want to create a lookup column in my list/library that looks up data that comes from a list/library of another site.

Many SharePoint users believe this is out right unavailable without coding some sort of a solution. Well there is a solution.

Solution:

As long as you stay in the same Site Collection, you can create a lookup Site Column that will be used to get information from a list that is available in a parent site. The Site Column must be created in the same site as the referenced list/library.

Let me guide you through this..

Our scenario has a Site called Training with a List I just created called Manufacturers in which I have 5 sample Manufacturers

Now while staying in the Training Site, I am going to create a Site Column of type “Lookup”:

1. Go to Site Actions then Site Settings

2. Click on Site Columns

3. Create a new Site Column

4. Give it a name and choose “Lookup” as type. In this example I chose to lookup my Manufacturers list

5. I went to my subsite called in this example “Subsite”

6. Add your Site Column to any list/library you would like to use it with. I am going to add it to my “Shared Documents” Library. Go to Library Settings:

7. Click on Add from Existing Site Columns under the Columns section of your settings

8. Find and add your Site Column

9. Success! Lookup column looking for values of a list/library on another Parent Site