Revised A guide to quick SharePoint 2013 branding – part 2 – with Javascript

NO DEVELOPMENT IN VISUAL STUDIO OR SHAREPOINT DESIGNER REQUIRED

This is revision 2 of the A guide to quick SharePoint 2013 branding – part 2 – with Javascript. A few of the javasnippets turned out to stop working if MDS, Minimal Download Strategy was in affect which made the branding miss the target. The lines of javacode in this revised post has been corrected and will now work just as well with MDS.
I have to send a BIG thank you to Anurag Yagnik for getting me on the right track and for verifying the functionality. THANKS!

Hi dear SharePointies and SharePoints.

Welcome to the revised part 2, the revised version has some changes and rather updating the original post, I’ll keep some history and get a new post out with slightly different content.
I assume that you have seen and followed part 1, A guide to quick SharePoint 2013 branding so I will not cover every step needed, some you will have to get from part 1.
This is for all of you SharePoint technicians and enthusiasts out there who are not developers or don’t really have time or feel like learning the new ‘Design Manager’. All of the steps here can be done using only a Windows client and appropriate permissions.

This guide has been verified in SharePoint Online. If you have done the steps in Onpremise server and/or Foundation, please drop me a comment and I will add that here and also give you credit for it.

In part 1, we added a custom masterpage, a css/stylesheet file, a favicon and a logo image. We configured SharePoint to use the custom masterpage and in that we referenced the custom css, the favicon and the logo. All good.
Now, we want to get rid of the annoying default blue ‘banner’ with the Office 365 logo(SPO), the SharePoint text (Onprem/Foundation).
Without using Visual Studio…or SharePoint Designer…

In this short guide, I will use a site located in SharePoint Online (2013/Preview, link at the end), but the steps are exactly the same in an onprem environment.

For the permanent production branding, I have to recommend using Visual Studio to create a wsp package, as long as you add the same files as I do here it will work the same. That way you will have an installable package that can be reinstalled and used in test and dev environment. You can also make sure the package works Before moving it into production.

We will in part 2, make this (pretty good):

Look like this (even better):

In my opinion, a whole lot better!
Now let’s get on with branding our site:

Use the sitecollection you used before, or simply any site collection will do. Work with the rootsite as usual.

To do what I am going to do, we need two new and one modified file:

truesec.js – New (Contains all the actual JavaScript code)
TrueSec_transparent_white.png – New (New logo, White on transparent for a nice effect)
truesec.master – Old (only modified to load the JavaScript file)

I will start by creating a simple JavaScript file, use a local folder to store your files in, we will later upload them to SharePoint.

Yes, you want to change the extension.
I added this JavaScript lines to my truesec.js file, see inline comments to see what it does

_spBodyOnLoadFunctionNames.push(“myinit”);

function myinit()
{
// This function makes sure that the script is executed after the page has completed loading
ExecuteOrDelayUntilScriptLoaded(function () {
if (typeof asyncDeltaManager != “undefined”)
asyncDeltaManager.add_endRequest(ConfigureBrandingsuite);
else ConfigureBrandingsuite();
}, “sp.js”);
}

function ConfigureBrandingsuite()
{
// Thanks to Anurag Yagnik for the enhanced script
var v_icon, v_iconbox;
var v_suiteBarLeftm, v_ribbonbox;
var v_link;
// Replace the default logo with my own shiny white with transparant background, oh-yeah!
var v_newImageSrc=”../_catalogs/masterpage/truesec/TrueSec_transparent_white.png”;

// get link reference so that we can point to our website, replace with your own
v_link = document.getElementById(“suiteBrandingLink”);
v_link.href=”https://blog.blksthl.com“;

// get icon reference so that we can change properties
v_icon = document.getElementById(“suiteBrandingIcon”);
v_iconbox = document.getElementById(“suiteBrandingIconBox”);
v_suiteBarLeft = document.getElementById(“suiteBarLeft”);
v_ribbonbox = document.getElementById(“s4-ribbonrow”);

// customize icon, icon box, background color and title
// Setting the background of the entire suitebarleft to jet-black for maximum effect
v_suiteBarLeft .style.background = “#000000”;
// v_ribbonbox.style.display=”none”;
// Setting the width to a little more than default, else the image may be cropped
v_iconbox.style.width=”200px”;
v_icon.src = v_newImageSrc;
v_icon.style.width=”150px”;
v_icon.style.left=”0″;
v_icon.style.top=”0″;
v_icon.alt=”Go to My Portal”;
v_icon.title=”Go to My Portal”;

// site specific – hide logo since we already have on on top left now
//document.getElementById(“ctl00_onetidHeadbnnr2″).style.display=”none”;

return false;
}

Make sure that your quotes and double quotes are correct, copying from a webpage often result in misformatted quotes. Avoid this by reviewing the code thoroughly in notepad. The ‘wrong’ kind usually leans to one or the other direction, whilst the ‘correct’ kind are straight. Example:

