none
css et table of content web part RRS feed

  • Question

  •  

    Bonjour,

     

    voilà, j'ai un petit soucis et voici le décors :

     

    On a un plan de notre site construit avec une table of content web part.

    On a un design imposé et donc on a définis dans LevelStyle.xsl nos niveaux dont voici un exemple :

     

    <xsl:template name="NomacorcSALevel_1" match="Level[@LevelTemplate='NomacorcSALevel_1']">
        <xsl:variable name="LevelIndent" select="(number(@LevelNumber)-number(1))*number(14)+number(4)"></xsl:variable>
        <xsl:variable name="LeafIndent" select="$LevelIndent+6"></xsl:variable>
        <xsl:variable name="LeafIndentWithBullet" select="$LevelIndent+14"></xsl:variable>
        <div class="level-section">
          <div style="margin-{$Alignment}:{$LevelIndent};">
     <div class="Navigation_level1">
                <xsl:choose>
                  <xsl:when test='string-length(@Path) > 0'>
      <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">         
                      <xsl:value-of select="@Title"/>
      </a>                 
                  </xsl:when>
                  <xslSurprisetherwise>
                    <xsl:value-of select="@Title"/>
                  </xslSurprisetherwise>
                </xsl:choose>    
     </div>
            <xsl:for-each select="child::Item">
                  <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">
                    <xsl:value-of select="@Title"/>
                  </a>
            </xsl:for-each>
          </div>
        </div>
      </xsl:template>

     

    Ensuite on a fait correspondre ces niveaux avec la web part (on a 3 niveaux).

     

    Dans la feuille de style on des class qui définissent la couleur du texte etc...

     

    Tout fonctionne bien sauf notre lien boite à suggestion qui en fait est un lien qui pointe sur un une NewForm.aspx (avec un paramètre après qui réféfence la bonne liste).

     

     

    On ne voit pas trop pourquoi ce lien échape à la mise en forme déjà en place.

    On pense qu'il faudrait rajouter qqch dans le XSLT qui permettrais de mettre en forme ce type de lien (une référence à une class de notre CSS dans le XSLT) mais on ne trouve pas d'info particulière sur le liens dans le code source de la page :

     

     <td><img src="/_layouts/images/NomacorcSA/separator.JPG" alt="" /></td>
        </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="zz1_TopTopNavigationMenun36">
         <td><table class="ms-topNavFlyOuts zz1_TopTopNavigationMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td style="white-space:nowrap;width:100%;"><a class="zz1_TopTopNavigationMenu_1 ms-topNavFlyOuts zz1_TopTopNavigationMenu_3" href="/Communication/Activites/Pages/Default.aspx" style="border-style:none;font-size:1em;"><div id='contentdynamicmenu' ><img src='/_layouts/images/NomacorcSA/puc.jpg' border='0'>  Activités ludiques</div></a></td>
          </tr>
         </table></td>

     


        </tr><tr>
         <td><img src="/_layouts/images/Folder/separator.JPG" alt="" /></td>
        </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="zz1_TopTopNavigationMenun37">
         <td><table class="ms-topNavFlyOuts zz1_TopTopNavigationMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td style="white-space:nowrap;width:100%;"><a class="zz1_TopTopNavigationMenu_1 ms-topNavFlyOuts zz1_TopTopNavigationMenu_3" href="http://host/Lists/Liste%20de%20suggestions/NewForm.aspx?RootFolder=%2FLists%2FListe%20de%20suggestions" style="border-style:none;font-size:1em;"><div id='contentdynamicmenu' ><img src='/_layouts/images/folder/puc.jpg' border='0'>  Boîte à suggestion</div></a></td>
          </tr>
         </table></td> 

     

    A part les zz1_TopTopNavigatinMenu mais pourquoi aller redefinir qqch dedans vu qu'on a notre propre template dans LevelStyle.Xslt ?

     

    Si qqun sait merci d'avance Smile

    mercredi 30 juillet 2008 10:56

