SharePoint 2007 : Navigateurs Web, Css et Outils pour customiser le look de SharePoint (Partie 2)

Ce post s'intègre dans une série qui évoque la customisation de SharePoint, vous retrouverez le premier qui traite des niveaux de compatibilités de différents browsers avec SharePoint à cette URL et le dernier post qui évoque les divers outils utiles pour "travailler" le look and feel de SharePoint à cette URL.

Concernant les styles CSS, par où pensez vous commencer si en tant que "SharePointeur", on vous demande un site SharePoint qui ressemble à ça ?

  1. Ne le faites pas seul !!
  2. Faites appel à un designer qui vous fera votre maquette HTML + CSS :)

La vrai question étant : Comment intégrer les styles de la maquette en question à votre site SharePoint ?

Il va falloir surcharger de nombreux styles SharePoint mais lesquels ? le fichier Core.css (qui contient la plupart des styles de votre site) fait plus de 4300 lignes !!!

Mais pas de panique, la communauté SharePoint est très active sur ce sujet et je vais vous indiquer comment simplifier tout le processus.

  1. Commencez par consulter la "SharePoint 2007 CSS Reference Chart" d'Heather Solomon (une sommité en matière de design SharePoint)
  2. Lisez bien l'article d'Heather sur la manière dont les styles sont agencés via la master page dont voici une "traduction/résumé" rapide:

Pour rajouter un ou plusieurs fichier(s) CSS, vous êtes censé rajouter ces types d'éléments dans votre master page :

    <SharePoint:CssRegistration runat="server" ... />
    <SharePoint:CssLink  runat="server"/>

    • Si votre master page lie un fichier CSS, le fichier sera appelé AVANT Core.css.
    • Si votre master page lie un fichier CSS et que Core.css a été ungosthé (customisé via SharePoint Désigner) pour le site, votre fichier CSS sera appelé APRES Core.css.
    • Si vous spécifié un fichier CSS dans la page de configuration de master page (Site Actions/Site Settings/Master Page), ce fichier sera appelé APRES Core.css mais les surcharge de styles et les nouveaux styles seront appliqués au pages _layouts.
    • Les styles listés ou liés dans le PlaceHolderAdditionalPageHead seront appelé APRES Core.css. Le problème, c'est qu'il va falloir lister vos styles dans toutes vos pages layouts que vous allez créer.
    • Les styles listés ou liés (via le tag STYLE) seront appelés APRES tout les liens vers des fichiers CSS y compris Core.css.  Comme ceci :

    <style type="text/css">

      @import url(/styles/tyu.css);

      @import url(/styles/poi.css);

      .nav2 a:link, .nav2 a:visited { color:#626469;}

    </style>

    • Les master pages déployées via une feature appelleront Core.css APRES votre fichier CSS.

Mais il existe une autre possibilité plus propre (à mon humble avis) énoncé par Michael Hoffer qui consiste à réécrire un contrôle qui hérite de CssLink. Le nouveau contrôle prendra en charge le fait d'afficher le Core.css en dernier. On reste ici tout à fait dans l'optique SharePoint sans avoir à utiliser des vieilles astuces pour essayer de contourner un problème.

  1. Consultez la série d'articles écrits par Patrick Tisseghem, sur la customisation et mise en page de site SharePoint basés sur la brique ECM (Entreprise Content Management).
  2. Si vous n'êtes pas fan d'utiliser des tableaux dans vos sites, vous avez toujours la possibilité d'utiliser le "CSS Friendly Control Adapter", un composant venu du monde ASP.Net qui vous permettra de modifier le rendu de vos contrôles. Vous trouverez une description plus complète sur le blog de theMit et aussi un "step-by-step" à cette url .

Si vous avez des problématiques de conformité au XHTML, bon courage ! Par défaut, vous avez environ 200 erreurs avec un site SharePoint sans contenu. Mais pas de panique, ca se règle assez simplement en suivant les conseils de Zac Smith. Après quelques efforts, vous devriez obtenir une page SharePoint de ce style :clip_image002

Je pourrais finir en parlant de SharePoint et des thèmes mais n'étant pas un grand fan de ces derniers , je me permettrais simplement de vous rediriger vers ces liens qui traitent déjà de ce sujet bien mieux que je ne saurais le faire :

A suivre, les outils pour manipuler tout cela :)

<Philippe/>
Publié lundi 30 juillet 2007 08:53 par phil
Classé sous , , ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

About phil

Philippe Sentenac est Consultant SharePoint à Wygwam en région Parisienne. Il intervient essentiellement sur des missions liées à SharePoint (2007 et 2010 ) mais aussi autour du Web 2.0. Plus généralement, il s'intéresse à l'ASP.Net (MVC) , à Silverlight, et à tout ce qui est orienté Web en rapport avec les nouvelles technologies, qu'il pratique depuis 2006. Féru de développement, il est passionné par les problématiques de méthodologies et d'industrialisation du développement.

Les 10 derniers blogs postés

- « Naviguer vers le haut » dans une librairie SharePoint par Blog de Jérémy Jeanson le 10-07-2014, 13:21

- PowerShell: Comment mixer NAGIOS et PowerShell pour le monitoring applicatif par Blog Technique de Romelard Fabrice le 10-07-2014, 11:43

- ReBUILD 2014 : les présentations par Le blog de Patrick [MVP Office 365] le 10-06-2014, 09:15

- II6 Management Compatibility présente dans Windows Server Technical Preview avec IIS8 par Blog de Jérémy Jeanson le 10-05-2014, 17:37

- Soft Restart sur Windows Server Technical Preview par Blog de Jérémy Jeanson le 10-03-2014, 19:43

- Non, le certificat public du CA n’est pas un certificat client !!! par Blog de Jérémy Jeanson le 10-03-2014, 00:08

- Windows Server Technical Preview disponible via MSDN par Blog de Jérémy Jeanson le 10-02-2014, 19:05

- Focus Sauvegardes SharePoint par Le blog de Patrick [MVP Office 365] le 10-02-2014, 13:11

- Technofolies, votre évènement numérique de l'année par Le Blog (Vert) d'Arnaud JUND le 09-26-2014, 18:40

- Xamarin : From Zero to Hero par Fathi Bellahcene le 09-24-2014, 17:35