Ok, thats one out of three files, moving on to the masterpage.
This you may allready have stored locally, but if you don’t, download a copy from SharePoint. I’ll use my custom truesec.master from part 1.

In your SharePoint site collection root, select Site Settings, then ‘Web Designer Galleries/Master pages’

In the master page gallery, navigate to your custom folder, mine is named ‘TrueSec’ obviously…

Open the custom branding folder and in it, locate you master page.
Select the file in the checkbox and click on ‘Download a Copy’.

Save the file to your local folder.

Now, we will add a simple line to the masterpage, right click on the masterpage and select edit in notepad.

Locate the following SharePoint:Scriptlinks:

After the line:
<SharePoint:ScriptLink language=”javascript” name=”suitelinks.js” OnDemand=”true” runat=”server” Localizable=”false” />

Add:
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server” Defer=”False” Name=”~siteCollection/_catalogs/masterpage/TrueSec/truesec.js”></SharePoint:ScriptLink>

Make sure that your quotes and double quotes are correct, copying from a webpage often result in misformatted quotes.
Avoid this by reviewing the code thoroughly in notepad. The ‘wrong’ kind usually leans to one or the other direction, whilst the ‘correct’ kind are straight.
Example:

With the code added, that part of the masterpage will now look like this:

<SharePoint:ScriptLink language=”javascript” name=”sharing.js” OnDemand=”true” runat=”server” Localizable=”false” />
<SharePoint:ScriptLink language=”javascript” name=”suitelinks.js” OnDemand=”true” runat=”server” Localizable=”false” />

<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server” Defer=”False” Name=”~siteCollection/_catalogs/masterpage/TrueSec/truesec.js”></SharePoint:ScriptLink>

<SharePoint:CustomJSUrl runat=”server” /> <SharePoint:SoapDiscoveryLink runat=”server” />

or:

Save the file and leave it for now. We will upload all the files later.

So, two out of three done.
Time for the simplest one, the image. I wanted to add something a bit different than the logo I have already added, so I went with a logo in white on black instead of black on white. The image file is White on transparent and then the java script sets the background to jet-black which makes it all perfect. You use the images you want and for your customer/company/organization and make the decisions based on the colors you have there, I bet it will be beautiful!

Ok, if you started out like I did with the ‘light branding’ already in Place, then you are pretty much done, all we need to do is upload the files and reload the page to see the result. Go to your site, open ‘Site settings’, ‘Master page’, browse to your folder, in my case its ‘/TrueSec’. Once here, select the ‘Files’ tab and ‘Upload Document’.

Now, if you already had the custom master selected in the site, it will load automatically with the JavaScript and all. Load the site in a browser to see the result:

If any of the branding does not show up, one good T-shooting step is to go to the MasterPage gallery again and the ‘truesec’ folder. In here, click on the dropdown for each file and make sure they are all published, if you get the option to ‘Publish a major version’ do it. That helps a lot of times when anything is wrong.
If anything is so wrong so that you can’t access any of the sites, use this link: [URL to your team site]/_layouts/15/ChangeSiteMasterPage.aspx, it will allow you to switch back to the ‘Seattle master’ and get access to the libraries and settings again. Make Changes, fix the problem, upload the new file and switch back to your custom master again to test.

Where to go from here?
In addition to the objects I have modified using java, there are several you can figure out how to configure for yourselves. If you want to find the objects, you can use F12 – Developer Toolbar that is built into IE.
Or, use any of these that are part of the 2013 default objects:
suiteBarLeft
suiteBarRight
suiteBrandingBox
DeltaSuiteLinks
suiteBarRight
RibbonContainer-TabRowRight

All og these have different properties to be configured, google, test, play around and find out what can be done.

References:

SharePoint 2013 Execute Javascript function after MDS load
http://blog.symprogress.com/2013/09/sharepoint-2013-execute-javascript-function-after-mds-load/

SharePoint 2013 Top links – Name, ID and How to Hide them (Excellent post on the objects and a start, how to hide them completely)
http://www.tuyrcorp.com/sharepoint-2013-top-links-name-id-and-how-to-hide-them/

A great place to learn html and css
http://www.w3schools.com/

Great overall branding blogger
http://blog.drisgill.com/

Map a network drive to the SharePoint 2013 Master Page Gallery
http://msdn.microsoft.com/en-us/library/jj733519.aspx

How to: Convert an HTML file into a master page in SharePoint Server 2013
http://msdn.microsoft.com/en-us/library/jj822370.aspx

Starter Master Pages for SharePoint 2013 (more advanced branding)
http://startermasterpages.codeplex.com/

Office 365 Preview
http://www.microsoft.com/office/preview/en/office-365-enterprise

