"Websites erstellen mit Contao 3" Akkordeon zusätzliches Stylsheet Seite 318 / 319

[stadix]

Hallo zusammen als Neuling in Contao kämpfe ich mich durch das Buch von Peter Müller. Auf Seite 318 wird eine Erweiterung in das Stylesheet Inhalte aufgelistet
mit dem ein + in dem Akkordeon angezeigt werden soll.

.ce_accordion .toggler {
background: #eee url("plus.gif") no-repeat left center;
padding: 0.25em 0.5em 0.25em 1.5em; }

Das funktioniert aber nur wenn ich den ganzen Pfad für das gif angebe.

.ce_accordion .toggler {
background: #eee url("files/Beispielsite/themes/themes_one/plus.gif") no-repeat left center;
padding: 0.25em 0.5em 0.25em 1.5em; }

Das selbe ist auch bei dem minus.gif.
Warum findet Contao die gif-Datei nicht obwohl ich die Datenbank synchronisiert habe? Vielleicht kann mir jemand helfen.
Was habe ich falsch gemacht.
Danke im Voraus.

[ciaobello]

Hast Du beim Theme (gelber Stift) den Pfad angegeben resp. die Ordner welche zu dem Theme gehören ausgewählt?
Ich kann mir vorstellen das Contao ohne diese Info nicht weiss wo zu suchen. Ist reine Spekulation ... bitte ausprobieren.

[tab]

Ich habs gerade mal bei mir probiert, hatte doch tatsächlich den Ordner auch nicht angegeben und jetzt nachgeholt . Bei mir ändert sich dadurch aber nichts, wenn ich nur den reinen Dateinamen eingebe, wird die Grafik nicht angezeigt. Wähle ich die Datei über den entsprechenden Button "Dateien auswählen" im internen CSS-Editor, dann wird ebenfalls der gesamte Pfad angezeigt, obwohl die ausgewählte Datei im zugewiesenen Ordner des Themes liegt. Macht eigentlich auch Sinn, zumindest im ausgelieferten CSS sollte der Pfad jedenfalls drinstehen .
Ist lustig, habe ich gar nicht gemerkt bisher, wahrscheinlich merkt man den fehlenden Ordner erst dann wirklich, wenn man das Theme exportiert und woanders importiert.

Eventuell liegt der Unterschied - zumindest bei mir - auch an der Contao-Version. Im Changelog zur Version 3.1.beta1 steht was von einer Änderung am file picker,

The file picker now shows the file system instead of the database

. Vielleicht liegts da dran. Mein Test gerade eben war jedenfalls mit 3.1.5, das Buch basiert noch auf 3.0.x.

[stadix]

Ich bin doch sehr freudig überrascht wie schnell man hier Antwort und damit auch Hilfe bekommt. Danke.
Habe das überprüft und der Haken für den Ordner mit den Bildern war gesetzt. Das war es leider nicht.
Hat sonst noch jemand eine Idee wo ich auf dem Holzweg bin!!!

[tab]

Welche Contao-Version benutzt du? Die von der Buch-CD oder eine neuere? Es ändern sich immer mal wieder einige Dinge und seit der Buchversion ist schon einiges geändert worden. Man kann auch nie ausschliessen, dass sich im Buch ein noch nicht entdecktes Fehlerchen eingeschlichen hat. In der Liste auf der Buch-Homepage steht dazu nämlich (noch?) nichts.

[stadix]

Ich habe 3.1.2 installiert, also nicht die vom Buch. Ja in der Err.data hatte ich auch nachgesehen und nichts gefunden. Mich würde halt interessieren ob ich einen Fehler gemacht habe oder ob es etwas anderes ist. Wäre halt schon flexibler, wenn man den Pfad nicht angeben müsste.

[tab]

Geh mal davon aus, dass du keinen Fehler gemacht hast und dass es möglicherweise in der "Buchversion" von Contao noch tatsächlich so war wie im Buch beschrieben. Wie bereits geschrieben, steht im Changelog zur 3.1.beta1 was "verdächtiges" drin, was möglicherweise zu diesem Unterschied führen könnte. Das wäre ggf in deiner noch späteren Version 3.1.2 dann eben auch anders als in der Buchversion.

