Hallo liebe Community,
ich bin verantwortlich für eine Moodle Lernplattform auf der Moodle 3.9.1 läuft und das Theme "Moove" verwendet wird.
Ich bin an sich sehr zufrieden, nur stoße ich bei den geführten Touren gerade an meine Grenzen.
Dass es etwas mit dem Theme zu tun haben muss, nehme ich deshalb an, weil ich zu Testzwecken auf das standard Theme "Boost" umgeschaltet habe und dort gab es die Probleme nicht.
Ach ja die folgenden Probleme treten im Firefox und Chrome unterschiedlich auf. Am schlimmsten ist es im Chrome Browser da habe ich alle drei Probleme. Im Firefox ist es etwas besser, da habe ich zumindest den störenden Rahmen nicht, aber Probleme 2 und 3 habe ich da auch.
Also nun zu den Problemen:
1. Ich habe immer einen dicken schwarzen Rahmen um die Box.
2. Der Rahmen alleine wäre nicht das Problem, wenn das Theme nicht so seltsame Verrenkungen machen würde und der Rahmen um eine Box erfolgt, die immer doppelt so breit ist wie der eigentliche Content, oder die eigentliche Content-Box. So hat man also immer einen hässlichen dicken Rahmen über eine freie Fläche. Hier mal ein Screenshot.
3. Was uns zu Problem drei bringt, die Position der Box ist leider nicht dort ansässig wo sie sein soll. Das betrifft nicht den Screenshot oben, dieser zeigt eine Box die einen Bereich im Main Bereich definiert. Aber wenn ich einen Block vorstellen will, bei unserer Seite sind die auf der rechten Seite, dann variiert der Abstand extrem. Hier mal einige Beispiele:
Die Content-Boxen, der geführten Tour sind offenbar stark abhängig vom Inhalt, also dem Text. Boxen mit viel Text (ohne Umbruch) werden breit dargestellt und rücken weit von den Blöcken rechts ab und Boxen mit wenig Text klatschen sogar auf den Block drauf wie man oben sieht.
Damit man noch besser versteht, was ich gerne hätte, hier mal Beispiele wie es total super mit "Boost" aussieht:
Man versteht auch gleich, wieso es im "Boost" so toll aussieht, wenn man sieht wie schön übersichtlich das CSS dafür aussieht:
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
outline: 0;
}
Wohingegend beim "Moove" ist das CSS so unübersichtlich, das ich überfordert bin:
Das ist ein Screenshot von der markierten Box.
Also ich erwarte keine Wunder von euch, also genau genommen hoffe ich vor allem, das hier irgendjemand eine zündende Idee hat.
Ich habe jetzt schon viel Zeit mit Googeln verbracht und selber tüfteln mit allen möglichen CSS Einstellungen.
Aber in Moove wird wohl eine Art 3D Transform Klasse verwendet und von der habe ich einfach keine Ahnung.
Bitte nicht lachen, wenn ich den Zusammenhang jetzt völlig versiebt habe, aber ich zeige euch mal was ich meine:
Dies erscheint, wenn ich im Firefox Entwicklerwerkzeug über den "transform" Eintrag gehe mit der Maus:
Ich bin gespannt ob damit jemand etwas anfangen kann.