___________________________________________________________________________________________________

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

A guide to quick SharePoint 2013 branding – part 2 – with Javascript

A new revised version of this post is available, please go to:
‘
Revised A guide to quick SharePoint 2013 branding – part 2 – with Javascript

‘

NO DEVELOPMENT IN VISUAL STUDIO OR SHAREPOINT DESIGNER REQUIRED

Hi dear SharePointies and SharePoints.

Welcome to part 2, I assume that you have seen and followed part 1, A guide to quick SharePoint 2013 branding so I will not cover every step needed, some you will have to get from part 1.
This is for all of you SharePoint technicians and enthusiasts out there who are not developers or don’t really have time or feel like learning the new ‘Design Manager’. All of the steps here can be done using only a Windows client and appropriate permissions.

This guide has been verified in SharePoint Online. If you have done the steps in Onpremise server and/or Foundation, please drop me a comment and I will add that here and also give you credit for it.

In this short guide, I will use a site located in SharePoint Online (2013/Preview, link at the end), but the steps are exactly the same in an onprem environment.

We will in part 2, make this (pretty good):

Look like this (even better):

In my opinion, a whole lot better!
Now let’s get on with branding our site:

Use the sitecollection you used before, or simply any site collection will do. Work with the rootsite as usual.

To do what I am going to do, we need two new and one modified file:

I will start by creating a simple JavaScript file, use a local folder to store your files in, we will later upload them to SharePoint.

Yes, you want to change the extension.
I added this JavaScript lines to my truesec.js file, see inline comments to see what it does

_spBodyOnLoadFunctionNames.push(“ConfigureBrandingsuite”);

function ConfigureBrandingsuite()
{
<!– Replace the default logo with my own shiny white with transparant background, oh-yeah! –>
document.getElementById(‘suiteBrandingIcon’).src = “/_catalogs/masterpage/truesec/TrueSec_transparent_white.png”;

<!– Setting the width to a little more than default, else the image may be cropped –>
document.getElementById(‘suiteBrandingIcon’).style.width=”155px”;

<!– Set the background of the entire suitebarleft to jet-black for maximum effect! –>
document.getElementById(‘suiteBarLeft’).style.background = ‘#000000’;
}

In your SharePoint site collection root, select Site Settings, then ‘Web Designer Galleries/Master pages’

In the master page gallery, navigate to your custom folder, mine is named ‘TrueSec’ obviously…

Open the custom branding folder and in it, locate you master page.
Select the file in the checkbox and click on ‘Download a Copy’.

Save the file to your local folder.

Now, we will add a simple line to the masterpage, right click on the masterpage and select edit in notepad.

Locate the following SharePoint:Scriptlinks:

After the line:
<SharePoint:ScriptLink language=”javascript” name=”suitelinks.js” OnDemand=”true” runat=”server” Localizable=”false” />

Add:
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server” Defer=”False” Name=”~siteCollection/_catalogs/masterpage/TrueSec/truesec.js”></SharePoint:ScriptLink>

Make sure that your quotes and double quotes are correct, copying from a webpage often result in misformatted quotes.
Avoid this by reviewing the code thoroughly in notepad. The ‘wrong’ kind usually leans to one or the other direction, whilst the ‘correct’ kind are straight.
Example:

With the code added, that part of the masterpage will now look like this:

<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server” Defer=”False” Name=”~siteCollection/_catalogs/masterpage/TrueSec/truesec.js”></SharePoint:ScriptLink>

<SharePoint:CustomJSUrl runat=”server” /> <SharePoint:SoapDiscoveryLink runat=”server” />

or:

Save the file and leave it for now. We will upload all the files later.

Now, if you already had the custom master selected in the site, it will load automatically with the JavaScript and all. Load the site in a browser to see the result:

All og these have different properties to be configured, google, test, play around and find out what can be done.

References:

A great place to learn html and css
http://www.w3schools.com/

Great overall branding blogger
http://blog.drisgill.com/

Map a network drive to the SharePoint 2013 Master Page Gallery
http://msdn.microsoft.com/en-us/library/jj733519.aspx

How to: Convert an HTML file into a master page in SharePoint Server 2013
http://msdn.microsoft.com/en-us/library/jj822370.aspx

Starter Master Pages for SharePoint 2013 (more advanced branding)
http://startermasterpages.codeplex.com/

Office 365 Preview
http://www.microsoft.com/office/preview/en/office-365-enterprise

___________________________________________________________________________________________________

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

A guide to quick SharePoint 2013 branding

NO DEVELOPMENT IN VISUAL STUDIO OR SHAREPOINT DESIGNER REQUIRED

Hi dear SharePointies and SharePoints.

This will be a Quick way to get a familiar touch applied to your teamsites (and other sites as well)
(See also part two: A guide to quick SharePoint 2013 branding – part 2 – with Javascript)