[xchs]

@stadix: Verwendest Du interne oder externe Stylesheets? Davon hängt es nämlich ab, wie die Pfadangaben im Style gesetzt werden müssen. Im Buch wird auf Seite 318 auf diesen Umstand hingewiesen:

Bei externen Stylesheets müssen Sie in Listing 11.7 die Pfadangaben für die beiden Grafiken gegebenenfalls anpassen [...]

Laut Deinem oben angeführten Style

.ce_accordion .toggler {
background: #eee url("files/Beispielsite/themes/themes_one/plus.gif") no-repeat left center;
padding: 0.25em 0.5em 0.25em 1.5em; }

müsste sich Dein Stylesheet eigentlich im Contao Hauptverzeichnis befinden. In Contao 3 ist das aber standardmäßig nicht der Fall – außer natürlich man legt die Datei selbst dort ab und bindet es als externes Stylesheet ein.

[stadix]

Ich gehe davon aus, dass ich ein internes Stylesheet habe.
-> Layout -> Themes -> CSS -> Inhalt @media.screen -> dann neue Formatdefinition usw........

So ist das mit den Neulingen, die sind sich halt nicht sicher.
Danke für die Hilfe.

[xchs]

Okay. In der generierten, zusammengefassten Stylesheet-Datei müsste dann aber bei Dir der Pfad so lauten:

../../files/Beispielsite/themes/themes_one/plus.gif

Über den FilePicker im Backend-Modul "Stylesheets" wird auf jeden Fall der komplette Pfad in die entsprechende Eingabemaske eingetragen.

[tab]

Ja, das kann ich bestätigen, habe mir das ausgelieferte css angeschaut und der Pfad steht natürlich tatsächlich so drin, also wie es sein muss, relativ zum Verzeichnis in dem die css-Datei liegt. Im internen CSS-Editor sieht man aber nur "files/...". Das "../../" setzt Contao dann beim erzeugen der zusammengefassten Datei wohl noch davor.

[pmmueller]

Zur Ergänzung vielleicht noch: Pfadangaben in einem Stylesheet sind immer relativ zur Stylesheet-Datei. Interne Stylesheets liegen in assets/css/, daher die Geschichte mit ../../etc.

[stadix]

Vielen Dank an alle die geantwortet haben. Nun ist mir klar warum wieso und so habe ich als Neuling wieder was gelernt und dafür danke ich euch.
Schöne Tage und bis bald.

[chebar]

Vielen Dank an alle die geantwortet haben. Nun ist mir klar warum wieso und so habe ich als Neuling wieder was gelernt und dafür danke ich euch.
Schöne Tage und bis bald.

Hallo Stadix,

bin hier ebenfalls Neuling und hänge auf den o.g. Seiten fest. Du scheinst verstanden zu haben, was bei Dir das Problem war.

