YAML 31 nav_slidingdoor.css

Hallo Forumgemeinde,

ich bin so ziemlich am Ende mit meinem Latein. Ich benutze für meine Templates YAML und TV. Bei der neusten Version von YAML (31) hat sich ja wieder einiges getan (was auch gut so ist). Allerdings komme ich bei dem Menü "slidingdoor" nicht weiter. Die IDs wurden in CSS-Klassen umgewandelt und ich habe keine Ahnung, wie ich diese CSS-Klassen mit TypoScript ansprechen kann, so dass es funktioniert. Momentan wird das Menü zwar dargestellt, aber der Aktiv-Modus nicht.

------>
Ich habe gerade im YAML-Forum gelesen, dass das nav_vlist.css das gleiche Probleme in Typo3 hervorruft wie das slidingdoor.css. Wenns interessiert -> http://forum.yaml.de/index.php?topic=672.0
<------

Kann mir jemand von euch das TS hier posten? Wäre echt super! 😃

Hier mal das CSS:

@charset "UTF-8";
/**
 * (en) Horizontal list navigation based on "Sliding Door II" from von "A List Apart"
 * (de) Horizontale Navigationsliste basierend auf "Sliding Door II" von "A List Apart"
 *
 */

@media all
{
  .hlist {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist größtenteils transparent */
    background: transparent url("images/sliding_door/round/bg.gif") repeat-x bottom;
    float: left;
    width: 100%;
  }

  .hlist ul {
    line-height: 1em;
    list-style: none;
    margin: 0;
    padding: 0 0 0 159px; /* LTR */
    white-space: nowrap;
  }

  .hlist li {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    list-style-type: none !important;
    background: #e0ecf8 url("images/sliding_door/round/left.png") no-repeat top left;
    border-bottom: 1px solid #0094cf;
    float: left; /* LTR */
    margin: 0 1px 0 1px;
    padding: 0 0 0 3px;
  }

  .hlist a,
  .hlist strong {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist größtenteils transparent */
    background: transparent url("images/sliding_door/round/right.png") no-repeat top right;
    color: #667;
    display: block;
    font-weight: normal;
    padding: 5px 11px 3px 8px;
    text-decoration: none;
    text-transform: none;

    /**
     * @bugfix
     * @affected   IE5.x, IE6
     * @css-for    all browsers
     * @valid      yes
     */
    width: auto; /* only IE 5.x */
    width/**/:/**/ .1em; /* only IE 6.0 */
  }

  .hlist a:link,
  .hlist a:visited { background-color: transparent; color: #cc6600; }

  /**
   * @bugfix
   * @affected   IE5.x, IE6
   * @css-for    all browsers
   * @valid      yes
   */
  .hlist > ul a,
  .hlist > ul strong { width: auto; }  /* for other browsers */

  .hlist ul li:focus,
  .hlist ul li:hover,
  .hlist ul li:active {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background-color: #c4d0dc;
    background-position: 0 -150px;
  }

  .hlist li:focus a,
  .hlist li:hover a,
  .hlist li:active a { background-position: 100% -150px; }

  .hlist a:focus,
  .hlist a:hover,
  .hlist a:active { background-color: transparent; color: #ee0000;text-decoration:none; }

  .hlist li.active,
  .hlist ul li.active:focus,
  .hlist ul li.active:hover,
  .hlist ul li.active:active {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: white url("images/sliding_door/round/left_on.png") no-repeat top left;
    border: 0 none;
  }

  .hlist li.active strong {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist größtenteils transparent */
    background: transparent url("images/sliding_door/round/right_on.png") no-repeat top right;
    color: #0099cc;
    font-weight: bold;
    padding-bottom: 4px;
    padding-top: 5px;
  }

}

und hier mein TS

lib.mainnav = HMENU
lib.mainnav {
wrap = <div class="hlist">|</div>
special = directory
// Die Seiten-IDs an die eigene Website anpassen
special.value = 4
1 = TMENU
1 {
noBlur = 1
accessKey = 1
wrap = <ul>|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // subtitle
stdWrap.htmlSpecialChars = 1
allWrap = <li>|</li>
linkWrap = <span>|</span>
allWrap.insertData = 1
ATagBeforeWrap = 1

}
CUR < .NO
CUR.allWrap = <li class="active">|</li>
}
}