Customization graphique Sharepoint, quelques points à retenir

Publié le 05/02/2016Mis à jour le 26/02/2016

Bonjour,

Ce billet rassemble quelques points clés à connaitre pour bien construire une charte graphique Sharepoint 2013 et Sharepoint online

Activation, utilisation

• Pensez à activer la fonctionnalité « Infrastrucutre de publication de Sharepoint Server » dans les fonctionnalités de votre collection de site (http://<votresite>/_layouts/15/ManageFeatures.aspx?Scope=Site)

• Si vous créez une masterpage minimal en .html, pensez à la décorréler de votre page .master, en décochant la case dans ses propriétés sharepoint (via la bibliotheque http://<votresite>/_catalogs/masterpage/Forms/AllItems.aspx). Sans ceci vous ne pourrez pas modifier directement la masterpage (ex oslo.master ou seatle.master) :

Customization masterpage

Voici des exemples d’ajout de pages javascripts et css dans votre <header>

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/SiteForms/css/accueil.css %>" runat="server" after="corev4.css"/>
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/css/bootstrap.css %>" runat="server" after="corev4.css"/>

<SharePoint:ScriptLink language="javascript" name="<% $SPUrl:~sitecollection/SiteForms/js/jquery/jquery-1.11.3.min.js %>" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="<% $SPUrl:~sitecollection/SiteForms/js/jquery.SPServices/jquery.SPServices-2014.02.min.js %>" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="<% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/js/bootstrap.min.js %>" OnDemand="true" runat="server" Localizable="false" />

Customization CSS

Voici le code css à ajouter pour passer votre site en largeur fixe :

form
{
margin: auto;
max-width: 1590px;
}
#s4-workspace
{
margin: auto;
max-width: 1590px;
background:#FFFFFF !important;
}

Liens Utiles

• Wiki technet (via benoit jester) http://social.technet.microsoft.com/wiki/contents/articles/18892.sharepoint-2013-design-manager-construire-une-masterpage-fr-fr.aspx
• blog d’Erik Swenson : http://erikswenson.blogspot.fr/
• blog de Randy Drisgill http://blog.drisgill.com/
  

• Blog NothingButSharepoint (customisation de css)http://www.nothingbutsharepoint.com/2013/05/02/understanding-sharepoint-csslink-and-how-to-add-your-custom-css-in-sharepoint-2010-aspx/