Publishing SharePoint 2010 : ajouter ses propres styles dans l’éditeur de contenu

Lorsque vous déployez un site de publication, le processus normal de personnalisation passe par la page maitre (souvent plusieurs) et la création de gabarits de pages adaptés. Dans la majorité des cas, il est également indispensable de modifier les styles CSS des styles de l’éditeur de contenu pour refléter le style global du site.

Il se peut également que vos utilisateurs aient également besoin de style spécifique à leurs besoins, par exemple un style de paragraphe particulier pour mettre en valeur son contenu :

image_180315B4

Pour ajouter vos propres styles dans le ruban d’édition, l’opération est relativement simple, alors pourquoi s’en passer !

1. Créer son style CSS applicable au contenu avec un nom dont le préfixe est ‘ms-rteStyle-‘ par exemple ms-rteStyle-ZoneImportant

Par exemple :

p.ms-rteStyle-BoiteImportant
{
padding:10px !important;
border-color: #FFC829;
    background-color: #FFF2CC;

    border-width: 5px;
    border-style: solid;
    border-radius: 20px 0px 20px 0px;
    line-height:2;
    width:200px;
    height:200px;
}

2. Ajouter l’attribut –ms-name qui spécifie du nom du style tel qu’il apparaitra dans le ruban d’édition

Par exemple :

p.ms-rteStyle-BoiteImportant
{
-ms-name: »Zone Important »;
padding:10px !important;

}

3. Inclure la référence – si ce n’est pas déjà fait – dans la page maitre

Par exemple (ici avec un déploiement de votre fichier CSS contenant votre définition dans la bibliothèques de style) :

<link rel= »stylesheet » type= »text/css » href= »http://blogs.developpeur.org/Style%20Library/StylesEdition.css » />

Remarque : c’est la dernière définition CSS appliquée au style qui donnera le nom de ce dernier. Si un autre CSS s’applique après celui que vous avez créé et dans lequel vous avez surchargé la définition (par exemple pour avoir une déclinaison de couleur différente spécifique en fonction d’un site), il vous faudra remettre le nom du style (via l’attribut -ms-name: »Titre mon style ») sinon votre thème aura un titre vide !

Et le tour est joué !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.