Shop gestalten, aber wie??

[holzfaeller]

Hallo,

bin seit langem daran meinen Shop von Isotope zu gestalten. Habe ihn damals nur installiert, Produkte hinzugefügt und fertig.
Nun möchte ich ihn seit einer ganzen Weile schöner machen, finde aber hier nicht wirklich Beiträge, die mir weiterhelfen.

Ich möchte, dass z.B. der Text neben den Produktbildern ist usw. bei mir sieht das derzeit so aus: http://www.sjs-bikes.de/contao/index...tainbikes.html

Habe auch mal die Isotope Demo CSS importiert, allerdings bleibt das Layout komischerweise genau dasselbe (habs auch sicher überall eingebunden).
Nun ist meine Frage, was muss ich genau bearbeiten, die Isotope CSS oder muss ich z.B. in der iso_list_variants.html5 rumbasteln?
Komme grad einfach nicht weiter

Grüße
Stefan

[dtptiger]

Hallo,
Habe auch mal die Isotope Demo CSS importiert, allerdings bleibt das Layout komischerweise genau dasselbe (habs auch sicher überall eingebunden).
Nun ist meine Frage, was muss ich genau bearbeiten, die Isotope CSS oder muss ich z.B. in der iso_list_variants.html5 rumbasteln?

Hallo holzfaeller,
vorweg, ich kenne isotope nicht, aber muss mich demnächst damit beschäftigen und war neugierig und habe mir das bei dir deswegen kurz mit firebug angeschaut.

Das div mit dem Bild hat die classe .iso_attribute.
Wenn ich diesem ein float:left mitgebe ist das Bild links vom Text.
Wenn ich ich dem teaser ein padding rechts gebe, verschiebe ich auch den längeren Text so das der rechtsbündig vom Bild läuft.

Dann wirds nach Rechts eng, und die umschliessenden divs (ich vermute main.inside ist sehr massgeblich) müssen etwas Platz geben.

Das ist etwas ccs gebastel, aber man muss das template nicht anfassen.

Wenn man die divs im template anders sortiert wären weniger css definitionen notwendig.

Hoffe ich habe das richtig verstanden, und du verstehst was ich meine.
Gruss dtptiger

[bizon]

Schreib das in deine isotope CSS

.product h3 {
    clear: both;
}
.iso_attribute img {
    float: left;
    margin: 0 20px 10px 0;
}

Dann musst du noch bei #main .inside die margin-Regeln anpassen, damit die Produktbeschreibung nach rechts mehr Platz hat.

Der Tipp von dtptiger mit dem Firebug (das ist das Entwicklertool des Firefox) ist zwingend! Mach dich mit dem Tool vertraut - damit findest du die zu bearbeitenden CSS-Selektoren sehr schnell.

[Andreas]

@bizon Schau mal, das IMG liegt doch ganz tief unten in .iso_attribute > figure > a > img und nach dem IMG kommt doch nix mehr. float:left; heißt doch "die nachfolgenden Elemente (siblings) sollen das Element rechts umfließen". Richtig müsstest du also schreiben

.iso_attribute {
    float: left;
    margin: 0 20px 10px 0;
}

auch wenn es anders auch erstmal für den gewünschten Effekt sorgt.

[dtptiger]

@bizon Schau mal, das IMG liegt doch ganz tief unten in .iso_attribute > figure > a > img und nach dem IMG kommt doch nix mehr. float:left; heißt doch "die nachfolgenden Elemente (siblings) sollen das Element rechts umfließen". Richtig müsstest du also schreiben

.iso_attribute {
    float: left;
    margin: 0 20px 10px 0;
}

auch wenn es anders auch erstmal für den gewünschten Effekt sorgt.

css freaks ;-)
Ihr verwirrt den holzfaeller und dazu stimmt das was ihr beide schreibt meiner Ansicht nach nicht.

Andreas,

das IMG liegt doch ganz tief unten

wo hast Du geschaut? Nach dem img kommt noch
teaser
price
details

hier:

<h3>
<div id="...thumbnailsize" class="iso_attribute">
<figure class="image_container">
<a title="" href="...html">
<img ...jpg">
</a>
</figure>
</div>
<div class="teaser">
<div class="price">
<div class="details">
</div>

Clear nach h3 bringt gar nix, das img links floaten lassen ist nur der Anfang!
Ohne teaser und price (und eventuell detail) anzusprechen wird das Bild nicht links von den Texten bleiben wenn der Text länger läuft als das Bild hoch ist.

Gruss dtptiger

[Andreas]

...
Andreas,

wo hast Du geschaut? Nach dem img kommt noch
teaser
price
details
...

Nein, schau mal bitte genau - das IMG hat weder siblings (Nachbarn) noch Kinder (adR: IMGs haben nie Kinder).

.teaser ist der nächste Nachbar (sibling) von .iso_attribute

.iso_attribute
--figure
----a
------img
.teaser
.price
.details

Um von IMG zu teaser zu gelangen muss ich erst zu den Eltern (a), Großeltern (figure), Urgroßeltern (.iso_attribute) und dann deren nächster Nachbar (.teaser). Du kannst also nicht sagen, dass .teaser nach IMG kommt ('später im Quelltext' ist das einzige was man sagen könnte).

Dem H3 ein Clearing zu geben finde ich durchaus eine gute Idee, weil sich das float vererbt und das H3 auf jeden Fall das Element ist, welches einen neuen Block beginnen soll (das H3 soll auf keinen Fall irgendwie auf die Idee kommen irgendwie irgendwohin zu floaten).

edit: Habe mir das nochmal genau angesehen - eigentlich sollte nicht das H3, sondern der Container, welches ein Produkt umschließt das Clearing bekommen, in diesem Fall div.product.

Dass das float:left; auf dem .iso_attribute (od. auch IMG) erst ein Anfang der Formatierung ist, da gebe ich dir Recht.

[holzfaeller]

diskutiert nur weiter, so arg verwirren werdet ihr mich nicht. Bin selbst Informatikstudent im 5. Semester, weiß also schon was ihr von Kindern, Klassen usw redet
Kenne mich aber noch nicht so wirklich mit css aus ^^
Was ich noch nicht ganz verstehe, wieso muss ich das in der Isotope.css ändern? In firebug steht immer was von http://www.sjs-bikes.de/contao/syste...ec6b6568d5.css dieser Datei, die liegt aber nicht im Contao Backend zum bearbeiten vor... Und alles was ich in Firebug rumschraub, bezieht sich ja auf diese CSS Datei...
Soll ich dann nun diese via FTP mir holen, bearbeiten und wieder hochladen? oder zerschiess ich dann was, da es im System Ordner liegt?

Grüße Stefan

[magicsepp]

Hallo Stefan,

das ist die zusammengefügte css Datei die aus den Einzelteilen der Installation gebildet wird. Da diese Datei immer wieder neu gebaut wird macht es keinen Sinn darin was auf Dauer ändern zu wollen. Dafür gibt es die css dateinen im Backend.

Grüße

[Andreas]

Schau auch mal im Wiki, da gibt es Berichte zu CSS in Contao. Aber ganz kurz gesagt. Die CSS-Dateien, welche du im BE mit Contao erzeugst liegen nacher in system/scripts/, da darfst du nicht manuell Hand anlegen. Wenn du eigene Dateien einbinden willst (übers Head-Tag oder mit theme_plus) die legst du dann am besten nach tl_files/css/. Auch keine CSS-Dateien aus dem Core, z.B. aus system/modules/... od. plugins/... manuell bearbeiten, das wäre nicht updatesicher.

Bearbeiten tust du eigene CSS-Dateien am schnellsten mit einem Editor, der die Dateien direkt vom Server öffnet ohne Umweg über deinen FTP-Client. Mit PsPad für Windows geht das z.B.

[holzfaeller]

ok, cool jetzt versteh ich das ganze etwas mehr

Hab jetzt auch mal die Isotope.css angepasst, wie ich es in Firebug rumprobiert hatte...
Allerdings übernimmt er das ganze nicht auf die Homepage? Habt ihr da ne Idee?
Noch ne Frage gibt es eine Übersicht aller Klassen die von Isotope verwendet werden?

Grüße Stefan

[Andreas]

Keine Ahnung was du da machst, was dein Ziel ist, welche Datei du wie bearbeitest und wie sie ins Frontend gebracht werden soll.

Was haut Menumatic dir denn da für CSS rein?

/* Style sheet MenuMaticMEIN */
/ {
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////;
}
/ {
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////;
}

Nein, so Klassenlisten gibt es allgemein nicht, weil sie sich auch dauernd verändern würden. Hattest du ursprünglich den Demo-Shop installiert und er sah nicht so aus wie auf der Demoseite?

[holzfaeller]

Menumatic ist ne fertige CSS gewesen,
die nur für das Menü zuständig ist. Also das Fahrräder, dann die Unterpunkte usw.
ich will wie oben beschrieben den Style von dem Shop anpassen, also Bild links, beschreibung rechts.
Demoshop hatte ich nicht installiert. Habe mir eine neue CSS Klasse Isotope gemacht, in der ich eben den Shop stylen will.

Ich weiß auch das meine CSS Klassen nicht gerade die schickesten sind, da ich wie gesagt erst mit CSS beginne, bzw. nur grobe Ahnung hab.

Wenn ich aber die Isotope.css mit Firebug anpasse, ändert sich was an der Seite, aber wenn ich es in Contao ändere, passiert eben nix
Habe die Isotope.css auch in Contao angepasst, da steht z.b.
.iso_attribute {
float: left;
}

aber im firebug zeigt er nur:
.iso_attribute {
display: inline;
}

an, obwohl in Contao eben das andere steht und das versteh ich nicht ...

[Andreas]

Ich gehe mal davon aus, dass du nicht die system/modules/isotope/html/isotope.css veränderst, was ja auch richtig ist. Das ist die Datei, die du mit Firebug siehst. Ich vermute mal du hast im BE mit Contao ne isotope.css angelegt und sie einfach noch nicht ins Layout eingebunden, schau mal bitte im Layout nach.

[holzfaeller]

ok, hatte den Fehler gerade zwischenzeitlich selbst gefunden.
Ich habe die CSS schon dem Layout zugewiesen, nur dummerweise der Seite an sich (in der Seitenstruktur) kein Layout zugewiesen

Es sind doch immer wieder die einfachsten Dinge, auf die man nicht kommt ^^

Danke dir!

[holzfaeller]

so, hab nun noch einiges rumgespielt. Hätt aber noch 2 kleine Fragen

1. Wieso bekomm ich in Firebug nicht die volle CSS zu sehen, die auch im Contao drin ist? Das meiste was ich dazu geschrieben habe, ist da nich zu sehen
2. Hab das jetzt so gemacht mit Text rechts von den Bildern, hab allerdings noch nicht herausgefunden wie ich das mache, wenn der Text rechts länger ist als die Bildhöhe, dass der Text trozdem rechts bleibt.. und nicht unters Bild geht.

Grüße Stefan

[Andreas]

.teaser, .price, .details {
  margin-left: 240px;
}

Beim .teaser noch die Breite wieder entfernen.

Contao packt deine CSS-Dateien mit dem Combiner in eine einzige, die dann in system/scripts/ liegt.