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 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(“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’;
}
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>
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:
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 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
I tried it for onpremise, it is not working any idea why?
Hi.
I’ll get back to you on this.
// Thomas
Do you have anything like this on modifying the vertical navigation snippet?
Hi Mike.
The vertical/current nav can for the most part be styldd using the css style sheet. Use F12 to find your classes, the. Style them, most can be done this way. As long as you don’t need to use images more or less…
Good luck
// Thomas
Hands down the best tutorial I’ve seen on Sharepoint branding. I hope you publish more.
I am a huge fan of your branding series for SP. I just got into using sharepoint and find your guides useful for people like myself. Please publish more!
John.
Hello, I was able to complete the first part just fine but in the 2nd part – my Javascript code doesn’t work because the document.getElementById(“suiteBrandingIcon”) returns null and it seems to make sense because the office 365 logo isn’t even visible until the ConfigureBrandingsuite function is exited. So, it seems like my function gets executed *before* the function that sets the office logo. Any advice on how to proceed?
Hi Anurag
.
No, I never got that problem myself while building the guide, not sure why. Today when I try to do the same thing again, I get the same issue as you see.
If you would try the answer no 1 in this link, see if any of the second or third options help?
http://stackoverflow.com/questions/16936250/sharepoint-2013-add-javascript-after-whole-page-load
I would highly appreciate getting back to me with the results, I will then update the post and give you credit 🙂
Regards
// Thomas
On second thought and a bit more investigation, this looks more promising, the second option was what I used allready by the way…
Check this out. MDS could be the culprit:
http://blog.symprogress.com/2013/09/sharepoint-2013-execute-javascript-function-after-mds-load/
(Again, feedback on your progress highly appriciated)
Regards
// Thomas
Hello Thomas,
Yes, MDS was the issue. Using the ExecuteOrDelayUntilScriptLoaded method solved the problem. However, I had to use ‘sp.js’ instead of ‘start.js’ as that file didn’t seem to exist for me.
Thanks for this post and your instant support!
Also wondering if there is a way to configure the top banner specifically for all apps in the office 365 suite – like outlook, sites, calendar and so on. Probably not as those are not sharepoint sites.
Great! Would you mind leaving me the lines you used? I’m trying to save time and if you have a working solution already?
I will then repro the new solution and update the post with the new code. Or maybe even add a new post…
Thanks for your feedback, I would not have considered that angle if you had not asked from the beginning.
Best regards
// Thomas
Here are the lines. Still working on finalizing but it gets one pointed in the right direction.
_spBodyOnLoadFunctionNames.push(“myinit”);
function myinit()
{
ExecuteOrDelayUntilScriptLoaded(function () {
if (typeof asyncDeltaManager != “undefined”)
asyncDeltaManager.add_endRequest(ConfigureBrandingsuite);
else ConfigureBrandingsuite();
}, “sp.js”);
}
function ConfigureBrandingsuite()
{
var v_icon, v_iconbox;
var v_suiteBarLeftm, v_ribbonbox;
var v_link;
var v_newImageSrc=”/_catalogs/masterpage/mysite/mylogo.png”;
// get link reference so that we can point to our website
v_link = document.getElementById(“suiteBrandingLink”);
v_link.href=”https://my.sharepoint.com/Portal2/SitePages/Home.aspx”;
// 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
v_suiteBarLeft .style.background = “#005288″;
v_ribbonbox.style.display=”none”;
v_iconbox.style.width=”150px”;
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”;
v_icon.src = v_newImageSrc;
// site specific – hide logo since we already have on on top left now
document.getElementById(“ctl00_onetidHeadbnnr2″).style.display=”none”;
return false;
}
Really, huge thanks for sharing! I back on track again 🙂
I’ll update the post or get a new revised version out soon. You’ll be in it.
Regards
// Thomas
Anurag.
Check this: http://wp.me/p1EuNv-Fc
Let me know if you have a blog you want me to add a reference to.
Regards // Thomas