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 ?
- Ne le faites pas seul !!
- 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.
- Commencez par consulter la "SharePoint 2007 CSS Reference Chart" d'Heather Solomon (une sommité en matière de design SharePoint)
- 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.
- 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).
- 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 :
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/>