This guide has been verified in SharePoint Foundation 2013 as well as Server and Online, BIG thanks to Chuck Snyder and others for verifying functionality in SharePoint Foundation 2013.

Some of you may already have tried some of the branding features built into SharePoint 2013 and SharePoint Online (2013), Microsoft have added some functionality that makes it easier for some and harder for some. I had branding in 2010 pretty much figured out and now to me it seems like they have given the box a good shake, everything is almost in the same place as before…but not quite…
I have noticed that most of the branding info that is out, most blogs and presentations have been about branding a publishing site, meaning an external website or intranet portal or similar, sites meant to be branded and customized. In this guide I will fokus on the teamsite, probably the most used site of them all…

I will show you step by step how to access some of the basics in branding your sites, no development yet…the tools needed for this exercise, is notepad.exe…that’s it…

In this short guide, I will use a site located in SharePoint Online (2013/Preview, link at the end), but the steps are exactly the same in an onprem environment.

We will make this:

Look like this:

Now let’s get on with it:

Create a new site collection and work with the rootsite.

Having a brand-new unbranded, untouched team site, I will start by getting the files to start working with, we need a new MasterPage (.master) and a new StyleSheet (.css).
In the top right corner, click on the little cogwheel/gearwheel.

Then click on ‘Site settings’ in the dropdown.

Site Settings offers a lot of choices, we are only going to be using a few.

The branding features of SharePoint are mainly located in the ‘Web Designer Galleries’ and the ‘Look and Feel’ sections of site settings.

In Web Designer Galleries section, click on Master pages

In here we will store the files we need, to make it a bit more structured, we will create a dedicated folder for our efforts only, I’ll call mine TrueSec.
In the ribbon section, click on the tab called FILES, then ‘New Folder’.

Type in the name and hit ‘Save’

The folders and files are in alphabetical order, so in my case using truesec, I have to go to the next page. Use the arrow at the bottom.

Ok, now we have a place to put our files, next, we download a copy of the default masterpage beeing used in a SharePoint 2013 team site, ‘Seattle.master’

Use the dropdown menu on the file

In the IE download bar, select the dropdown arrow and select ‘Save as’.

Save the file in a suitable location, I put mine in a folder on the desktop. Leave the filename as is.

Select ‘Open folder’

Next, we make a copy of the seattle.master and rename it to what we want. I’m going with truesec.master

Ok, now we have a local copy of the default masterpage called truesec.master. It is at this point still identical to the default and we’ll leave it that way for now.
Now, we get a copy of the default stylesheet used in the seattle.master, called core15.css.
Go back to the browser with your site and masterpage gallery, click on the SharePoint logo.

Now, we are back in the root team site and its homepage, from here it is a simple task to download the stylesheet, since it is not located in the masterpage gallery, I’ll use a different method to get it.
In your Internet Explorer browser, click on F12, this will bring up the F12-Developer toolbar, a great built in tool.

Click on the tab named ‘CSS’

Make sure that the path is selected, that points to the core15.css file

Then on the little ‘Save’ button

This method may result in a slightly ‘off’ css file (missing navigation in one occation), the reason is that the developer dashbord will save a rendered css file instead of the actual file.
In order to avoid any risk for that, type in the full path to the actual corev15.css file, then save it to disk.

Place the file in the same folder locally on your computer as the seattle.master/truesec.master.

Same as before, make a copy and then rename it to truesec.css

A slightly more difficult but better way, is to create a new blank text file and rename it to ‘truesec.css’, then, add to this file only the ID’s and Classes that you want to style.
Adding only the classes/ID’s you want to edit the styles for, will save bandwidth and improve performance as well as keep the css file manageble.
Example, say that you want to style the Page Title with a new font-size and color, add only this to the empty text file:
.ms-core-pageTitle
{
font-size:30pt;
color:rgb(255, 127, 39); /* blksthl orange */
}

(read the core15.css to get an idea of how it is built)

Ok, now we have both the files needed to make the changes to the branding, but we do need two more things to make the branding a bit more interesting. Logos, I’ll show you how to replace the default logo (the big one) and the favicon (the smaller ones), the little thing in the address bar that is actually used for a few things and will affect the braded feel of the site pretty much.

I’m adding the files to my local folder to make it simple and keep it all in one place.

If you don’t already have a favicon for your organization, you can use any one of the free image to favicon sites available to create one from a image. I have used several and for example this works: http://favicon.htmlkit.com/favicon/.
This tool will also let you select the formats you want.

I have in my example a favicon file of dimension 32×32 with a color depth of 32. 16×16 works just as well.

The original ‘SharePoint‘ logo is 180×64 and as long as you stay close to that, the design will be ok.

Now, we will edit the files and add the simple magic lines….

