design

Office 365 / toutes les tailles d’images

Citation Publié le Mis à jour le

Bonjour,

Je dresse ici pour mémoire et pour tout ceux qui ont un besoin de customisation toutes les tailles des images dans Office 365, classés par outil. J’ai également ajouté les liens pour savoir comment et où les modifier.

Office 365

Thème du bandeau haut

Voici comment le modifier

O365_theme_logo_200X30Logo bandeau haut : 200 x 30 pixels au format JPG, PNG ou GIF, et taille inférieure à 10 Ko

O365_bandeau_theme_1366x50Image de thème : 1366 x 50 pixels ou moins au format JPG, PNG ou GIF, et taille inférieure à 15 Ko

Votre photo de profil

Cliquez ici pour savoir comment la modifier.

Barre de lancement rapide

Cliquez ici pour savoir comment ajouter une apps dans le lanceur.

0365_applaucnher_icon_60x60.png

Icone dans le lanceur d’application : png transparent 60 x 60 pixels

Sharepoint

SP_icon_180X64

Icone de site par défaut : 180 x 64 pixels

SP_PersonPlaceholder_96x96

Résultat de recherche de personne : 96 x 96 pixels

A suivre ….

Publicités

Cette entrée a été publiée dans design, Office 365, overview et taguée .

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

Cette entrée a été publiée dans design et taguée , .