Custom CSS - Was mache ich falsch?

Custom CSS - Was mache ich falsch?

von Stefan Meier -
Anzahl Antworten: 7

Hallo miteinander


Ich möchte meinem Lesson modul die möglichkeit geben mittels CSS text sichtbar oder unsichtbar zu machen.

Bisher habe ich das mit einem Javascript Plugin (simple question) gemacht und jetzt festgestellt, dass dies nicht sehr nachhaltig ist da es auf yui basiert und es mir lieber ist die sache ohne plugin hinzukriegen.


Ich habe schliesslich etwas gefunden um um es mit css zu lösen. Im Prinzip ein On und ein Off-Button. Nun wollte ich diese Funktion mittels custom css integrieren aber ich schaffe es einfach nicht

So gesehen habe ich generell ein Problem mit Custom CSS. Auch andere Änderungen werden nicht angenommen

Mit den Tutorials die ich gefunden habe bin ich bisher nicht weitergekommen. Hat jemand vielleicht einen Tipp oder eine andere Möglichkeit, auf einfache weise Inhalte durch Knopfdruck anzeigen/verschwinden zu lassen?


Ich verwende Moodle 3.0, Essential theme (muss aber nicht sein wenn das das problem ist) und habe "themedesignermode" eingeschaltet. 


Gruss

Stefan


Als Antwort auf Stefan Meier

Re: Custom CSS - Was mache ich falsch?

von Miriam Fischer -

Hallo Stefan, 

Was genau möchtest du machen? einen Button einfügen, wo vorher noch keiner war?

Grundsätzlich ist es kein Problem, vorhandene Elemente anzupassen (customize). Elemente, die nicht schon vorhanden sind, einzubringen, geht meiner Meinung nach über CSS hinaus, da musst du in den Code eingreifen, da es sich beim Button um ein interaktives Element handelt, welches eine Aktion anbietet und nicht nur eine visuelle Alternative. Meiner Meinung nach ist es mit CSS allein nicht möglich, einen Button einzufügen, da CSS nur das Aussehen oder in gewissen Fällen auch das Verhalten von vorhandenen Elementen beeinflusst. 

Sieht das jemand anders? Da wäre ich gespannt. 

Grüsse, Miriam

Als Antwort auf Stefan Meier

Re: Custom CSS - Was mache ich falsch?

von Matthias Giger -
Nutzerbild von Speziell hilfreiche Moodler

Es gibt verschiedene Möglichkeiten, dein Problem zu lösen. Alle haben ihre Vor- und Nachteile.

Am einfachsten geht es direkt in HTML (funktioniert aber möglicherweise nicht in allen Browsern):

<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
Es wird nur die Zusammenfassung (summary) angezeigt. Erst wenn auf die entsprechende Stelle geklickt wird (die Benutzer müssen das wissen), öffnet sich der volle Text.

Eine weitere Möglichkeit besteht darin, dass du eben CSS verwendest, damit dies aber klappt, muss du mit einem JavaScript die DOM manipulieren. Wie gut das innerhalb einer Lektion von Moodle funktioniert, habe ich nicht probiert.

Damit dies funktioniert bettest du die CSS-Formatierungen am besten im entsprechende Moodle-Theme (Administration > Appearance > Themes > Deine Wahl > Custom CSS).

Eine Demonstration zur Lösung mit Javascript findest du unter: http://codepen.io/mattgig/pen/eZxjBj.

Als Antwort auf Matthias Giger

Re: Custom CSS - Was mache ich falsch?

von Martin Vögeli (voma) -
  1. Cool, das Details-Tag kannte ich nicht, allerdings wurde es bei meinem Test von Moodle entfernt.
  2. Die CSS-Lösung kannte ich auch noch nicht, man lernt doch einfach nie aus, doch leider funktionierte auch diese in Moodle bei meinem Test mit Moodle nicht.
  3. Eine weitere Möglichkeit wäre es, einen Link auf die gewünschte weiterführende Information zu setzen, so mach ich das jeweils.
  4. Last but not least, könnte auch ein Glossar mit Auto-Verlinkung verwendet werden, dann liefert ein Klick auf das entsprechende Schlüsselwort im Text jeweils weitere Infos B-)
Als Antwort auf Martin Vögeli (voma)

Re: Custom CSS - Was mache ich falsch?

von Xavier Molina-Schenk -
Nutzerbild von Speziell hilfreiche Moodler

Hallo

  • Bei mir hat Details-Tag im Textfeld geklappt.