First, we want to load out custom StyleSheet, it’s not custom yet, but loading it will allow you to make modifications to it later. So, open up the copy of the master file, in my case the file named truesec.master
(Notice the filepaths, all pointing to the masterpage gallery catalog and our truesec folder)

Attention! If you copy and paste from the code below, you may have to replace the quotes and double-quotes with your own, do a replace in notepad. I have tried to replace them in the code samples but be aware.
The quotes if copied here is for some reason of a different format and will cause the code to fail if used as-is. Usually you will see that you get a left and right version of the quotes, they do not work. See example:

(This may differ depending on what text editor you are using)

Locate the line:
(Use Notepad find and search for ‘corev15’)
<SharePoint:CssRegistration Name=”Themable/corev15.css” runat=”server”/>

Add directly below it as one line:
<SharePoint:CssRegistration name=”/_catalogs/masterpage/truesec/truesec.css” After=”corev15.css” runat=”server”/>

That will make:

Next we add our custom favicon, locate the line:
(Use Notepad find and search for ‘favicon’)
<SharePoint:SPShortcutIcon runat=”server” IconUrl=”/_layouts/15/images/favicon.ico?rev=23″ />

Change it to:
<SharePoint:SPShortcutIcon runat=”server” IconUrl=”/_catalogs/masterpage/truesec/favicon.ico” />

Next and last, we add the actual logo, locate the line below:
(Use Notepad find and search for ‘LogoImage’)

<SharePoint:SiteLogoImage CssClass=”ms-siteicon-img” name=”onetidHeadbnnr0″ id=”onetidHeadbnnr2″ LogoImageUrl=”/_layouts/15/images/siteIcon.png?rev=23″ runat=”server”/>

Edit or replace it to look like this:

<SharePoint:SiteLogoImage CssClass=”ms-siteicon-img” name=”onetidHeadbnnr0″ id=”onetidHeadbnnr2″ LogoImageUrl=”/_catalogs/masterpage/truesec/trueseclogo.png” runat=”server”/>
( Update: Added missing endtag /> )

There, the files are edited and if we upload and use these, we will have the logo and the favicon used in our site. We will at this point not touch the css.

Warning! Make sure that you do not make any mistakes editing the masterpage, if you accidentally remove something you could end up with a site that is inaccessible, if you do, SharePoint designer can be used to correct the masterpage again

(If you don’t plan to edit the css in the future, you can either skip loading it or at least clear the file of content, making it empty and quick to load.)

Upload the files in your local folder from the masterpage gallery, cogwheel, ‘Site settings’, ‘Master pages’. Browse to your folder, my ‘truesec’ folder.

In the upload dialog, browse to your files, add a comment if you like but make sure that the destination folder points to your folder (relative path).

In the second dialog, make sure that you for the masterpage, select ASP.NET Master Page, like in the picture below, for the other files including the css, select Content type ‘Design file’

Ok, files uploaded, all ready to use…almost.
I have found that the master needs to be published as a major version before being accessible from the gui. Click on the dropdown arrow, then ‘Publish a Major Version’.

Apparently, if the publishing site feature hasn’t been activated, the ‘Publish as a Major Version’ is missing, the workaround then is to check the file out, then check it back in and select major version.

Now, we need to change the masterpage that is used…this is actually a part of the publishing features, but if you don’t have the site collection publishing feature and the site publishing feature activated, try using this direct link instead:

[URL to your team site]/_layouts/15/ChangeSiteMasterPage.aspx

The ‘Site Setting – Site Master Page Setting’ dialog seems to only be available if the site Collection feature, ‘SharePoint Server Publishing Feature’, has once been enabled. Try it, I enabled it, accessed the page, then disabled it again and I could still access it. (I don’t Think that is by design.)
Sometimes there is an error when clicking ok but the masterpage was still updated…this in onprem as well as online.

For me it looks like:

Now, we change the masterpage used from this:

To this:

Click on OK in the bottom right corner.

Done, TADA!

(The green background comes from Windows 8s adaptive coloring based on the background image, my background Changes on a Schedule so IE will look different all the time)
If you also pin the Internet Explorer tab to the taskbar, you will also have it look like this:

Nice huh?
Try to make some light changes to the css file as well, start out small. Use F12 Developer Toolbar and the arrow function to point to an object and find out what styles are applied and from what id/class they are coming.
It’s easy:

Press F12, then use the arrow

Click on an object, like the site title

In the styles list you will now be able to find what gives the title its color and size:

.ms-core-pageTitle, .ms-corepageTitle a
and
.ms-core-pageTitle

Locate them in the local css, upload it and overwrite the old, reload the page, VOILA!

To continue, follow the next part of this SharePoint 2013 branding guide:
A guide to quick SharePoint 2013 branding – part 2 – with Javascript

This will allow you to use java to set the color and image of the top ‘chrome’. Even the Little buttons and toggles to the right. You will own them all.

References:

