Akkordeon Style änder/anpassen

[Barbar1902]

Liebe Community

Ich möchte gerne das Akkordeon so anpasen das jedes zweite im geschlossenden Zustand ein grauer balken als hintergrund hat so das man es besser unterscheiden kann.
Leider habe ich keine Ahnung vom abäbändern, in diesem Bereich, habe aber herausgefunden das es wohl über diesen Text sein muss. Kann mir das jemand gerade so anpassen?


http://www.barbara-club.ch/index.php/zeedel-100.html

Danke vielmals
Gruss Lukas

<script>
  (function($) {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        display: -1, // -1, alle Akkordions sind am Anfang eingeklappt
        alwaysHide: true,
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
      $$('div.toggler').each(function(el) {
        el.setProperty('role', 'tab');
        el.setProperty('tabindex', 0);
        el.addEvents({
          'keypress': function(event) {
            if (event.code == 13) {
              this.fireEvent('click');
            }
          },
          'focus': function() {
            this.addClass('hover');
          },
          'blur': function() {
            this.removeClass('hover');
          },
          'mouseenter': function() {
            this.addClass('hover');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.ce_accordion').each(function(el) {
        el.setProperty('role', 'tablist');
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })(document.id);
</script> 

[tblumrich]

Hi.

Ich würde da nicht im Template rum hantieren.
Nutze CSS - in diesem Fall vielleicht nth-child - darf man mittlerweile aufgrund der Verbreitung moderner Browser durchaus machen...
http://wiki.selfhtml.org/wiki/CSS/Se...asse/nth-child

Gruß
Thomas

[Barbar1902]

Besten Dank für die schnelle Antowort.
Wie...Wo und in welcher Datei usw... muss ich dies den anpassen, habe leider sehr wennig Ahnung davon?
Würde imch sehr freuen über eine ausführliche erklärung.

Gruss Lukas

[tblumrich]

Z.B. in deinem CSS.

.ce_accordion:nth-child(odd) .toggler {background:#CCC;}

Aber... mit "sehr wenig Ahnung davon" wirst du bei Contao nicht weit kommen. Insofern solltest du dir vielleicht erst mal Grundsätzliches zu Contao und allgemein CSS zur Gemüte führen?!

Gruß
Thomas

[Barbar1902]

Besten Dank
Die ist mir bewust das es sehr schwer ist aber bis jetzt habe ich mich sehr gut geschlagen, daher decke ich bekomme auch noch mit hilfe diese kleinen dinge hin.

Muss ich dies im "blue_business @media screen" einen neuen CSS erstellen oder dort drin etwas anpassen...
verstehe deine kurzaussage nicht direkt, ausser das ich es im CSS ändern soll mit dem

.ce_accordion:nth-child(odd) .toggler {background:#CCC;}

[tblumrich]

Das meine ich ja... hier wird keiner viel Freude haben, selbst Basiswissen vermitteln zu müssen, wo du z.B. in Contao dein CSS editierst (abgesehen davon das es mehrere Möglichkeiten gibt).
Das sind Essentials - ohne das man das versteht, macht Contao keinen Sinn. Ist nicht Böse gemeint.

Ich weiß nicht wie dein CSS bzw. die Bearbeitung bei dir aussieht. Auf jeden Fall musst du das dort eingeben.

Themes -> CSS -> Deine-Stylesheet-Datei bearbeiten -> Selektor

.ce_accordion:nth-child(odd) .toggler

eingeben -> Hintergundfarbe eingeben -> Speichern

Gruß
Thomas