| 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.
| 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 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. (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
blksthl 
Thanks a million times. I’ve been searching the internet for how to brand Foundation 2013, and this is the only thing I’ve found. Everyone is branding the full version, which is no help at all.
And, yes, your description of how to do it is spot on. Didn’t find any problems. Now I can make the boss happy and get our site to look like he wants it to.
Again many thanks.
Chuck
Thanks Chuck!!
Appriciate the feedback, I will update the post to reflect that, with creds to you.
Will also add a note on the quotes, you are correct, I have experienced that before myself.
Let me know if you have any other issues like this that you can’t find a good guide to.
Thanks again.
Regards // Thomas
Added a note regarding the quotes as well, thanks for bringing that to my attention and saving everyone a lot of time and trouble!
// Thomas
I did find one problem and took a little to realize what the problem was. When copying your HTML and pasting, the quotes have to be changed. they are not the standard quotes.
I did find one other problem. We are using the “Office” style as the starter point for branding our sharepoint site. If I take the CSS file as above and attach it to the master page, we lose the vertical menu bar on the left for some reason.
What works for us is to take a blank css page, use the developer tool to identify sections to style, and add just that css to the file. Makes a much simpler file to work with, and everything seems to work better.
Hi.
Definitely a good point, that is what I do myself, this also improves performance as you do not have to load the entire core15.css every time. But for the beginner, to copy the entire file is the easiest way to keep the css working I Think, but I’ll add a note as it is good advice.
Regards
// Thomas
Hi, This has worked for the Site Pages but has brocken the publishing pages in the Pages library. I have not made any changes to the CSS. I am getting an error message – File not found.
Hi.
Sorry about that.
Everything in the master has to be exactly right, else it may break and then you can access nothing worst case, not even to switch back.
If so, use SPD to change the master back to the default Seattle.master.
Regards
Check especially the paths in the custom master, thats usually where the issue is.
Regards // Thomas
To test I have simply taken a copy of the Seattle.master, renamed it, uploaded it and published it with no changes at all but this still breaks the publishing pages. I’ll let you know if I find the issue. Thanks
Did you put it in the same location or in a subfolder like in my guide?
Perhaps the relative links in the master should be updated?
If you really did like you say and made no Changes and put it in the same location as Seattle.master…it will work. Something has to be different.
Regards // Thomas
OK, having redone the steps several times I have found that if you open the masterpage in SPD2013 and save it without making any changes it breaks something. If you edit in Note Pad then it seems to work fine. Thanks
🙂
Its probably the same as opening a html file with Word, all kinds of stuff is added…it will never be the same.
But it is good info, I’ll add a note about it.
If yopu could just verify that SPD is the culprit?
Regards
Best guide ever on how to modify a sharepoint 2013 master page. I’ve been looking for hours on how to do this, you’re the man! Keep up the good work.
Thanks Greg!
I’m having 2 problems now:
1. When I try to “Publish major version” the option is not displaying on the dropdown menu.
2. I cannot access to “[my team site]/_layouts/15/ChangeSiteMasterPage.aspx” I get the error “Sorry, something went wrong – An unexpected error has occurred.” I tried choosing the master page through SP Designer, would it be the same?
Any help please? Thanks!
Greg, turn on the publishinig feature on the site then you will be able to publish major version.
Brian
Hi,
Thank you for the post! It helps me a lot.
I met a problem and hope you can give me some advice.
I just changed ico, logo in my master page. After I applied my customized master page. The left side menu bar disappeared.
Any help please?
Hi.
My bet is that you did change something more, intentionally or not.
T-shoot by using a perfect copy of the Seattle content, then try again. Maybe add part by part and see where it breaks?
Regards // Thomas
that happened to me too, but it was the css, I had moved over the top menu without realizing the side bar menu used the same css class.
If you did not change any css, check all closing tags for div’s and Controls. Something is wrong…
Regards // Thomas
I found the problem. The css file is bad.
thank you very much for your time!
Great!
Hi and thanks for your article.
I have a problem with js file in my master folder.
I put /css in my folder an reference it like you do and it works.
I do the same with a /js folder to reference jQuery, I’ve got an error : unable to create secured cached URL (translated from french sorry). I put the reference like the css : /_catalgos/masterpage/truesec/js/jquey-1.9.1.min.js in my master with the control : <SharePoint:ScriptLink language="javascript" name="….
If i try the url http://myServer/_catalogs/…. , he found the js file and invite to download it ! So why !
As I can see, I've to put it in the layout folder…
Thanks in advance for yout help.
Hi Ben.
Not sure why you get this, I have not tried yet to use java in this way.
I would try to have a look at the content type of the file?
Check this link:
http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/85249242-55d1-4b20-8dcd-484ef42a0447
Seems like what you are trying to do should work. As I see it you should avoid layouts since that puts the file in the filesystem and you can’t use this online for example.
Regards // Thomas
Is this btw copied from the path?
/_catalgos/masterpage/truesec/js/jquey-1.9.1.min.js
it should be:
/_catalogs/masterpage/truesec/js/jquey-1.9.1.min.js
*catalogs* not catalgos…
Regards // Thomas
Thanks.
I found this link too, and try to prefix with ~sitecollection my path :
– No more error : )
– but jQuery doesn’t load… 😦
for the “_catalogs”, it’s a bad retranscription not a copy/paste. So my path is good in my master.
When i Get this type of error, I analyse every word ; )
And if I copy/paste the path in IE, I can download it.
I know it should work ! And it’s a good Way to package a branding with the new Design Manager… If I have to put some files in _layouts, some in _catalogs and anywhere else, it’s no longer a simply package…
So… instead of using SharePoint:ScriptLink, I used classic
It works
I was working with html version of the Master.
I try the link direct in the *.master version, an put the ~sitecollection prefix :
Now, it works 🙂
I don’t really understand why, but it works….
Thanks for your help !
Great!
If you don’t mind, could you add the final reference link? I’ll later add a peice on js and masterpages so it would be great to have a verified working example.
Remember also, the ~sitecollection prefix is not available in SharePoint online or sandboxed mode.
Regards // Thomas
I did, but it was removed by wordPress… with the code block, it should be better
If I want it working everywhere (SPOL, sandboxed, on-premises), the classic link with script html balise is a good way as I said before :
But don’t forget to use $(document).ready(…) in this case, because the js load after SharePoint:ScriptLink
Hope this help.
That is a great tutorial thanks a lot. I don’t understand such a simple edit why is so complicate because of MS!! That much efford to branding a such advance system is ridicilous.
After the following part is not the same with the retail version so I couln’t proceed further. I think the article also needs to be updated accordingly.
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’.
Hi.
Publishing the master as a major version is one of the steps in the guide, perhaps you missed it or did I understand you wrong?
Regards
// Thomas
How do you turn on the publishinig feature on the site for 2013 Foundation?
Hi Rick.
You don’t. Publishing is a server feature and it’s not available in Foundation.
You don’t need it here. In Foundation, to switch master to use, try using SharePoint Designer 2013 and select to use the custom master from there.
Regards
// Thomas
Thanks. OK, now my other dilemma. We have 2010 foundation/Designer and it works together nicely. However on 2013 I cannot seem to open it in designer. I try the URL, it says no. I don’t see a way within SP like with 2010 either.
OK, I have SPD open.
This was so helpful!! It worked perfect!! Thank you so much!
Thanks for the detailed guide.
I have tried it step by step, and i faced no errors during implementations, however, the logo didn’t appear.
I tried it several times but with no luck.
is there anything that could hinder the logo from appearing.
Hi.
Could be anything.
Typo
Format
Size
Path
Checked out
Permissions
Try the path to the logo on its own
Right click the ‘no show logo’ and check properties for the path.
If everything is done right, it should work.
Regards // Thomas
I’m having the same issue with my logo — did you ever get that working?
Hi Rene.
What was the issue you had with the logo?
Let me know and I’ll try and help.
Regards // Thomas
Nevermind — problem solved! I was missing a portion of the site collection path…i.e. Operator Error!
Thanks
rene
Glad to hear it Rene 🙂
Please let me know if anything could be done better or if you have any other feedback.
Regards
Thomas
Best guide anywhere for SharePoint branding when you have Foundation and no Publishing infrastructure – Great Post!
Hi,
Is there a way change the width of left navigation menu bar? I’d like to make it narrower so I can use more horizental space.
Thanks
Hi,
Many thanks for the nice pretty clear post, but when I tried to change the master page, its displayed with the folder name where I uploaded, something like this folder_name/file_name. when I tried to submit that, its throwing error “Something went wrong” Go back to site.
Many thanks in advance for your reply
Hi Fazil.
That is as it should be, if you get that error message, then something is most likely wrong in the code. Check and doublecheck the changes you have made. Also, if the site is a searchcenter site, it will not work. There you must have the seattle ‘unchanged’.
Check also that the files are checked in and published. That could be the reason as well.
Regards // Thomas
awesome guide, any idea how to get rid of some of the leftovers? I mean like the + new document still in blue in your black themed truesec page
Hi Szabolcs.
Yes, you can rather easily do this by finding the proper class/id of that link(+New Document) for exampel using F12/Developer toolbar in Internet Explorer. Select Arrow, then point to the link and check what css classes are affecting the object, this is shown at the bottom right in dev toolbar.
Once you know what class to use(you can even try changing it in dev toolbar to see the effect), you can add or edit that class in your custom css file to make the change permanent.
Try it and let me know how it goes. If I had the time I would add it as a separate guide for you.
regards // Thomas
Excellent, thank you.
One issue I’m having: After uploading my new master page, the 2nd dialog appears to select the Content Type. In my dropdown list of content types there is no ASP NET Master Page. My only options are:
Master Page
Master Page Preview
JavaScript Display Template
Document
Display Template Code
Design File
Am I missing something? Thank You.
Hi.
No, not missing anything. Not sure if I am right here but I Think that you have masterpage and asp.net masterpage depending on whether you have activated the publishing site Collection feature or not.
Something like that…I have seen both as well and you can select any one of them.
Hope that helps
Regards // Thomas
Nevermind, didn’t have Publishing features enabled which did the trick. Thanks again for the excellent guide.
Hey Thomas,
I love your guide, I’ve followed it up to applying the master page but I’m having trouble getting the .ico file to show up as the icons on the tab, address bar and as the home button at the upper left in Internet Explorer. I’ve followed the instructions exactly and don’t have any typos on the paths in the .master file. The logo works just fine so I know that the master page file is being used and correctly but those I’d really like to get those icons working correctly. Sometimes the default SharePoint icon will turn into an IE icon on the tab and address bar icon. On Firefox and Chrome, the tab icon will show up as the specified one but the address bar icon will remain their respective defaults. Could you please advice? It would be greatly appreciated.
Hi Andrew.
For IE, try clearing the cache. The favicon is sometimes hard to get overwritten.
Helps?
Regards // Thomas
Hello,
Thank you for this guide. Here is my configuration: Win 8, IE10, SP2013 online, Public site, Berlin master page and sbw css
The version of SP2013 online that I am using makes it easy to change the SharePoint logo within the webpage, but not the FavIcon in the tab of the browser. I am trying to change the FavIcon. I am neither a developer, nor an IT person.
I am stuck right after “Now, we will edit the files and add the simple magic lines….”. I cannot find sbw or core15 in the Berlin master page. However, I found
<SharePoint:CssRegistration Name="” runat=”server” EnableCssTheming=”true” />
How should I proceed from here on? (a Microsoft representative told me that they do not support changing the FavIcon)
Regards,
Patrick
PS: I finished building my website except for the FavIcon. Will I have to redo all the pages after changing the FavIcon?
Regarding: How should I proceed from here on? (a Microsoft representative told me that they do not support changing the FavIcon)
Well, it works…why would they not support a custom favicon? The examples in my post are actually performed in SharePoint Online…
Regards
// Thomas
Hello,
Thank you for this guide.
The version of Office 365 online Plan E3 / SharePoint 2013 online which I am using makes it easy to change the SharePoint logo included in the web pages.
What I need to do – and which is not easy for a non developer- is replace the SharePoint FavIcon in my Public Site (not Team Site) which I built using Berlin as a master page.
I could not find core15 in the Berlin master page; however, I found:
SharePoint:CssRegistration Name=” %SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/berlin.css % ” runat=”server”EnableCssTheming=/”true” /
/head
body
(I removed the less than symbols and greater than symbols so that the text in between does not disappear, and hope that it will work)
How should I proceed from here on? (it would be good if there is a way to just change the FavIcon without having to re-build every page of my public website)
Regards,
Patrick
Hi Patrick.
You should not have to redo anything but the masterpage, I have not seen the berlin.master, but a master is a master.
Adding the line to load your own favicon should work anyway, if you add that to the masterpage then it will load on Avery page, and yes, it works in Office365 as well.
The line that needs to be added to the master is the ‘SPShortcuticon’ tag as I have described it in my post. That tag has to Point to a favicon ico file located in the _catalogs folder(Masterpage library) so that it is available to all pages on every subsite. You cannot put it in for example a doklib or site asset catalog.
I hope that helps?
Best regards
// Thomas
Hi,
I get The server tag is not well formed error. Can you please help me fix it ?
Hi.
Oh, my best guess is that you have missed something in the format, a > or other. Open the file in IE dieractly, that usually shows if it is properly formatted with opening and closing tags. Also, make sure to look for all of your single and double quotes and replace them, usually when you copy from the web they end up in the wrong encoding.
Hope that helps
// Thomas
Is there any way to make your custom master page be the default applied to all future subsites that are created under that site? Seems you can use the “Reset all subsites to inherit this site master page setting” but you have to do this explicitly after a new subsite is created. I want to have all self-service sites automatically inherit the custom master page upon creation. Thoughts on how to accomplish this?
Hm, I can see two ways straight off, eaither create a custom event reciever as a VS project that fires on the ‘site created’ event and sets the masterpage to your custom, or, replace the default Seattle.master with your custom.
Its that or create a new web template with your custom master as the default.
No better way comes to mind.
Hope that helps.
// Thomas
A other not so nice way, is to have a powershell script that runs at regular intervals and sets the master on all that don’t have the custom.master.
Create a task in task scheduler that fires the powershell script.
// Thomas
From developer tool i got following information.
In case of Webpart page(develop by me)
css file url is:
/_layouts/15/1033/styles/themable/core15.css?rev=BdxJNFd%2FTPOed3Z8IKEJ9A%3D%3D
I think above is default
In case of page without webpart
css file url:
/comm/_themes/6/corev15-51C31438.themedcss?ctag=11
regards,
pragayanshu
Ok, next step Pragyanshu. Some basic t-shooting rules:
Start by ruling out Everything else, the more parameters that can affect things the harder to find the answer.
Setup a default teamsite with a default page with no wp added but the default. Works?
Then, use the same site, use a default webpart page, a default wp, then see what happens?
If it works then, change to your custom page, see what happens, and so on…
You have to find out exactly what is affecting the styles, one amll step at the time, the smaller the better.
Regards
// Thomas
Hi Thomas,
I wonder if you may be able to help me with my little problem… I have changed the background color of the left navigation, the thing is that I want the background color to fill the rest of the empty space under the menu, down to the bottom of the page. How can I make the left navigation´s height to expand dynamically, depending on how much the main content “grows”?
There is no problem setting a static height (height: 400px;) in my CSS-file, but when I try to set it to height:100% “nothing” happens with the height. The element that I´m using is .ms-core-sideNavBox-removeLeftMargin.
Regards
Ash
Hi Ash
I tried, but got the same. Static works but 100% that should do it does nothing…
Sorry, try the TechNet forum?
Regards
// Thomas
Thanks for the reply. I managed to solve the problem =)
Great, how was that?
calculated the height with jquery and a delegate control, and set the height with controlname.css
Nice, I thought of doing something like that but it should not have to be that hard…
Take care
Regards
// Thomas
I did all the steps… How does my new .master file become my home page .aspx file??
Hi.
It doesnt, the master is the master and pages are pages.
Think of the master as the frame and the pages(aspx) as the paintings…
Regards
// Thomas
Thanks for the response…
Currently my default page is \…home.aspx
After the lesson above, my new Sharepoint homepage will end in “.master” ??
Hi.
No…
Its like this, the masterpage is always loaded, no matter what page you load, be it the homepage or a document library. The master is the framework for how SharePoints user interface structure is built, it controls the basic things such as navigation and settings menus and also the area into which pages are loaded. The homepage is really only loaded into an area inside the ‘chrome’ of SharePoint, make any sense?
Anyway, you will always have a masterpage loaded in SharePoint. Make a change to that and everything will change to reflect that, inside the site or even the site collection depending.
Hi again.
This link will explain most of it:
http://office.microsoft.com/en-us/sharepoint-designer-help/introduction-to-sharepoint-master-pages-HA102019628.aspx
Regards
// Thomas
!
Hi Thomas,
As a graphic designer, I want to balance and limit the font styles (The font size and color of ‘Paragraph’, ‘Heading 1’ etc) of my Sharepoint Wiki page, as I don’t like them as they are out of the box. But I can’t seem to find any way that doesn’t require all sorts of coding of which I don’t know the slightest thing.
Can you help me in any way by telling how I can achieve this?
Thanks!
Moris
Hi Moris.
I think I know what you are after and I haven’t done anything in that part for a long time, like since 2010.
But, I found this blogpost that looks very to the point and explaining. Could that help you?
http://knowledge.zomers.eu/SharePoint/Pages/How-to-add-custom-styles-to-the-ribbon-in-SharePoint-2013.aspx
Not sure if perhaps the .spfont files in the themes can assist…?
Hope that helps
Regards
// Thomas
This was great one… I tried it but after I applied the master page i found a problem ! when I click add an app I found only the 4 basic apps ( doc lib, custom list, tasks, site mailbox) but when I revert to the original master page ,,, there is alot of apps!
Most likely, something has gone wrong.
Try it step by step, use first a copy of seattle.master. Use that and see about the apps.
Make one change, see apps.
And so on…
The modifications to the master in this guide do nothing to affect the apps.
Regards
// Thomas
I’m not sure if you’re still monitoring this thread, but…here goes. I’ve followed the directions to updating the favicon. I’m on Office 365 SharePoint Online. Using SPD 2013 I created a folder in Master Pages, and placed my favicon.ico there along with the custom copy of the Master page. The only difference being that I edited the HTML page (not the .master page). I update the tag with with the URL of the custom favicon in my folder. Saved the changes, publish a major version of the HTML which updates the .master (I opened it in Advanced mode to check). Went to Master Pages in Site Settings to change the master page to the custom on I created and….nothing (*insert sad face here*). I would have these types of issues with On Premise vs Online but it seems that this is working for others online and I’m wondering if I’ve mucked it up somehow.
Hi.
I have no idea why that does not work, what is different from a master genereted from a html…but test it with a copy of a working master, then only change the favicon url and see if that works?
Verify the url as well by pasting the ull url in the addressfield in your browser, you should always be able to open the favicion in the browser.
It can be as simple as the favicon file not beeing published?
Good luck
Regards
// Thomas
Hi Thomas,
Thanks for responding so quickly. I read a comment above regarding IE cache. I cleared the cache and reopened IE to see the default IE icon (rather than SP) so that was a step in the right direction. I opened the site in Chrome and it’s the same. I can open the .ico file following the direct path. The url in the master is set to “/_catalogs/masterpage/_MyFolder/favicon.ico”. I checked out and then checked (to Publish a major version) the ico file.
I got the same result when following your method: copying .master and editing in Notepad (I was only trying to achieve the icon edit for now) and then uploading both to folder in Master Page and publishing major version. Again, the favicon will open in the browser for both scenarios so I wondered if it had something to do with how it’s reading the URL in file.
Thanks for your efforts – I fear it may be a lost cause though.
Hi Thomas,
I got it to work. Either one of these things fixed it:
– Created a favicon with 2 formats, 16×16 and 32×32 in one image
– Changed the URL to the full path, i.e. ‘https://mysitecollection/sites/mysite/_catalogs/masterpage/Images/favicon.ico’
Thanks so much for your helpful post!
Nice.
The full URL works if it never changes, like if you have onprem SP with one url for internal access and another for external.
But, the relative URL should work as well.
Glad you got it to work.
Regards
// Thomas
Its very goood article..U saved me..Thx a lot 🙂
Great article. Im new to sharepoint and this has provided an in-valuable lesson in branding.
Hi Steve.
Thanks, the goal was to offer a way for everyone to get started 🙂
Regards
// Thomas
Thanks Steve.
Appreciate it.
Regards
// Thomas
Thanks for the post. Do you have any reference to create branding package in SP 2013.
Regards,
Divyesh
Hi Divyesh.
I have not seen any good 2013 package, and I have not had the time really to create something similar to my 2010 Project.
My manual guide is the best I know of…:-) I have not seen any simple-to-use package yet.
Regards
// Thomas
Hello,
I’ve read through the post and have a question before I attempt this.
I have SharePoint 2013 that comes with Office 365 and a few things look different in the css file.
The first difference is that it doesn’t appear to be pointing to the corev15.css file. It has this instead:
<SharePoint:CssRegistration Name="” runat=”server” EnableCssTheming=”true” />
I tried getting the berlin.css file and but when adding the path, the file is not found.
Perhaps I could get around this by just having the changes I want in my css file instead of replicating everything but I’m new to this so wanted to take the easier route.
The other question I have is if it’s possible to change the size of the “big” logo that SharePoint comes with. I find it pretty small and since my logo has my company’s name built in, I’d rather not have the Title and just spread my logo out over the whole banner.
Thank you,
Eric
Hi.
That should not matter, what you do, is just add the same line, a second css (your custom) will then be loaded after the default.
Add the styles you want to change to the custom css and it should all work.
Good luck, let me know how it goes.
// Thomas
Hi again.
Regarding the second part about the logo. Averyhting(more or less) can be changed, use F12 develeoper toolbar to find what style gives the logo its size.
Change it but beware, if made to big, other things may move around in certain scenarios, so make sure you get the size big but not too big 🙂
Regards
// Thomas
Hello,
I got near the end of your instructions but got stuck on publishing the new master page.
I went to “Site collection features” and enabled “SharePoint Server Publishing Infrastructure”. Tried opening the page [URL to your team site]/_layouts/15/ChangeSiteMasterPage.aspx but get the error “Sorry, something went wrong”.
I also tried activating “SharePoint Server Publishing” but get an error that I have to enable “SharePoint Server Publishing Infrastructure” first, which I’ve already done.
The other issue I ran into is when I uploaded my *.master file, I wasn’t able to choose ASP NET Master Page as you suggested…it wasn’t in the list. Instead I just chose Master Page.
Thoughts?
Thank you,
Eric
Hi Eric.
If you can’t activate the site/web publishing feature, then most likely, the site Collection feature is not activated. Disable and reactivate again?
Make sure it is…
The ‘ASP.Net Master’ or just ‘Master’ is the same, don’t know actually why there are different…they act the same as far as I know.
Regards
// Thomas
Hi Thomas,
I got it to work. There were a couple things that caused me issues. The first is I set the “SharePoint Server Publishing Infrastructure” in the wrong place. I clicked on “Sites” and then went to Site settings and enabled it, but it wasn’t at the right place. When I went to the team site and Site settings there was a link called “Go to top level site settings”. After setting it there things were better.
The other issue I ran into is I uploaded the *.master file and associated files at the site level instead of the team site level.
Now I can play…
Thank you for all your help.
Eric
HI
I am new to sharepoint and I am using sharepoint foundation 2013. I need to create a custom master page for my site. I followed this documentation as well But
1. When I try to “Publish major version” the option is not displaying on the dropdown menu.
2. I cannot access to “[my team site]/_layouts/15/ChangeSiteMasterPage.aspx” I get the error “Sorry, something went wrong – An unexpected error has occurred.”
Hi.
1. Do a check out/check in – as major version
2. You can’t access that path directly
3. Have no solotion for that, the publishing feature is server only…and is required for the masterpage change gui. Google for a solution on how to change the master on foundation. No, wait, use SPD! 😃
Regards
// Thomas
Thomas, EXCELLENT post, and worked perfectly for me right up until the point of selecting a content type for my new files, and then publishing a major version. I don’t see an answer for my specific problem above, but I AM using the Enterprise version of SP 2013. I expect that makes a difference. However, I used your instructions since I don’t have any editing tools right now except Notepad!
Okay, so the content type field was not even part of the of properties for my uploaded files. Instead there was a field called “UI type.” I selected “4” for my custom master page and “15” for the css page. Not sure if that was right, but anyway…
I edited the library settings to allow management of content types so that the content types field would appear. That worked fine. After that I edited the properties for my custom master and custom css files.
The content type “master page” was available so I chose that for my custom master. But there was no “design file” content type at all. My only two content types were “master page” and “device channel mappings”! In an attempt to add the appropriate content type, I tried to “add from existing content types” and viewed all available content types. I looked for “design” anything or “css” but found nothing.
Server publishing was turned on at the site collection level already, but not at the site level, so I turned that on. Major versions was already turned on for my site so it didn’t ask for major versions. I checked my file in and out several times and each time it created a new version but it did not show up on the list of master pages. My style sheet also did not show up on the list. Maybe because of the unsolved content type issue above.
Also, I did all this in a subsite so that I could test without bad consequences, but used relative paths starting with /_catalogs/etc. as you suggested so I don’t think that should make a difference.
Help!
Hi Kay.
I would, as a start, create a new site Collection and do the steps there, to see if it is something inthe existing site Collection that interferes. For example, if you can’t select ANything more then Master and Device channel. There is something else you(or someone else) have done or you are simply in the wrong Place 🙂
Try it if possible in an empty SC, thats my best tip right now.
Good luck
// Thomas
Great post, very thorough. We are using SharePoint Online and as a SharePoint novice, I was having trouble getting the favicon to work. Our SharePoint administrator had made me the owner of a site, and I was trying to use the following path:
/_catalogs/masterpage/finance/Favicon.ico
when what I really needed to be including was the site in the path as well
/teams/Finance/_catalogs/masterpage/finance/Favicon.ico
Thank’s!!!!