Toutes les réponses

  • Bonjour

    Là, je pense que vous touchez du doigt les doux amusements des feuilles de styles et de l'héritage.

    Vous pouvez effectivement utiliser une classe particulière en modifiant

    <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">         
                      <xsl:value-of select="@Title"/>
      </a> 

    pour donner

    <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}" class="maclassetoutebelle">         
                      <xsl:value-of select="@Title"/>
      </a> 


    Mais je vous conseillerai d'abord d'installer Firefox si ce n'est pas déjà fait avec Firebug (https://addons.mozilla.org/fr/firefox/addon/1843) ou bien IE avec la Dev Tool Bar (http://www.microsoft.com/DownLoads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en)

    Ces outils devraient vous permettre d'y voir plus clair dans l'application des styles et leur imbrication, voire d'éditer pour tester les modifications possibles.

    Bon courage
    mercredi 30 juillet 2008 14:56
  • Bonjour,

     

    j'ai essayé cette méthode mais c'est sans effet. Pourtant le reste du site fonctionne comme ça (on rajoute une balise div="maclasse" dans les webpart d'édition ou dans la content query webpart et on a obtenu un bon résultat.

     

    Le problème c'est vraiment ce lien. J'avoue que moi je me sens moins a l'aise la dedans, c'est surtout l'autre étudiant qui s'est chargé de tout cela.

     

    néamoins, je me demande si ce n'est pas à cause de la façon de définir la class dans le css, pour le moment j'ai ceci :

     

     

    Code Snippet

    /** pour le texte ***/
    table#textetable{
     border-width:1px;
     border-style:solid;
     border-color:#9e9fa3;
    }
    table#textetable td{
     border-width:1px;
     border-style:solid;
     border-color:#9e9fa3;
    }

    div#textecentral_image
    {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-size:12px;
     color:black;
    }
    div#textecentral_image a
    {
     display:block;
    }

    div#textecentral
    {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-size:12px;
     color:black;
    }

     

    div#textecentral a
    {
     color:#555459;
     text-decoration:underline;
    }
    div#textecentral a:hover
    {
     color:#940023;
    }
    div#textecentral a:visited
    {
     color:#555459;
     text-decoration:underline;
    }

    div#textecentral ul li a
    {
     color:#555459;
     text-decoration:underline;
    }
    div#textecentral ul li a:hover
    {
     color:#940023;
    }
    div#textecentral ul li a:visited
    {
     color:#555459;
     text-decoration:underline;
    }

     

     

    Donc je comprend ce que ça fait, mais je me demande si en fait pour le liens qui nous intéresse et bien il n'y aie pas de textecentral qui lui corresponde ?

     

    j'ai essayé de rajouter

     

    a#textecentral
    {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-size:12px;
     color:black;
    }

     

    mais toujours sans effet Sad

    jeudi 31 juillet 2008 07:20
  • Tentez vraiment l'approche avec Firebug, vous verrez alors ce qui est concrètement appliqué à votre lien, vous pourrez ainsi reprendre la même syntaxe mais en spécifiant vos styles.

    Les multiples héritages et parfois interprétations des navigateurs peuvent rendre
    la compréhension des styles très difficile.

    Bon courage
    jeudi 31 juillet 2008 11:58
  • C'est vrai que c'est pas mal ce tool j'ai prit IE Dev, le select with click est terrible.

     

    Mais apparement moi j'ai fais mon boulot, j'ai la bonne class sur mon texte, c'est juste qu'il ne le prend pas Sad

     

     

    a mon avis je vais laisser tomber ce liens et décocher l'option "show pages" de la web part table of content parce que là je vois pas trop quoi faire d'autre pour appliquer mon style à ce lien Sad

     

    Merci quand même  Smile
    jeudi 31 juillet 2008 12:39
  • Je sais que j'ai utilisé firebug pour l'autre sujet sur le forum sur la couleur du menu "Actions du site" et j'ai trouvé aussitôt où était défini le style => hop, insertion de son style et modification de la couleur.

    Je pense que Firebug reste plus puissant que IE Dev Toolbar, avez-vous la possibilité de le tester ?
    jeudi 31 juillet 2008 13:44
  • Oui j'ai fais le même test que vous en lisant votre réponse Smile

     

    Oui je peux tester (c'est juste qu'on évite FF ici parce que le layout plante complètement avec FF )

     

    voici ce que cela donne :

     

     

    Si vous y voyez plus clair que moi n'hésitez pas à me le dire Stick out tongue

    jeudi 31 juillet 2008 13:58
  • Bonjour

    Les styles barrés sont ceux qui sont surchargés par d'autres (ceux qui ne sont donc pas barrés).

    Il faudrait alors tester directement les modifs, mais p-e que cette ligne suffira (vous aviez presque ca avant sauf que personnellement je l'écrirai ainsi) :

    #textecentral a
    {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-size:12px;
     color:black;
    }


    Vérifiez aussi s'il ne faut pas rajouter les a:link, a:visited.
    jeudi 31 juillet 2008 20:16
  • Bonjour,

     

    j'ai donc essayé comme indiqué :

     

    /*test*/

    #textecentral a
    {

     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-size:12px;
     /*color[:#]555459;*/
     color:fuchsia;
    }

    #textecentral a:visited
    {
     /*color[:#]555459;*/
     color:lime;
     text-decoration:underline;
    }

    #textecentral a:link
    {
     /*color[:#]940023;*/
     colorSurpriserange;
    }

     

    Mais il ne prend pas mes superbes coleurs !

    Quand on regarde de plus près avec firebug, en fait mes styles.css ne sont pas prit en compte Tongue Tied il n'y a que le core.css qui a la main !

     

    je me perd de plus en plus Tongue Tied

     

     

     

    EDIT: par contre ça fonctionne mais ailleur (effet de bord) :

    vendredi 1 août 2008 07:17