Optimist Theme: Riesieger Abstand

[neelix]

Hallo zusammen,

ich suche den Grund für den riesigen Abstand zwischen dem Text- und dem Downloadelement (und wie ich ihn loswerde).
https://dev.luetteraten.de/mitgliedschaft.html
https://dev.luetteraten.de/buchpaten.html

Es muss irgendwie mit dem Formular rechts zusammenhängen, wenn ich das ausblende, ist die Lücke weg. Aber warum?

Danke,

Neelix

[elwega]

schau mal in die Richtung:

    padding-top: var(--article-spacing-top);

[mlweb]

Ich nehme an, du hast das Grid von E+F nicht richtig eingesetzt. Für meinen Geschmack ist da ein verschachteltes

display=grid

zu viel.

[neelix]

Das ist im Prinzip diese Seite:
https://optimist.contao-theme.de/spr.../englisch.html
Sieht im Backend so aus:

Screenshot 2023-04-16 at 14-04-11 Artikel Aktionen Inhaltselemente dev.luetteraten.de.png

[Bennie]

Ja aber in Deinem CSS steht für diese ganzen col- Klassen nochmal display:grid; drin - wie kommt das dahin, wenn Du es nicht selbst eingetragen haben solltest? Im "Original" ist das anscheinend nicht so ( das steht nur grid-column: 1 / -1; )

[neelix]

Ja, wo kommt das her?
Das ist jetzt das Problem mit SCSS. Durch die ganzen Includes sieht man nicht mehr, wo was definiert wird.

[lbableck]

Dafür gibts ja Source Maps, dann sieht man das.

[neelix]

Dafür gibts ja Source Maps, dann sieht man das.

Schön, und wie hilft mir das jetzt?

[lbableck]

Wie wärs mit Debug Modus einschalten und die Source Map benutzen, damit du siehst wo das her kommt?

[neelix]

Hm, jetzt habe ich den Debug-Modus eingeschaltet und erhalte nur noch eine leere Browserseite.

[neelix]

Was will mir das System sagen?

