Ce post s'intègre dans une série qui parle de 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 deuxième post qui évoque comment faire ,via les CSS, pour customiser SharePoint à cette URL.
Une fois que vous avez acquis et maitrisé tout cette connaissance (cf articles précédents) , il va falloir la mettre en pratique et mettre les mains dans le cambouis ! Pour me faciliter la tâche, voici les divers outils que j'utilise
- Sous Firefox
- Firebug : Je l'utilise, entre autre, pour ses fonctionnalités permettant d'identifier facilement les liens d'héritages entre les styles mais aussi pour tout ce qui est JavaScript et analyse des transferts HTTP. Un must quand on travaille sous Firefox.
- Web Developer Toolbar : Un grand classique, à connaitre pour toute les fonctionnalités génériques concernant le resize, cookies, css et images qu'elle possède.
- IE Tab : Personnellement, je ne peux plus m'en passer. Comme on le voit sur l'image ci-dessous, cet addon permet d'avoir un Internet Explorer dans votre Firefox, très pratique pour faire des vérifications de CSS sous les différents browsers en un clic.
- Sous Internet Explorer
- IE Developer Toolbar : C'est très rare de ne pas la voir installée par défaut sur toutes les VPC sur lesquelles j'ai pu travailler. Un outil indispensable!
- Fidller : Je ne l'utilise pas quand je travaille sous Firefox mais je pourrais puisque cet outil n'est pas dépendant d'un browser en particulier. Il permet d'analyse et de réagir (break point) sur tout les transferts HTTP entre votre ordinateur et Internet. Extensible via un développement .NET, c'est un excellent outil et une référence en la matière.
Finalement, si vous n'avez pas envie d'installer tout ça sur vos VPC, il reste une solution qui est certes moins performante mais qui à le mérite se mettre en place via un simple "copier-coller". (Solution proposée par John Holliday qui s'appuie sur un article de la MSDN)
Voilà la marche à suivre pour savoir rapidement de quel style dépend un élément de votre site :
- Ajoutez une Content Editor Web Part, ouvrez le Source Editor et copier-coller le code suivant
<script language="jscript">
function ClassInfo()
{
if (window.event.srcElement.className != null)
{
stsclass.innerText = window.event.srcElement.className;
}
else
{
stsclass.innerText = "";
}
}
window.document.body.onmouseover = ClassInfo;
</script>
<div style="border-style: solid; border-width: 1px; width: 281px; height: 34px; position: absolute;
left: 286px; top: 41px; z-index: 15; padding-left: 4px; padding-right: 4px; padding-top: 2px;
padding-bottom: 2px; background-color: #EEEEF4">
<p id="stsclasstitle">
<font face="Tahoma" id="Font1">Classname: </font><font face="Tahoma" id="stsclass"> </font>
</p>
</div>
- Vous obtenez maintenant une petite boite grise au milieu de la page qui affiche l'attribut "Class" de l'élément que vous survolez !
- A vous de changer le positionnement de cette boite suivant vos besoins, comme par exemple : position: absolute; left: 100px; top: 0px; z-index:15
Toujours pratique !
Et voilà, cette série sur la customisation se termine, bien évidemment elle ne se veut pas exhaustive et je suis sur que vous avez vos propres outils, techniques, truc et astuces etc. pour travailler avec SharePoint.
N'hesitez pas à m'en faire part via les commentaires, je me ferais un plaisir de les rajouter.
<Philippe/>
