Cet article vous montre comment modifier le rendu du « Quick Lanch » SharePoint 2010 (menu de lancement rapide).

Le but étant de rendre masqué le second niveau du menu et de l’affiche au survol de premier niveau.

Pour faire simple, avant : 

A la fin de cet article : 

Editer la masterpage du site à l’aide de SharePoint Designer.

Par défaut la masterpage d’un site SharePoint 2010 se nomme v4.master.

Extraire la masterpage et l’ouvrir en mode avancé.

Rechercher les contrôles avec l’id “V4QuickLaunchMenu“

Dans ce contrôle rechercher les attributs StaticDisplayLevels et MaximumDynamicDisplayLevels.

Par défaut le StaticDisplayLevel est configuré sur 2 et le MaximumDynamicDisplayLevels est configuré sur 0.

Modifier les deux attributs à la valeur 1.

Retourner sur votre site SharePoint, le menu est modifié, nous avons le second niveau du menu qui apparait au survol du premier niveau.

Comme vous pouvez le remarquer le fond du second niveau est transparent.

Le fonctionnement des thèmes SharePoint 2010 diffère complètement de la version 2007.

2010 utilise le système de thème Office, néanmoins comme sous 2007 il existe une feuille de style COREV4.CSS (le V4 identifie la version 2010).

Cette feuille de style est quelque peu spécifique, vous y trouverez des commentaires du style

/* [ReplaceColor(themeColor:"Hyperlink")] */

Ces commentaires sont analysés par SharePoint afin d’y faire correspondre les couleurs du thème choisi. Une sorte de compilation a ainsi lieu et génère votre COREv4-XXXXXX.css

La structure HTML du menu généré par SharePoint est la suivante :

Nous allons donc devoir jouer au niveau des balises UL dynamic.

La classe CSS correspondante est donc :

 .s4-ql ul.dynamic {

}

Vous allez me dire d’où sort ce s4-ql ?!

Tout simplement du contrôle SharePoint du menu, voir ci-dessous.

<SharePoint:AspMenu

 id=”V4QuickLaunchMenu”

      runat=”server”

EnableViewState=”false”

DataSourceId=”QuickLaunchSiteMap”

UseSimpleRendering=”true”

UseSeparateCss=”false”

Orientation=”Vertical”

StaticDisplayLevels=”1″

MaximumDynamicDisplayLevels=”1″

 SkipLinkText=”"

CssClass=”s4-ql” />

 Pour ouvrir la feuille de style COREV4.CSS, rendez-vous dans le dossier 14 (par défaut : C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14) puis naviguez dans “TEMPLATE\LAYOUTS\1036\STYLES\Themable”. Vous trouverez le fichier COREV4.CSS. Attention le 1036 correspond à une installation française de SharePoint, voici un tableau recensant les différentes possibilitées http://msdn.microsoft.com/en-us/goglobal/bb964664.

Il nous reste maintenant à rechercher qu’elles sont les codes couleurs à appliquer. Pour vous éviter de chercher :

Ajouter donc cette classe CSS à la fin de votre fichier COREV4.css

.s4-ql ul.dynamic{

/* [ReplaceColor(themeColor:"Light2")] */ background-color:#f2f9fc;

/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border:1px solid #f1f1f2;

}

Enregistrer le fichier COREV4.CSS.

Et surtout réappliquer un nouveau thème afin que ce fichier soit réappelé afin de générer le fichier COREV4_XXXX.CSS.

Et voilà

Note : Les modifications sur les fichiers dîts “Systèmes” dans notre cas le COREV4.css sont à éviter au maximum. Un patch pourrait venir écraser ces fichiers. Source : http://kouilb.wordpress.com/2010/10/20/menu-de-lancement-rapide-dynamique-sur-sharepoint-2010/

Centre de recherche

minimal.master

Insert the following :

<div id="s4-topheader2" class="s4-pr s4-notdlg">

     <a name="startNavigation"></a>

     <div class="s4-rp s4-app">

     </div>

     <div class="s4-lp s4-toplinks">

      <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">

        <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">

 <SharePoint:AspMenu

   ID="TopNavigationMenuV4"

   Runat="server"

   EnableViewState="false"

   DataSourceID="topSiteMap"

   AccessKey="<%$Resources:wss,navigation_accesskey%>"

   UseSimpleRendering="true"

   UseSeparateCss="false"

   Orientation="Horizontal"

   StaticDisplayLevels="2"

   MaximumDynamicDisplayLevels="1"

   SkipLinkText=""

   CssClass="s4-tn"/>

 <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">

  <Template_Controls>

   <asp:SiteMapDataSource

     ShowStartingNode="False"

     SiteMapProvider="SPNavigationProvider"

     id="topSiteMap"

     runat="server"

     StartingNodeUrl="sid:1002"/>

  </Template_Controls>

 </SharePoint:DelegateControl>

        </asp:ContentPlaceHolder>

      </asp:ContentPlaceHolder>

     </div>

    </div>