[2023-04-16T21:30:55.096714+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was not able to match, message "" [] []
[2023-04-16T21:30:55.163493+02:00] request.INFO: Matched route "tl_page.2.root". {"route":"tl_page.2.root","route_parameters":{"_token_check":true,"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.2","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.2.root","_route_object":{"Symfony\\Component\\Routing\\Route":[]}},"request_uri":"https://dev.luetteraten.de/","method":"GET"} []
[2023-04-16T21:30:55.176443+02:00] security.INFO: Populated the TokenStorage with an anonymous Token. [] []
[2023-04-16T21:30:55.176967+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was not able to match, message "" [] []
[2023-04-16T21:30:55.259187+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.259855+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.260160+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.260316+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.323796+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.325943+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.327319+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.335895+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.336103+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.336283+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.336866+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.351713+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.351916+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.352077+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.352230+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.354514+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.354681+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.391900+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.392266+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.392570+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []
[2023-04-16T21:30:55.392739+02:00] app.DEBUG: Router Symfony\Bundle\FrameworkBundle\Routing\Router was unable to generate route. Reason: 'Route 'page_routing_object' not found': Unable to generate a URL for the named route "page_routing_object" as such route does not exist. [] []

[neelix]

Mag mir jemand verraten, wie ich hier weiterkomme?

[neelix]

So. Ich habe gerade das Theme nochmal komplett von Grund auf in Version 2.0.2 installiert.

Der Effekt tritt genau dann auf, wenn sich in der ersten Spalte nur ein Textelement befindet und dann das Downloadelement folgt. Packe ich mehr Textelemente vor das Downloadelement, nimmt der Abendstand mit jedem zusätzlichen Element ab.

Ich denke, daher das ist ein Fehler im Framework/ Template.

Neelix

[mdoll]

Dann ist da wahrscheinlich immer noch ein "display: grid" zu viel bei den col-Klassen.

In der online Optimist-Demo ist diese CSS-Anweisung nicht vorhanden. Man erhält aber man dasselbe Verhalten wie bei Dir, wenn man für diese Zeile "display: grid" definiert.

<div class="ce_columns ce_colStart col-lg-7  m-b-2">

Du musst rausfinden, woher das "display: grid" zu viel kommt.

Gruß
Mathias

[neelix]

Ich vermute, die Online-Demo ist noch auf Version 1.x des Themes, inzwischen gibt es aber Version 2.

Ich habe hier die Demo frisch installiert:
http://demo.roerig-it.de/sprachen-lernen/deutsch.html

Wenn Du da nacheinander die unteren beiden Textelemente entfernst, kommt der gleiche Effekt.

[mlweb]

Ein Link ohne vorhandenes Zertifikat ist definitiv suboptimal.

Wenn Du meinst, dass es ein Problem mit der Version 2 des Themes ist, dann wäre der Themeersteller der richtige Ansprechpartner.
Da das Grid-Bundle aber als einzelne Erweiterung auch bei mir in ein paar Installationen im Einsatz ist, glaube ich daran nicht wirklich.
Du hast ja lediglich an einem Element eine Klasse, die da nicht hingehört. In der Regel setzt Du die Grid-Klassen im Backend ja selbst.

[neelix]

Ein Link ohne vorhandenes Zertifikat ist definitiv suboptimal.

Bei einer Testinstallation ist mir das egal.

Wenn Du meinst, dass es ein Problem mit der Version 2 des Themes ist, dann wäre der Themeersteller der richtige Ansprechpartner.
Da das Grid-Bundle aber als einzelne Erweiterung auch bei mir in ein paar Installationen im Einsatz ist, glaube ich daran nicht wirklich.
Du hast ja lediglich an einem Element eine Klasse, die da nicht hingehört. In der Regel setzt Du die Grid-Klassen im Backend ja selbst.

Nein, ich setze hier keine Grid-Klassen selbst. Die Klasse ist ja schon in der Grundinstallation gesetzt.

Ich versuche das mal in ein Ticket zu gießen.

[neelix]

Ich hoffe, es ist verständlich:
https://github.com/erdmannfreunde/op...ndle/issues/18

[mdoll]

Ok,
ich habs mir auch mal installiert, und ich kann es nachvollziehen. In der Version 2.x wird da ein "display: grid" mitgegeben.

Geh mal zum Inhaltselement 'Grid (Spalte Start)' und trage bei den Grid-Optionen "align-start" ein. Damit gibts Du dem Element ein "align-self: start;" mit und die Kindelemente strecken sich nicht mehr auf die komplette Höhe.

Gruß
Mathias

[neelix]

Ok, damit kann ich dem entgegenwirken. Aber das bekämpft ja nur das Symptom.

[mdoll]

Ich denke, E&F haben sich was dabei gedacht, dass alles auf display: grid zu stellen. Das komplette CSS umfasst ja noch viel mehr Selektoren.

Wahrscheinlich macht man an anderer Stelle was kaputt, wenn man das grid rausnimmt. Dann lieber eben um die Hilfsklasse ergänzen.

[mlweb]

Ok, damit kann ich dem entgegenwirken. Aber das bekämpft ja nur das Symptom.

Nein so ist das nicht. Es ist eine weitere Möglichkeit mit Grid bzw. verschachteltem Grid zu gestalten. CSS-Grid ist extrem mächtig und mit so einer Erweiterung sind selten alle Möglichkeiten abzubilden. Dennis hat damit offensichtlich ein weitere Möglichkeit genutzt, um innerhalb von Columns Elemente ebenfalls per CSS-Grid einfach platzieren zu können.
Man muss CSS-Grid einfach verstehen und sich den genauen Code anschauen, ggf. für das eigene Layout CSS und/oder Klassen entsprechend anpassen.

[neelix]

Ok,
ich habs mir auch mal installiert, und ich kann es nachvollziehen. In der Version 2.x wird da ein "display: grid" mitgegeben.

Geh mal zum Inhaltselement 'Grid (Spalte Start)' und trage bei den Grid-Optionen "align-start" ein. Damit gibts Du dem Element ein "align-self: start;" mit und die Kindelemente strecken sich nicht mehr auf die komplette Höhe.

Gruß
Mathias

Ja, ist leider die einzige Möglichkeit. Nur blöd wenn unbedarfte Benutzer selbet Inhalte pflegen und Seiten erstellen sollen. Die sollen ja eigentlich nicht am CSS rumspielen.

[mlweb]

Der Eintrag von Grid-Optionen und/oder CSS-Klassen ist ja nun nicht das Gleiche wie das Rumfummeln im CSS. Alternativ erstellst Du eigene Inhaltselemente, die genau auf die Erfordernisse des Kunden abgestimmt sind - idealerweise dann zusammen mit einem individuellen Theme, erstellt genau für den Kunden.

[neelix]

Was aber auch mal wieder zeigt, warum Wordpress so erfolgreich ist und es für Contao so gut wie keine fertigen (kostenlosen) Themes gibt. Da muss sich der gemeine Webseitenersteller keine Gedanken machen. Das funktioniert da. (Dafür hat das System andere Probleme.)

[mlweb]

Was aber auch mal wieder zeigt, warum Wordpress so erfolgreich ist

Ansichtssache -Ist ja die Frage was das Maß für Erfolg ist.

• Viele Installationen?
• Viele Installationen im Enterprise-Bereich?
• Viele Installationen auf Grund von vielfältigen Nutzungsmöglichkeiten und guter Skalierung?
• Viele Installationen, weil man sich mit kostenfreien Themes ohne jeden Sachverstand gut was zusammenklicken kann?
• ...

Bei der Gelegenheit - einige Baukastensysteme sind inzwischen auch erfolgreich und haben für bestimmte Anwendungsbereiche auch ihre Berechtigung bzw. sind für bestimmte Zwecke völlig ausreichend.

... und es für Contao so gut wie keine fertigen (kostenlosen) Themes gibt.

Wenn
man die Beurteilung eines CMS auf die Anzahl der zur Verfügung stehenden kostenlosen Themes reduziert, dann ist das für mich ein Armutszeugnis.

(Dafür hat das System andere Probleme.)

Eben. Es gibt ja wahrscheinlich einen Grund, warum Du es mit Contao probierst.

[tab]

Was aber auch mal wieder zeigt, warum Wordpress so erfolgreich ist und es für Contao so gut wie keine fertigen (kostenlosen) Themes gibt. Da muss sich der gemeine Webseitenersteller keine Gedanken machen. Das funktioniert da. (Dafür hat das System andere Probleme.)

Ja, alles was vom jeweiligen Theme genau so vorgesehen ist, funktioniert da. Wenn man etwas zusätzlich braucht, gibt es mit Glück ein Plugin dafür, ohne Glück darf man anfangen, PHP zu programmieren. Also eigentlich kein großer Unterschied.

Ich habe letztes Jahr mal eine (sehr einfache) Kundenwebsite nachgebaut. Mit dem Theme Twentytwenty und der Erweiterung Twentig (oder so ähnlich) Das meiste liess sich tatsächlich leicht nachbauen und sieht dann schon relativ absprechend aus. Der Teufel steckte dann im Detail, ich habe meine Neugier dann gezügelt und abgebrochen. Damit ersetzen wollte ich die Website eh nicht, habe nur Beispielinhalte gebraucht. Aber gut, hätte ich die Website ursprünglich mit Wordpress erstellt, gabe es jetzt wahrscheinlich andere Details , die mich dann vielleicht beim Nachbau mit Contao ins Grübeln gebracht hätten.

Immerhin ist mir bei der Aktion ein alternativer Fontstack zugelaufen, den ich jetzt teilweise bei Contao-Websites verwende, weil er mir recht gut gefällt. Die Zielgruppe von Wordpress ist eben von vornherein eine andere, deutlich größere als bei Contao. Darüber kann jeder denken wie er will, aber das ist die Grundlage des Erfolgs vom Wordpress. Man kann praktisch ohne jedes Wissen eine ansprechende Seite erstellen. Meine (relativ neue) Nachbarin hat eine Wordpress-Website für ihr Business. Sah durchaus passabel aus. Mittlerweile hat sie eine neue Wordpress-Site, die alte ist gehackt worden. Man muss da eben sehr vorsichtig sein, was man wirklich benutzen will von all den Plugins. Wobei der Core wohl schon ähnlich gut gepflegt wird wie der von Contao. Der Marktanteil von Wordpress macht es natürlich auch zum Ziel Nr.1 der Hacker. Und nicht alle Plugins sind halt qualitativ, im Sinne der Sicherheit, wirklich gut. Ich würde jetzt nicht allzu viel dagegen wetten, dass ihr das nochmal passiert.

[neelix]

Ich mach dieses ganze Webdesign ja nur nebenher aus der Not heraus. (s. https://community.contao.org/de/show...l=1#post570444)

Ich bin von Haus aus IT-Systemarchitekt. Ich plane (und baue) dir alle möglichen Netzwerk- und Serversysteme. Mein HTML und CSS ist irgendwo Anfang der 2000er stehengeblieben.

Für Wordpress und diese Baukästen bin ich zu blöd. Da kommt bei mir nie das raus, was ich haben möchte und wenn ich dann mal in den Quellcode der damit zusammengeschusterten Seiten schaue, dann schauert es mich. Irgendwann (noch zu 2.x Zeiten) bin ich auf Contao gestoßen und war begeistert, wie schön ich mir mit dem internen CSS Editor mein Layout und Design erklicken konnte.

Und dann bin ich halt froh, wenn ich eine Vorlage habe, die das beeinhaltet, was ich gerade benötige und ich nicht das Rad neu erfinden muss.

[lucina]

Ich würde ja schon erwarten, dass sich auch ein IT-Systemarchitekt nicht vollkommen der Weiterbildung in puncto Frontendtechnologien verschliesst.

Damals™ war ja dann auch der integrierte Editor für manche Leute durchaus sinnvoll. Ist er aber heutzutage angesichts des Sprachumfangs von CSS ganz sicher nicht mehr. Und so kommt dann auch bei Contao am Ende möglicherweise etwas heraus, dass einen erschaudern lässt.

Wenn Du eine solide Basis brauchst, dann ist es vielleicht eine gute Idee, mal für Dich zu formulieren, was Du benötigst - und es dann als wiederverwendbare Vorlage zu bauen.

[neelix]

Ich würde ja schon erwarten, dass sich auch ein IT-Systemarchitekt nicht vollkommen der Weiterbildung in puncto Frontendtechnologien verschliesst.

Mit Frontends habe ich i.d.R. nichts zutun (außer, dass ich sie hin und wieder nutze). Mein Alltagswerkzeug ist die Kommandozeile. (Und ja, ich lese und schreibe auch mein Mails am liebsten Plaintext.) Wenn ich ein Frontend brauche, dann habe ich in der Firma einen Entwickler und wenn der was Buntes zum Klicken braucht, dann geht er zu den Grafikern.

Damals™ war ja dann auch der integrierte Editor für manche Leute durchaus sinnvoll. Ist er aber heutzutage angesichts des Sprachumfangs von CSS ganz sicher nicht mehr. Und so kommt dann auch bei Contao am Ende möglicherweise etwas heraus, dass einen erschaudern lässt.

Wenn Du eine solide Basis brauchst, dann ist es vielleicht eine gute Idee, mal für Dich zu formulieren, was Du benötigst - und es dann als wiederverwendbare Vorlage zu bauen.

Da war ich ja ganz froh, als EuF mit dem Optimist-Theme kamen, denn das hat eigentlich alles, was man für so typische Vereins- oder Projektseiten braucht.

Der Verein ist ja auch happy mit der Seite, nur mich wurmen dann so Kleinigkeiten.

[do_while]

Die Basis-CSS-Styles für Grid sind hier gut beschrieben und lassen sich einfach übertragen:
https://grid.malven.co/

Das gibt es übrigens auch für CSS-Flex:
https://flexbox.malven.co/

Die beiden Seiten bilden nicht alle Möglichkeiten ab, aber das wichtigste ist sehr verständlich dargestellt (finde ich).