[SharePoint 2010] Distinguer le mode Edit du mode Display en CSS

Nous avons tous déjà été confronté lors d’une intégration graphique de distinguer le mode Display, du mode Edit dans sa Master Page.

En effet, lorsque nous passons en mode Edit, nous avons des nouvelles zones qui apparaissent afin d’y ajouter nos composant WebParts, des zones complètement dynamiques et mobiles dans la page.

SI vous avez fixé des contrôles, ou encore des contenus statiques, vous allez vite voir que vos différentes zones vont se placer un peu n’importe comment…

Nous pouvons charger une MasterPage différente entre le Front et le Back Office, mais il n’y à rien qui distingue le mode Display du mode Edit.

J’ai 2 solutions à vous proposez :

Version C# :

Il est par contre très facile de savoir via votre code behind si nous sommes dans l’un où l’autre mode, il suffit donc de référencer un control dans votre Master et de rajouter ce bout de code afin de charger un CSS différents en mode Edit :

if (wp.DisplayMode != WebPartManager.BrowseDisplayMode)
{
   CssRegistration.Register(@"/Style%20Library/CssEditMode.css");
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, « Courier New », courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Simple et efficace, vous n’avez plus qu’a override les classes CSS nécessaires.

Version JS:

Encore plus simple et qui ne nécessite aucun contrôle. Vous pouvez rajouter ce bout de code Jquery, qui va ajouter à votre body, une classe “edit-mode”. Il suffira de l’ajouter dans votre CSS pour faire vos différents changements.

if ($('.ms-ToolPaneOuter').length > 0 || $('.ms-SPZone').length > 0) {
    $('body').addClass('edit-mode');
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, « Courier New », courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Et voilà, à vos CSS maintenant !

Publicité

Étiquettes : EditMode; CSS; WebPartManager