I’ve been following the site http://academy.bindtuning.com/customize-sharepoint-2013-and-office-365-suite-bar/ just so I can change the title from SharePoint (because no one here wants to see that) I have followed all of the instructions except for step 7 under SharePoint master pages. The Problem: the code <div id=”suiteBarRight”> doesn’t exist or at least cannot be found in the masterpage code. So I do not know where to post the remaining code to get this thing to work. Any ideas? Thank you.
Editing the title in the SuiteBar:
1. Copy the contents of the master page.
2. Create a new master page.
3. Paste the code from the original master page into the new master page.
4. Find one of the following lines of code (depends on the type of site being edited): <div id=”suiteBarRight”> OR
5. Insert this code just above the line that says:
<SharePoint:SPSecurityTrimmedControl runat=”server” AuthenticationRestrictions=”AnonymousUsersOnly”>
Code to insert:
<div>
<script type=’text/javascript’ src=’//code.jquery.com/jquery.min.js’></script>
<script type=”text/javascript”>
var suitebar = $(“#suiteBar”);
var branding = suitebar.find(“.ms-core-brandingText”);
branding.html(“<a href=’/’><img src=’https://mywebsite.edu/blah/SiteAssets/image.png’ height=’30px’></a>”);</script>
</div>
6. Save the new master page.
7. Check in the new master page.
8. Publish as major.
9. Go to site settings.
10. Click on design manager.
11. Click on step 7: Publish and Apply Design.
12. Click Assign master pages to your site based on device channel.
13. Select the new master page from the dropdown menu.
14. Check “Reset all subsites to inherit this system master page setting.”
15. Click “OK.”
16. Refresh the page.
You should now see your logo at the top of the page instead of SharePoint. Hooray.
You can also replace the title with an image which is hyperlinked, shout out if you need to know how.
Ok. Basically what I did was:
- Inspected the source code of the site that I was having trouble with.
- Noticed the pattern in the code where the suitebar code would normally be located. In this site the code for it was hidden, but the bar still appeared on the site. I’m guessing this was due to it being a different type of page. I’m a beginner, so this is just a thought.
- I then added the following code where the rest of the sites had shown it to be:
<div>
<script type=’text/javascript’ src=’//code.jquery.com/jquery.min.js’></script>
<script type=”text/javascript”>
var suitebar = $(“#suiteBar”);
var branding = suitebar.find(“.ms-core-brandingText”);
branding.html(“<a href=’/’><img src=’https://mywebsite.edu/blah/SiteAssets/image.png’ height=’30px’></a>”);</script></div>
- I entered this code just above the line: <SharePoint:SPSecurityTrimmedControl runat=”server” AuthenticationRestrictions=”AnonymousUsersOnly”>
- It was really a case of trial and error and having the benefit of working on a dev environment 🙂
Thank you for your reply. I have just figured it out in my own special way which I will document as soon as I can get my brain to put it into Word. There is a suitebarright however. See attached photo.