Anscheinend/Leider funktioniert es nur browserabhängig. Es geht bei Opera, Chrome und in Safari 6.

  • Ich finde die css-Klassen-Auswahl im Link-Editor interessant:     
  • Den Glossar-Trick möchte ich mal ausprobieren. Man kann ja das Glossar in einen verwaisten Block stellen, falls man es den Blicken entziehen möchte. Ich habe allerdings nicht getestet.

Herzlich

Xaveier

Als Antwort auf Martin Vögeli (voma)

Re: Custom CSS - Was mache ich falsch?

von Matthias Giger -
Nutzerbild von Speziell hilfreiche Moodler

Offensichtlich entfernt Moodle 3.0 CSS-Regeln, wenn diese direkt in eine Seite eingebunden werden.

Damit die CSS-Lösung funktioniert, muss die entsprechende CSS-Regel global eingebunden werden. 

Dies geschieht via Administration > Appearance > Themes > (Name des Theme: z.B. Clean)

Dort kann dann im Feld Custom CSS die Anpassung vorgenommen werden.


Persönlich verwende ich Custom CSS vor allem, um Bilddateien links von einem Text zu platzieren.

Beispiel der Kursformatierung mit Custom CSS


Als Antwort auf Matthias Giger

Re: Custom CSS - Was mache ich falsch?

von Stefan Meier -
Danke für eure Antworten. Ich muss vielleicht nochmals die Frage klären. Bei mir funktioniert generell das Custom css nicht. Ich muss aber auch sagen dass ich auf dem ganzen Gebiet kein echter Experte bin und darum recht detaillierte Anweisungen brauche


Ich möchte jetzt dem User anzeigen, dass er nicht nur auf den Antwortbutton einer Frage klicken muss sondern auch auf das Bild klicken kann. ich möchte dazu die ganze Antwort (Radiobutton, Text und Bild) bei mousehover highlighten. Mit CSS sollte das eigentlich möglich sein.

Mir geht es jetzt in erster linie nur darum, überhaupt mal irgend eine Änderung hinzubringen


Was ich bisher probiert habe:

unter Webseite: Plugins Blöcke Textblock habe angekreuzt
"Option hinzufügen, um für jeden Textblock CSS-Anpassungen zu erlauben"

Bei Darstellung: Designs: Einstellungen habe ich den Modus zur Designbearbeitung aktiviert

Mit Firebug habe ich das entsprechende HTML Element untersucht
Beispiel


und im Custom CSS folgendes testweise eingefügt

.que.multichoice .answer div.r0 label
{
line-height: 500px;
background-color: red;
}


Jetzt müsste der Hintergrund der oberen Antwort rot werden. Tut es aber nicht.
Auf einer anderen Seite habe ich gelesen, dass diese CSS Anpassungen nochmals von YUI überschriebene werden
Ich nutze das Theme Essential und Moodle 2.8, Dort wo es dann später wirklich laufen soll wird wahrscheinlich Moodle 3.0 installiert sein.

Vielleicht würde auch ein Link in die Richtige Richtung helfen. Wie gesagt, ich bin kein Experte und kann auch den Aufbau der obigen CSS-Linie ".que.multichoice .answer div.r0 label" nicht ganz 100% nachvollziehen.
Das Problem ist auch, dass ich noch keine wirklich anfängerfreundliche Anleitung für Custom CSS gefunden habe.


Als Antwort auf Stefan Meier

Re: Custom CSS - Was mache ich falsch? Nachtrag

von Stefan Meier -

Kaum sind 30 min Bearbeitungszeit vergangen kommt es: Es hat in der neueren Moodle instanz funktioniert.

Ich habe es also geschafft, eine Veränderung zu bewirken kurz bevor ich mich zum Idioten abgestempelt habe. Es muss wohl an der Version oder etwas anderem gelegen haben.

Ich finde die Javascript Idee cool, ähnlich war es in dem Plugin gelöst welches ich vorher hatte aber so wäre ich unabhängig von einem Plugin. Nur das JS muss noch irgendwo deponiert werden. Ausserdem braucht es einen Style der nicht angezeigt wird

Gibt es also keine Möglichkeit über Custom CSS, weitere CSS klassen hinzuzufügen oder wenn doch, müsste ich das vielleicht im stylesheet machen?

Zu meinen Multiplechoice Antworten: Wie würdet Ihr das am besten machen? Am liebsten wäre mir sowas für Antwort 1

.que.multichoice .answer div.r0:hover {
anderer style hier
}