SharePoint Branding for Education

Standard

Over the past few months BFC Networks have been working hard to change the way SharePoint looks in the education space.  By default SharePoint is very bland and doesn’t love much in its role to engage users. 

At BETT 2012 BFC Networks were proud to have Microsoft use the design on their stand to demonstrate how SharePoint doesn’t have to look like it doesn’t out of the box but instead it look existing, engaging and relevant to the education sector.

We are announcing today that we are now offering the design to any schools with SharePoint 2010 allowing them to change their environment to look attractive for their school.  The design will be available in the BFC Shop in a few weeks times but orders can now be taken.

If you like the design and want to use it for your SharePoint 2010 please get in touch by emailing info@bfcnetworks.com and we look forward to hearing from you.

Team Site

image

Staff Portal Page

image

MySite Profile Page

image

 

Click image to see full view of the image.

Add a Banner to your SharePoint Site

Standard

There are several ways to add a banner to the top of your SharePoint site like below.

 

The banner sits in your global breadcrumb so you need to think about your design of your image.

I create my images in Adobe Photoshop and this is the only additional tool used in this how to.

Open up your image editor (Photoshop) and start with a blank canvas that is width of 2200px and height of 100px.

When your SharePoint page loads it will load this image from the left hand side so any images like a logo need to be aligned to the left.  If a computer screen is at 1024 x 800 it will only show the first 1000px.

So add a logo, a bit of text and anything else you want to add.

We need to create our own custom css file, so on your computer create a new text file and rename it to custom.css.  Dont forget to change the file extension as well so its not .txt at the end.

In the file you want to add the css reference which is below

.ms-globalbreadcrumb{
font-size:8pt;
text-align:right;
background-color:#ebf3ff;
padding:2px 10px 2px 5px;
}

This is the same as the default CSS’s used in SharePoint so we need to edit it so an image appears instead of a colour and the padding.

So as a new line we will add

background-image:url(“/_layouts/images/banner.jpg”);

And change the padding to

padding:2px 10px 79px 5px;

Save the file and open your top level SharePoint site.

Create a new document library and hide it from your Quick View Panel.

Upload the banner file and the custom.css file

We now know the URL of the banner and we need to add this to the custom.css file so it can load the correct file.

Right click on the banner image and click on Copy Shortcut.  Open the custom.css file and change the background-image URL to the location of the new banner.

Now right click on the custom.css file and click on Copy Shortcut.

Now go to Site Actions – Site Settings and click on Master Page.

Here you can specify your own css file – scroll down to the bottom of the page and select; Specify a CSS file to be used….and paste the URL of the custom.css file.

If you want to have this css file for all your subsites click on the button below

When you’ve set all these click on OK and you will see your site with a nice new banner

Technorati Tags: ,