A great place to learn html and css
http://www.w3schools.com/

Great overall branding blogger
http://blog.drisgill.com/

Map a network drive to the SharePoint 2013 Master Page Gallery
http://msdn.microsoft.com/en-us/library/jj733519.aspx

How to: Convert an HTML file into a master page in SharePoint Server 2013
http://msdn.microsoft.com/en-us/library/jj822370.aspx

Starter Master Pages for SharePoint 2013 (more advanced branding)
http://startermasterpages.codeplex.com/

Office 365 Preview
http://www.microsoft.com/office/preview/en/office-365-enterprise

___________________________________________________________________________________________________

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

Merry Christmas and a Happy New Year

Merry Christmas

–

and a

–

Happy New Year

–

________________________________________________________________________________________________________________

With wishes for a great SharePoint year to come!

Regards

Twitter | Technet Profile | LinkedIn

BLKSTHL gets a well-deserved facelift

Hi all

I felt that it was time to give the blog a facelift, the built-in theme was nice but it had drawbacks such as the width that for some reason are to narrow on all of the offered out of box themes. This design is somewhat SharePoint 2013 inspired and is easier to read and has more horizontal space…finally. No more cropped code segments…
My hope is that you will find it better in every way. If the theme is anything you like, feel free to ask for it and you shall recieve the CSS file.

And yes, just to remind myself what I had Before, this is what it looked like:

_________________________________________________________

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

SPB usage guide – 2 Configuration and Modification

This is the guide on how to install and use the SharePoint Branding Project.
Download: Visual Studio gallery

The guide is devided into three parts:

1 Download and Installation

2 Configuration and Modification

3 Deployment and verification (soon to be released)

In part 1 of this guide, we left off at the new project dialog:

In the categories, select C#, SharePoint, 2010 and SharePoint 2010 Branding Project.
Name the project(This name will also be the name of the SharePoint Feature), select its file location and Click OK.

Clicking on OK will create a new project for you in Visual Studio, the project will be a complete branding solution ready to deploy or package and install to a SharePoint 2010 farm or even an Office 365/SharePoint online tenant.

The first thing that you will see is the SharePointBrandingProject in the solution explorer:

The solution will by default have a number of components and functionalities.

Custom SPB Masterpages for:
Team sites MyBranding.master, equivalent to the general V4.master.
Meeting Workspaces MyBrandingMWS.master, equivalent to the general MWSDefaultV4.master.
Team sites MyBrandingMinimal.master, equivalent to the minimal.master.

Custom SPB StyleSheets:
MyStyles.css, Contains styles for basic look and feel for most sites and is used in all masterpages.
MyStylesMinimal.css, This is an additional stylesheet loaded and used when the MyBrandingMinimal.master is loaded.

Custom logo:
logo.png
Custom Favicon:
favicon.ico

Custom Eventreciever:
ChildSiteInit, This handles the web provisioned event to apply branding on new subsites.

Custom Feature:
Main, This feature applies the branding to the rootsite and all subsites.

In order to deploy this solution directly from Visual Studio to your test site, enter the url of you site collection in the project properties:

Now you are ready to deploy the solution to SharePoint with the default branding. The default branding is good looking and all that, but perhaps you want to make a few changes first? I would however recommend that you try the deployment so that you can verify that everything really works and that you have the permissions needed and so on. After successful trial deploy and complete awe for the good looking SHarePoint you made for yourself, it is time to start changing the branding.

