7 tips for branding Microsoft Sharepoint


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

sharepoint branding tipsIve been lucky enough to style several Intranet sites over the years, and here are some of the tips I’ve picked up that I wished I knew a long time ago.

1. Code inside your browser using Developer Tools.

Using the deveScreen Shot 2014-12-10 at 9.02.20 pmloper tools provided by your browsers, editing inside your browser is the fastest and easiest way to change those styles. It’s much faster than any other method, and you can see changes on the fly. I recommend using Chrome and Firefox Developer Tools – as they seem to display cleaner styles.

2. Use Advanced CSS Selectors

Targeting the right div in your code can be really tricky, it helps to have some top notch selector skills under your belt. Here are some handy ones to get up to speed on:

A. Selecting an Element by the end or beginning of it’s ID

Sharepoint doesn’t make life easy. What looks like this one day:

#MSOZoneCell_WebPartctl00_m_g_df2dc21f_a6ed_4272_8f13_bca4f5a7f9de

Quickly changes into something else, breaking your styles. But you’ll notice that the start of the div is the same…

Get around those pesky Sharepoint generated IDs by selecting their ending or beginning.

Select an element that starts with MSOZoneCell

div[id^=’MSOZoneCell’] { }

Select an element that ends with MSOZoneCell

div[id$=’MSOZoneCell’] { }

You can change the [id$=’ ‘] to [class$=’ ‘] if needs be as well.

B. Select element by it’s Title.

Sometimes you want to modify a particular Webpart, but not others. How? Through selecting the title.

Select Element by Title

td[title|=”Webpart Title”] { }

C. Selecting sibling elements

Sometimes the easiest way to select an element, is to select the element adjacent to it.

For the code:

<div> <div class=”ms-topnav>text</div> <p> more text</p> </div>

Select the ID-less and CLASS-less P tag 

.ms-topnav + p {

}

These are just some examples of selectors I have used on a recent project, there are others!

3. Fresh CSS file

Pretty basic stuff really, make sure your override.css file is located last in the list of referenced css files in the master page. Don’t overwrite any preexisting css files, because they will get overwritten at update time, wasting your good work!

4. Design wise

I’m more of a designer than a coder. The temptation is always to show your client something amazing, but that will give you endless trouble to implement. Consider your skill set, and budget before commencing.

5. Backup regularly

This goes without saying – but create regular backups and name them, just incase something goes terribly wrong. I like to have one at the end of every day.

6. Make your code clear to read

CSS files for me often end up over 2000 lines in length. So make sure you comment and organise your code. Make sure you layout your code so it’s easy to follow, and within best practice.

7. Communication

Strong and regular communication with your client is very important.

At the beginning of the project: Depending on their experience with a project like this, you need to help manage their expectations and If their budget is ambitious, make sure you tell them so. If time and the project allows, you may want to do some User Experience design, or even a half day UX workshop with them to help them understand who will be using the end product. Think about how you can value add.

Before styling: Make sure your client has signed off on your designs before you begin coding – nothing is worse than a client with cold feet trying to back out of a project, or dropping in last minute changes that will take days to implement. Make sure your client is aware the limitations of your design, that a reasonable amount of effort will go into making the design look like the ones on paper, but Sharepoint itself has limitations. Keep your client aware of when you expect to finish, and when they should begin testing.

Near the end: ask your client to test the solution, and provide feedback. They may even want to get a selected group within their organisation to test the solution and report back any design bugs to you. Sharepoint has lots and lots of pages that require a good deal of going through.

***

Sharepoint is a powerful tool, and it’s getting easier and easier to style with each iteration. Keep these tips in mind, and go style!

Advertisement:

Submit a Comment

Your email address will not be published. Required fields are marked *

*

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×