Recently I worked on an engagement where I had to rebuild a customers branded SharePoint site. A previous vendor was hired to build it for them, but was released before completion. The documentation was poor, and the notations within the masterpage and CSS left you guessing about may topics. This is not an area of focus for The Adaptive Group, but it is an important customer and we wanted to do what we needed to in order to get the development site transitioned to production so that we could move forward with more important initiatives, like Reporting and Analytics.
There was not a lot of work to be done, so I took on the task as an added value to the customer, some basic design changes and layout. At least that was what I thought… Evidently adding back the ribbon and scroll bars was more of a challenge than I thought.
Some of the challenges I needed to resolve:
- Add the standard ribbon back to the site and reposition the “Site Actions” menu from the vendor’s custom header (on the right to the ribbon position on the left)
- Fix the ribbon back to the top of the page and don’t scroll it with the page
- Keep the “Edit Web Part” dialog from being hidden under the ribbon, and inside the scroll area of the body
- Remove the custom header from showing up on the standard dialog pop-ups (“Create Page”, “Create Site”, etc.)
- Remove a custom footer and the content within the footer
I compiled some basic resources and thoughts through this exercise. Not a complete branding exercise, so this isn’t all you need to know of course, but more than I ever wanted to know about SharePoint branding (again, not a focus for our firm).
One of the leaders in this space, Heather Solomon, has several great articles on this topic. I found these to be helpful for me on ribbon visibility and configuration:
http://blog.sharepointexperience.com/2012/07/17/ribbon-visibility-using-css/
http://blog.sharepointexperience.com/2012/08/31/sharepoint-ribbon-css-tips-tricks/
http://blog.sharepointexperience.com/2012/06/27/the-docked-ribbon/
Div I added in within the “s4-bodyContainer” to allow the “Edit Web Part” popup to be positioned under the ribbon and within the scroll bars of the workspace area:
<div id=”MSO_ContentDiv” runat=”server”>
Interesting article I found when looking for how to resolve an issue with “inline styles”:
http://www.thesharepointmuse.com/2012/04/the-10-worst-mistakes-in-sharepoint-branding-and-ui-design/
Two articles on ribbon position fixing using java script (the previous vendor has used some of this technique, so I removed the java script and utilized standard <s4-ribbon> configuration:
http://blog.amtopm.be/2011/01/13/content-scroll-bar-issues/
http://www.greggalipeau.com/2011/01/28/a-better-enhanced-sharepoint-2010-floating-ribbon/
A quick search on any of these topics will help you to locate even more articles, there is definitely not a shortage of information out there.
Happy Branding