Customization graphique Sharepoint, quelques points à retenir

Publié le Mis à jour le

Bonjour,

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

Activation, utilisation

snip_20160205160807

  • 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) :

snip_20160205162516

Customization masterpage

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

&amp;amp;amp;amp;lt;SharePoint:CssRegistration name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/css/accueil.css %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; after=&amp;amp;amp;amp;quot;corev4.css&amp;amp;amp;amp;quot;/&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:CssRegistration name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/css/bootstrap.css %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; after=&amp;amp;amp;amp;quot;corev4.css&amp;amp;amp;amp;quot;/&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/jquery/jquery-1.11.3.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/jquery.SPServices/jquery.SPServices-2014.02.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/js/bootstrap.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

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

Publicités

Laissez un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s