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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s