Nachdem ich diesen thread gelesen habe ist mir das aber immer noch nicht klar. :-(

Ich habe ein internes Stylesheet und alles, so wie im Buch beschrieben, gemacht. Passiert ist nix.

Was muss ich anders machen damit das plus und das minus gif angezeigt wird ??

Vielen Dank im Voraus

Grüße Cherin

Version 3.0.0

[pmmueller]

Was muss ich anders machen damit das plus und das minus gif angezeigt wird ??

Kurze Antwort: CSS lernen

Da das ein bisschen länger dauert, hier eine konkrete Anweisung.

Wenn eine Grafik nicht angezeigt aber definitiv vorhanden ist, stimmt meistens die Wegbeschreibung nicht. Pfadangaben in einem Stylesheet sind wie oben erwähnt immer relativ zur Stylesheet-Datei. Interne Stylesheets liegen in assets/css/, deine Grafikdateien wahrscheinlich in files/themes/theme_one.

Aus Sicht des Stylesheets lautet der Pfad im CSS dann ../../files/themes/themes_one/plus.gif.

Hilfe zur Selbsthilfe
- Surfe zur Beispielsite mit den Akkordeons: http://beispielsite.contaobuch.de/weitere-elemente.html.
- Klicke im Browser mit rechts auf eine Plus/Minus-Grafik und wähle im Kontextmenü "Element untersuchen".
- Schaue dir im Entwicklertool des Browsers das CSS an. Dort siehst du auch eine solche Pfadangabe.

Falls es mit dieser Anleitung klappt - wunderbar. Falls nicht, kommen wir ohne einen Link zur Beispielseite nicht weiter.

Aber das alles ändert nichts daran, dass du auf Dauer CSS lernen musst

[chebar]

Vielen Dank Peter,

mir war wohl grundsätzlich einfach nicht klar, dass es sich hierbei um ein externes Stylesheet handelt

und deshalb der Pfad manuell angepasst werden muss.

Auf Seite 199 steht das dann wohl 7.6.2

Beste Grüße

Cherin

[Oppa]

Hallo Peter, da bin ich wieder. In deinem Buch steht als Selektor: ".ce_accordion .toggler .active".
Als HTML-Text wird aber generiert:

<section class="ce_accordionSingle first ce_accordion ce_text block">

  <div class="toggler">
    <h2>DM Gespannpflügen</h2>  </div>

  <div class="accordion"><div>

          <h2><a href="index.php/id-2010.html">DM 2010</a></h2>
<h2><a href="index.php/id-2012.html">DM 2012</a></h2>
<h2><a href="index.php/dm_2014.html">DM 2014</a></h2>    
</div></div>
</section>

Siehe: http://fitznerweb.org/contao/index.php/startseite.html.
Das Problem ist, das bei einem einzelnen Akkordion kein "activ" angezeigt wird, sondern nur der Text, bei mir bestehend aus Links. Daher kann die im Buch beschriebene Variante nicht gehen. Bei aktivem Akkordion sollte der Pfeil nach oben angezeigt werden. Sähe aber hübscher aus. Könnte es dafür eine Lösung geben?
Gruß aus Bredow,

Klaus-Peter

[tab]

Welche Contao-Version benutzt du denn hier? Im Buch wurde ja 3.0.x (3.0.2?, muss mal auf die CD schauen verwendet. Also in der aktuellen LTS Version zumindest sollte der Selektor noch funktionieren, zumindest habe ich ihn so im Einsatz und das "plus" und "minus" funktioniert. Allerdings lautet der Selektor
".ce_accordion .toggler.active" - ohne Leerzeichen zwischen den Klassen - und nicht ".ce_accordion .toggler .active"

[pmmueller]

Das .active siehst du nur, wenn das Akkordeon ausgeklappt ist:

<div class="toggler active" aria-expanded="true" role="tab" tabindex="0">
    <h2>DM Gespannpflügen</h2>  </div>

Aber die beiden Klassennamen müssen im CSS wie tab schon sagte ohne Leerstelle gelistet sein: .toggler.active.

[Oppa]

Hallo Peter,

nachdem ich das Leerzeichen entfernt habe, funktioniert es. Aber das class="toggler active" erscheint bei mir trotzdem nicht. Nachdem ich eine Box auf der Seite http://little-boxes.de/ aufgeklappt habe und mir danach den Quelltext angesehen habe, habe ich diese Sequenz auch nicht gefunden. Kann es sein, das die Steuerung durch die Seite selbst erfolgt, da der Quelltext der Funktion "new Fx.Accordion" auf jeder Seite ganz unten steht? Oder liegt es am IE? Probier ich gleich mal aus.

Ja, beim Ansehen des Quelltextes mit IE sehe ich kein ""toggler active", nur beim Ansehen des Quellcodes mit Firefox.

Vielen Dank,

Klaus-Peter

[tab]

Ist bei meinem alten IE 9 auch so. Allerdings steht da auch "Ursprünglicher Quellcode", wenn ich den Quellcode anzeigen lasse. Also wohl der Code, so wie er vom Server ausgeliefert wurde. Alles, was lokal durch Javascript oder auch MooTools verändert wird, wird hier nicht nachgeführt. In den Entwicklertools (F12) kann man es allerdings nachvollziehen, da sieht man den aktuellen Zustand und somit auch das "toggler active".