Lancement rapide dynamique sur SharePoint 2010


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 : 

 

Modification de la MasterPage

 

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.

 

Modification du style CSS

 

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.

Publicités

3 Responses to Lancement rapide dynamique sur SharePoint 2010

  1. Bastien says:

    Salutation^^

    En premier lieu, je tiens a te féliciter et te remercier pour ce post! c’est le seul que j’ai trouvé pour faire cela…

    Malheureusement, je n’arrive pas à en venir à bout…
    la modif de ma master page : pas de soucis
    ensuite le menu est bien modifié, mais le fond n’a jamais été transparent! :s il reste gris/marron (tres moche)
    seul la bordure s’affiche avec la bonne couleure…
    apres différent test, j’ai l’impression que la ligne
    /* [ReplaceColor(themeColor: »Light2″)] */ background-color:#f2f9fc;
    n’est pas prise en compte… j’ai beau mettre n’importe quelle valeure…. le fond reste marron!
    je peut juste modifier l’épaisseur ( border)
    peut tu m’aider???

    • Bonjour,

      Je viens de modifier un petit peu la procédure. Peux-tu essayer en ouvrant le fichier COREV4.css en cliquant sur la classe s4-sql.

      Merci.

      Damien.

    • Nehoc says:

      Pour que cela Marche , il faut changer de theme …
      Car a chaque changement de theme , une copie de CoreV4.Css est utilisé pour genrere le CoreV4_xxxx.Css.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :