Arbeiten mit CSS in Drupal 7

Auf dem Mac arbeite ich mit Sass/Compass und LiveReload mit dem Bowser Plugin für den Firefox auf einer lokalen Installation. LiveReload soll es auch für Windows geben.

Danke für den Tipp! Ich habe für Linux nur den Sass/Compass gefunden:
https://addons.mozilla.org/de/firefox/addon/firecompass-for-firebug/?src...
werde gleich morgen ausprobieren.

Auch nicht schlecht: der 'CSS Reloader' https://addons.mozilla.org/de/firefox/addon/css-reloader/ spart eine Menge Zeit da über F9 nur das CSS neu geladen wird (gibt's auch für Chrome)
Gruß
Christian

Danke schön, ich werde es "CSS Reloader" mir auf jeden Fall anschauen. Ich habe mich entschieden, zuerst die Funktionalität der Seite komplett fertig machen und erst dann durch CSS-Djungel zu laufen. Das ist schon eine sehr komplexe Angelegenheit.

Und Das Dupal-Modul "Live CSS/Live JS" nutzt keiner von Euch? Ich habe das ausprobiert und irgendwie ist das nicht so optimal. Würde gerde Meinung deren hören, die das nutzen. Die erste Sache ist, dass man manuell bei allen CSS-Dateien Schreib-Rechte setzen muss (dazu muss man wissen, wo sich die CSS befinden). Das habe ich gemacht, ok. Aber es gibt ja CSS, die vom Core kommen und die, die von contributed themes kommen, wie z.B. Corporateclean. Wenn man "Edit CSS" klickt, muss man ganz genau wissen, in welchem CSS-File sich diese oder jene Eigenschaft versteckt und mögliche Vererbung berücksichtigen... Bei Responsiv Themes ist das echt komplex. Und wie ich es verstanden habe, schreibt Live CSS die Änderungen direkt un CSS File. Das ist aber der "falscher Weg". Ich will ja nicht, dass z.B. irgendwelche Core-Eigenschaften überschrieben werden oder in Corporateclean-Theme direkt.

Daher meine Frage an die Community, ob es in Drupal ein Modul gibt, der intelligent erkennen kann, welche Eigenschaften an einem Element schon gibt (und in welchen CSS-Dateien sie zu finden sind) und bei Veränderung nur diese neue Eigenschaft in eine neue Theme-Datei übernehmen kann (vorausgesetzt diese Datei schon angelegt ist), damit neue Eigenschaft die alte einfach überschreibet? Z.B. Firebug-Plugin kann ja auch anzeigen, welche CSS-Eigenschaften bei einem Element vorhanden sind und in welchen Dateien sie sich befinden. Nur man kann es nicht live ändern und das Ergebnis sehen und wenn doch, dann ist diese Änderung direkt in dem File und nicht in einem neuen File, weil Firebug nix von Drupal-Theme-System weiss. Um diese Problematik zu lösen, muss es ein Drupal-Modul sein. Oder ist das die Zukunftsfunktionalität des Live CSS Moduls? Oder gibt es schon, nur ich das falsch angewendet habe?

Viele Grüße,
Katja

Man legt sich dazu einen eigenen CSS-File an, in dem man die CSS-Befehle, die man ändern will und die vom Core, Modulen oder dem Base-Theme kommen, sammelt und nur darin überschreibt. Dann hat man auch mit Modul- oder Core-Updates kein Problem.

Ich habe genauso immer gemacht. Meine Frage bezieht sich aber auf die Suche von diesen CSS-Eigenschaften, die ich ändern muss. Wenn ich ein contributed theme nehme ist das schon schwierig die richtigen CSS-Eigenschaften manuell rauszusuchen.

Genau für diesen Zweck kannst du die Web-Developer Tools / "Element untersuchen" von Firefox bzw. Chrome nutzen. Dort wird dir genau angezeigt, welche CSS EIgenschaften gerade auf das jeweils ausgewählte Element greifen. Genau diesen Selektor könntest du dann in deinem CSS überschreiben. Wenn du auf Core-Themes setzt, bietet es sich aber an, ein Subtheme zu erstellen, um die Updatefähigkeit des Contributed Themes zu gewährleisten.

Weitere Infos zu Sub-Themes:
https://drupal.org/node/225125
http://www.drupalcenter.de/handbuch/15919
http://www.an-computer.de/blog/201206/subthemes-und-templates-drupal-7

SteffenR

Für mich reicht Firebug vollkommen aus.
Dort kann man dann auch gleich Änderungen vornehmen und erhält eine Vorschau, wie sich die geänderten Eigenschaften auf die Seite verhalten.