How much SharePoint Branding can you really make in a very restrictive environment?
This is a question i always have when have to make restyling for a SharePoint Site.
I work with a lot of enterprise environments where you can't change and touch Master Pages, Page Layouts or change existing CSS, apps, sandbox, etc etc... because of Companies Brands Policies, what is understandable, but gives you some area limitation where you can develop your presentation Page/Design and show the essential content for the final user.
That will implicate create specific solutions folders with your custom "JS/CSS/HTML/XML" files to support you design to response specifics Client requests.
One thing I learn from users is the Main Page, is the Key for a successful Site and after some common sense and reading about how our memory works, easily identify that Visual Memory is a key point for a successful site.
The Main Page should be easy to understand and should give you exactly what >60% of users want, a strong, colorful and understandable images that values more than 1000 words....
Can we eliminate the Text "NO", but we can reduce to Minimal.
In my point of view is essential to keep the User the most time possible in the Main Page unless is not possible to give a response for the client request and redirect to other page.
One of the strategies that was develop in SharePoint 2010 and continue with 2013 is the ability to use Modal Dialog to grab parts of Content in the existing SharePoint Site/ External and show in the Main Page with redirect to other Pages.
When you are making styling here are some things users hate and complain and you should remember:
- Too much data/text in the Main Page.
- Too much clicks to go anywhere.
- Redirects to Lists/Document Libraries or Features inside SharePoint Site that is not Page Content like "Publishing"...
- Scrolls (specially horizontal ones)
- Sensibility when selecting colors
- Buttons don't interact (e.g "mouseover")
- Heavy tree view Navigation (i use "Algorithms graph" concept and users liked more....)
For this example, want to show a example on how we can create in the Main Page a Link button to open Documents in a Modal Dialog without Out of the Box Ribbon.
When a Document Library is accessed the Master Page Content appears and the Ribbon reacts when a item Area is selected.
One option to remove the Master Page content in the Document Library View is add the Parameter "isdlg=1".
This option will activate the class name "s4-notdlg" of the CSS that hides the content of the Master Page but will not hide the Ribbon associated with the View.
Here a example of Url to have a clean :
http://[Site]/Shared%20Documents/Forms/AllItems.aspx?isdlg=1
One option will be edit the Page of the Document Library View and add a Web Part "Script Editor"
After the Script Editor Web Part is added you can add the following JavaScript to Hide the Ribbon Area "s4-ribbonrow" when the Page is on Modal Dialog "isdlg=1" in the site URL:
<script type="text/javascript">
document.getElementById('s4-ribbonrow').className = "s4-notdlg";
</script>
This option give us the permission to view the Ribbon when the Modal Dialog is not active and only Hide when a normal user want to view specific content.
After this changes are made we need to create a new Link or image link in the Main Page where the users should have access to a clean view of Document in the same Page.
Here a example where is added the Image and call a Modal Dialog to the clean Document Library View.
After we click the Button or the Link Text the Modal Dialog will show with the documents and with a clean view without Ribbons.
This is a simple example, there are other ways of doing this example and only want to give a very straightforward way of making it.
This are my personal thoughts and experience with some customers, nothing more...
Hope this article is useful and can help you,
Kind regards,
André Lage
