From time to time i see a
lot of discussions about the Masterpages, Branding, Styles, Customizations,
UI/UX in SharePoint/Office 365...
This article uses examples in my custom environment where i can explain how you can manage branding/styles and Customization changes in my SharePoint/Office 365 Sites and keep the environment regarding Out of the Box "Masterpage/Style files" being untouched, manageable and clean to constant the SharrePoint/Office365 upgrades.
This article uses examples in my custom environment where i can explain how you can manage branding/styles and Customization changes in my SharePoint/Office 365 Sites and keep the environment regarding Out of the Box "Masterpage/Style files" being untouched, manageable and clean to constant the SharrePoint/Office365 upgrades.
This was done in Test environment, if you need to make change in production please reflect in the impact.
Important and recommend to read before you do something in Branding:
Every time you need to change the branding, think in all the impact and costs you could have and this means $$$ costs, this is the reason people talk about Customization Tax, because if you make changes this could have impact in newer version of your SharePoint/Office365 environment and that means COST.
There is a video from the ignite from Vesa Juvonen about "Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices" and shared in Channel9 explain all the impact and possible cost of changing the Branding and explains what is supported and not with a lot of recommendations.
Here a nice article talking about Branding from Chris O'Brien,
http://www.sharepointnutsandbolts.com/2015/01/custom-master-pages-and-web-templates-in-office-365--thoughts.html
and this one,
SharePoint site branding and page customization solutions
https://msdn.microsoft.com/EN-US/library/dn985871.aspx
and this one,
SharePoint site branding and page customization solutions
https://msdn.microsoft.com/EN-US/library/dn985871.aspx
Video from ignite about Branding:
Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices
https://channel9.msdn.com/Events/Ignite/2015/BRK3164
PS: A lot of Designers/Dev/PowerUsers already the work with this approach in other ways, for them is not new stuff, but want to show different approaches for the same issues and explain how i work with this type of topic in Office 365 and SharePoint related.
PS: A lot of Designers/Dev/PowerUsers already the work with this approach in other ways, for them is not new stuff, but want to show different approaches for the same issues and explain how i work with this type of topic in Office 365 and SharePoint related.
There is also a SharePoint Property call AlternateCssUrl that could do this trick,
There is the 5 questions rule you should make your self every time you need to make something (Who, What, Where, When, Why).
It's always better to use Out of the box options and not reinvent the wheel.
Here is the output example
of the changes made without changing Out of the Box files.
My Architecture definition for the
Branding/Customization
Here is the Architectural
View of the approach about Managing Branding/ Styles/ Customizations and
functionalities in SharePoint/Office 365 using as base this SharePoint Provider App.
For this example used the Processlynx Custom Action and Ribbon Manager (here a Demo of the app in Office Store)
Process for implementation
DEV/Designer
- This users are responsible to create the Customizations, Styles and
functionalities in JS/CSS/images and other support files and include them
in a Folder
- If they have SharePoint Knowledge they should be able to configure
the Out of box User Custom Actions provided by that SharePoint Object
using UI SharePoint App,
- for this example used the Processlynx Custom Action and Ribbon Manager (here
a Demo of the app in Office Store)
Site Administrator/PowerUser
- This users are responsible to Manage the correct reference to Files
- If they have the SharePoint Knowledge should be able to configure
the Out of box User Custom Actions provided by that SharePoint Object
using a SharePoint App,
- for this example used the Processlynx Custom Action and Ribbon Manager (here
a Demo of the app in Office Store)
This approach add new UserCustomActions in
your SharePoint Webs Object where are located all the references to JS files,
this files will manage the new designs styles/functionalities and can be
propagated to all site or even site Collection.
Every time a new change is needed the Power
User or site Administrator can remove or update the JS Files without the need
of changes of OoB files and everything should work because in Background everything
is Out of box and can assume the Office 365 Microsoft changes without errors.
Example:
This example explains how
to use a JavaScript file to load dynamically a CSS in the header of the
SharePoint Site to make the changes in the Styles.
Creation of AddCSS.JS
This JavaScript file add
dynamically the CSS file "CustomCSS.css" to all headers of the
SharePoint site by JQuery.
$(document).ready(function () {
$("head").append("<link rel='stylesheet' href='" + _spPageContextInfo.webAbsoluteUrl + "/SiteAssets/CustomCSS.css' type='text/css' media='screen'>");
});
$("head").append("<link rel='stylesheet' href='" + _spPageContextInfo.webAbsoluteUrl + "/SiteAssets/CustomCSS.css' type='text/css' media='screen'>");
});
Creation of Custom.CSS
/* change the
background of Ribbon Area */
.ms-cui-tabBody
{
background-color:#F2F2F2;
}
/* change the background of Left Menu */
.ms-core-listMenu-verticalBox
{
background-color: antiqueWhite !important;
}
/* change the size of contentPlaceholder*/
#s4-workspace{
width:60% !important;
position:absolute;
left: 20%;
}
/* change the background of SharePoint
Site */
.ms-backgroundImage{
background-color:#8CBF26;
}
/* change the position of OoB SharePoint
Search*/
#DeltaPlaceHolderSearchArea{
position:absolute;
left:50%;
top:10%;
}
Here the final CSS:
.ms-cui-tabBody
{
background-color:#F2F2F2;
}
.ms-core-listMenu-verticalBox
{
background-color: antiqueWhite !important;
}
#s4-workspace{
width:60% !important;
position:absolute;
left: 20%;
}
.ms-backgroundImage{
background-color:#8CBF26;
}
#DeltaPlaceHolderSearchArea{
position:absolute;
left:50%;
top:10%;
}
Include the files in
SharePoint Library
Access to your Office 365 SharePoint and Site
Assets library and add the following Files "AddCSS.JS" and
"CustomCSS.css"
Add UserCustomAction to SharePoint Site
Using the Processlynx Custom Action and Ribbon Manager you can include your custom
User Custom Action to refer your JS files.
Jquery.JS is mandatory to be 1, the second reference should be "AddCSS.JS" because uses JQuery
code.
After the JavaScript is included in the SharePoint
Object UserCustomAction by the SharePoint App, access to your Site and the
changes in the MasterPage and Look and feel will be shown.
If you like to use Visual
Studio and Declarative code you can use the option "Generate Declarative XML" to
create the XML for your SharePoint Feature as shown.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Jquery" Title="Jquery" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/Jquery.JS" Sequence="1" >
</CustomAction>
</Elements>
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="AddCSS" Title="AddCSS" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/AddCSS.JS" Sequence="2" >
</CustomAction>
</Elements>
To better understand the full power of this approach "UserCustomAction" about customization's a design and functionality without breaking policies and keep it easily manage by Users for future upgrades:
- How to Create Expand Collapse Left Menu
using Scriptlink Custom Action
- Create sticky footer in all SharePoint
Site using ScriptLink without changing MasterPage
Hope you like this article,
André Lage