First thing you will want to do, is replace the logo and favicon(if you did not know this, the favicon is the small tiny image that is located to very left in the address field in your Internet Explorer browser(I guess FF and others too). The favicon is loacated in Solution Explorer in the Images folder under the Style Library/My Branding/Images/
You can replace this file with a new favicon using the same name, but it must have the same properties: 32×32, a 24bit bmp .ico file. There are applications that are made just for the purpose of creating icons available. Or there is a plugin to PhotoShop available if you have access to PhotoShop (ICO (Windows icon) plugin). You can also edit the icon right here in Visual Studio but that is probably not for the thorrow artists…

Same story with the logo, it does not have the same rigorous restrictions on the size and type, but it should be close to what is the default size, use a too big or small image and you will have to make adjustments to the master/Stylesheets to compensate.
The logo can be edited in Visual Studio but that is not something that you do, use a proper image editing application, or simply adjust you current company/Organization/Customer logo to fit. I will now show you how you replace the default logo file with your own custom logo:

The current logo, logo.png – 120×120.
Delete the default logo by right clicking on the imagefile in the solution explorer and Click Delete:

Click OK in the confirmation dialog:

Now the logo file is deleted and we have to replace it with our new custom logo file. For simplicity, use a PNG file if you have one (if you don’t, use another file but then you will HAVE to edit the feature that adds the logo to the site).
To add the image, Right Click on the Images flder in solution explorer, then select Existing Item and Add:

Browse to your logo file in the explorer window, it can be located locally, or on a fileshare somewhere. Select the file and Click Add:

Now the imagefile is added, in my case I have found a wonderful logo from back in the days, when SharePoint 2001 was the talk of the town. SharePoint Portal Server 2001 had a pretty mean logo, this is what I’ll be using in my demo. See this guide part 3 for a presentation of that logo in action.

For the branding project to recognize the image as the logo, it will have to be renamed to logo.png (unless you used another fileformat or if you want to edit the feature to fit anyway).
Right Click on the Image in the Solution explorer window and select Rename.

Beautiful! The solution is again ready to be deployed:

Before we deploy the solution, I want to just quickly show you the basics of how you edit the real source of the branding solution, the master pages and the stylesheets. What you do is that you in Solution explorer, Double Click on the master or stylesheet you want to edit or look at. Try that and you will see something like this for the master:

And this if you Double Click on a StyleSheet(css)…
Did you know that CSS actually stands for Cascading Style Sheets, Cascading comes from the order in which they are applied, the classes in the last css to be applied overruns the previous even if they contain the same classes.

Now we are ready to deploy. So, how do we do that? From Visual Studio, you simply do it in a few Clicks, or really, its just two Clicks away.
Right Click on the Project in Solution explorer, Click Deploy.

Verify that the deployment went ok:

In my case, it did! Happy happy! Over to the browser and verify the new look and feel, go to the site, if allready there, refresh the page.

This is what my site looks like with that beautiful replaced retro logo, don’t you just love it?

In the next section of this guide, I will show you what the branding does and what you will see in the browser ‘onsite’.
The next part is called:

3 Configuration and Modification (soon to be released)

SPB usage guide – 1 Download and Installation

This is the guide on how to install and use the SharePoint Branding Project.
Download: Visual Studio gallery

The guide is devided into three parts:

1 Download and Installation

2 Configuration and Modification

3 Deployment and verification (soon to be released)

Hi friends.

Allow me to welcome you on a journey to the wonderful world of SharePoint Branding. I created this SharePoint Branding Project thinking that the overhead and the learning curve to just get started with branding, was way too high. The amount of blogs to read and discard until you could actually build you very first, very basic custom branding solution, it was rediculous! Now pretty recently, the guides on Technet have been improved and most of them actually work, but it is still a long way to go if you want to start from scratch with little or no knowledge about how you go about creating such a project in Visual Studio.
With the SharePoint Branding Project, you can brand your company, organization or customer SharePoint in about 10 minutes, and you will have full control doing so. Follow this guide and you will cruise all the way to the finnish line.
To use this template, you need a SharePoint 2010 and Visual Studio on the same machine. If you can follow instructions, then you can achieve this.
Now, lets get started and have some fun, this IS fun after all!

There are two ways to download the extension file from the Visual Studio Gallery, the first is to simply go to the Visual Studio gallery, Click SPB.
Then on the large purple button, Click Download.

In the annoying but useful IE download bar, Click Open.

Click ‘Install’ to install the extension into Visual Studio.

When the extension is installed you will get a ‘Complete’ notice. Click Close in the dialog.

You are now done downloading and Installing the actual extension and you can now move on to the interesting stuff, to create a SharePoint Branding Project in Visual Studio.
But before we go into how, we will show you another way to install the extension. From Visual Studio Extension Manager. The extension manager will show the installed extension regarless of the way you installed it, here you will also be notified of updates that have been released of the same extension.
Follow these steps from Visual Studio:

Start the Extension Manager from Visual Studio, Tools menu, Click Extension Manager…

Click Online Gallery and search for SPB or browse the ‘Templates’ category and ‘SharePoint’ and you will find the SPB extension.
Click Download and the file will download and initiate the installation. Click Install in the next dialog:

When the extesion have been installed, you can’t wait to get going with the branding right. Ok, we will start that part, regardless of the way you choose to perform the download and installation, and the installation (Which is very quick) has completed, in Visual Studio, select File, New and Click Project:

In the Installed Templates section, select Visual C#, SharePoint, 2010 and SharePoint 2010 Branding Project.
Name the project (This name will also be the name of the SharePoint Feature once deployed to SharePoint), select the projects file location and Click OK.

Now you are done with the installation and can move on to the next step in this guide:

2 Configuration and Modification

or jump directly to the last step, not recommended:

3 Deployment and verification(soon to be released)

Stay tuned!

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

A guide to Branding and SharePoint Foundation part 2

A guide to Branding and SharePoint Foundation
Part 2

Part 1 | Part 2 |

This is the part two of the series trying to cover the tweaks needed to get a starter branding going on a SharePoint Foundation installation.

In part 1 I tried to explain why the most common method of using the $PUrl to get the relative path does not work and also how to customize the masterpage in order to insert a custom favicon without the use of $SPUrl. Now I will cover how to add a custom CSS to your master without the use of $SPUrl.

The most common method on a SharePoint server is to add this line:

<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/My Branding/MyStyles.css %>”After=”corev4.css” runat=”server” />

After the default CSS loader:

<SharePoint:CssLink runat=”server” Version=”4″/>

But since the use of $SPUrl is unavailable to us, we need to find something else. If we use a hardcoded path it will work as long as the master is deployed only in the site collection root, but if we want to use the same master in all subsites(spwebs) as well, then we need a way to get the relative path from the sitecollection root. In my SharePoint Branding Project Foundation adaptation I solved it like this:

<asp:literal runat=”server” Text=”<link href='”/>
<SharePoint:ProjectProperty Property=”SiteUrl” runat=”server” />
<asp:literal runat=”server” Text=”/Style Library/My Branding/MyStyles.css’ rel=’stylesheet’ type=’text/css’/>”/>

What the code does is that it builds a new href link that point to the custom css deployed to the site collection style library, same as the <SharePoint:CssRegistration would, it renders a link and loads the css. If we want the custom css to be applied after the default, then we also need to add these lines before the default css line.
The trick to this is the use of the webcontrol SharePoint:ProjectProperty that is available for use in Foundation as well as Server. This will give you the URL to the Site Collection root, for example:

http://www.mycompany.com/sites/finance

Putting two literal contols before and after the webcontrol to fill in the text needed for a complete link tag is all that is needed.

This solution works very well for me, I hope that you will also find some help in my suggestion.

See also part 1, on how to add a custom favicon to your Foundation master

Stay tuned!

Regards

A guide to Branding and SharePoint Foundation part 1

A guide to Branding and SharePoint Foundation
Part 1

Part 1 | Part 2 |

SharePoint branding is something that most everyone wants to do, the default design is pretty good and stylish but it get dull and it does not fit in with any organizations brand book or design policy. A lot of posts have been written on the subject of SharePoint branding, many books have been published and most of what can be covered has been covered. What I found though during my work with the SharePoint Branding Project, is that there is a lack of information about branding and Foundation. Lots of organizations run Foundation, the reasons for doing so are many but the facts remains, SharePoint Foundation 2010 has a very large installed base. So, can’t we just buy the book on SharePoint branding and implement it in our Foundation farm? The answer to that question is most of the time no, or rather, not very likely. SharePoint Server has one vital component that Foundation lacks, it has a publishing infrastructure feature. In most cases the publishing components are used for some vital parts of a branding package, the most common one that you will see in almost every post is the

<% $SPUrl:~sitecollection/pathtosomething/%>

The SPUrl token is very handy when storing files in a centralized location in SharePoint, like for example the ‘sites/mycompany/style library/’. Lets use the FavIcon as an example in the first part.

This tag would in Server farm pick the FavIcon image out from the site collection root. In Foundation you would see an error similar to this:

‘The expression prefix ‘SPUrl’ was not recognized. Please correct the prefix or register the prefix in the <expressionBuilders> section of configuration.’

Accessing CSS or Image files in the Style Library is easy using the $SPUrl expression builder to get the relative Site Collection Root URL(/sites/mycompany) or even the current Web Root URL. In Foundation the SPUrl token can’t be used so we need something else. One solution is pretty easy, just enter the relative path:

For the Site Collection Root the path would resolve to:

http://webapplication/sites/mycompany/Style Library/My Branding/Images/favicon.ico

Perfectly allright, the favicon would be loaded. This is a great solution, with one huge flaw. If you have the branding implemented in all of your subsites then the path will be correct only in the root. Since the path is relative, it would in an example subsite look like this in the master:

For my SubDivision subsite the path would resolve to:

http://webapplication/sites/mycompany/subdivision/Style Library/My Branding/Images/favicon.ico

Not ok! The load would fail since the favicon.ico is not located there. So, the permanent relative is only good for a site collection root with no subsites. You could obviously add the file to every subsite so that the path would work, but that is not really an option in most cases. So, how do we do it then…? In my own SharePoint branding project I use this workaround to replace the <link rel=’shortcut icon’ token:

<asp:literal runat=”server” Text=”<link rel=’shortcut icon’ href='”/>
<SharePoint:ProjectProperty Property=”SiteUrl” runat=”server” />
<asp:literal runat=”server” Text=”/style library/my branding/images/favicon.ico’/>”/>

It is a workaround, but it works. This will in reality build a relative path to the Site Collection Root even in the subsites and it will build up the <link> token by using 2 literal asp controls and the SharePoint:ProjectProperty control that is available in Foundation. The result in runtime will be the same as for a URL built on the $SPUrl expression builder.

Add this to your Masterpage and you will have a functional FavIcon that uses a relative path.

Stay tuned!

Best regards