DOKU: Übersicht der CSS id's und classes im xtc5 Template

[gar85]

Hallo,

um nicht immer mit Firebug nach den richtigen ID und CLASS Bezeichnungen zu suchen, habe ich mir mal eine Übersicht gemacht. Zumindest auf einigen Seiten. Dabei ist mir aufgefallen, dass die ID "cart_quantity" zweimal unterschiedlich eingesetzt wird.
Einmal auf der Seite Warenkorb, wo der Warenkorb abgebildet wird und das andere Mal
bei der Produktdarstellung, wo Preis/Versandinfos etc. angezeigt werden.
Rein logisch kann ich es mir nicht vorstellen, dass das korrekt ist. Ist schon jemand darüber gestolpert?

Gruß von der Isar
Klaus



Linkback: https://www.modified-shop.org/forum/index.php?topic=8777.0

[guensi]

Rein logisch spricht nichts dagegen, dieselbe ID auf mehreren Seiten zu verwenden. Lediglich die mehrfache Verwendung derselben ID auf einer Seite ist unzulässig.

Damit wird ja lediglich eine eindeutige Zuweisung für das jeweilige Objekt erreicht, damit man es unter dieser ID ansprechen kann um es zu formatieren, Informationen auszulesen, oder was man sonst noch so alles mit einem Objekt anstellen kann.

Man hat so beispielsweise die Möglichkeit, ein bestimmtes Objekt mit derselben Id überall im Shop immer auf die gleiche Weise mit nur einer Anweisung per css zu formatieren.

[Tomcraft]

Eine schöne Übersicht, aber ich denke schon, dass ich mit Firebug an der Stelle einfach schneller bin, als wenn ich mir das jedes Mal aus dem PDF suchen müsste.

Grüße

Torsten

[web28]

Also ich finde das gut und übersichtlich dargestellt!  

Gruss Web28

[guensi]

Stimmt, das ist wirklich gut geeignet, um sich die Zusammenhänge vor Augen zu führen. Wird mit der Zeit allerdings etwas Aufwand mit sich bringen, wenn man am Template feilt und zusätzliche classes definiert. Die müssten dann in der Übersicht immer mit eingepflegt werden.

Aber wenn man sich erst mal lange genug mit dem Shop beschäftigt hat, wird man das auch aus dem Quelltext heraus lesen können.

Bis das jedoch erstmal soweit kommt, ist das wirklich eine gute Einstiegshilfe. Das könnte eine spitzenmäßige Ergänzung im modified eCommerce Shopsoftware-Wiki sein. Für viele Einsteiger wäre das mit Sicherheit eine enorme Erleichterung, um die Mechanismen des Shops zu verstehen.

[Tomcraft]

[...] Das könnte eine spitzenmäßige Ergänzung im modified eCommerce Shopsoftware-Wiki sein. Für viele Einsteiger wäre das mit Sicherheit eine enorme Erleichterung, um die Mechanismen des Shops zu verstehen.

Na dann ab damit ins Wiki!

Würde das jemand übernehmen?

Grüße

Torsten

[johnny]

Hi Klaus von der Isar

danke. Super.

Genau sowas habe ich in einem anderen Beitrag (DOKU: Beschreibung der Template-Dateien) gesucht.

Daran sieht man, der Profi (z.B. Torsten) braucht sowas nicht. Er findet alles viel schneller direkt im Code.

Viele andere werden aber an dem PDF von albersmann (Klaus) grosse Freude finden.

Danke also dafür. Das haste gut gemacht, Klaus.

Grüße
J

[johnny]

Hi Klaus,
Hi an alle,

also, ich habe mal VERSUCHT ... mit hilfe der PDF Datei wo die Classen grafisch dargestellt werden, mal die Box "Categorie" farblich anzupassen.

Es hat NICHT geklappt.

So bin ich vorgegangen;

Auf S. 1 des PDF steht links im "blauen" Bereich;

id=“leftcol“
class=“categoryheader“
id=“categorymenu“

nun habe ich categoryheader gesucht, und anhand der Werte festgestellt, dass dort die graube Farbe als Hintergrund ist. Bei categorymenu ist es genau so.

Wenn ich jedoch diese Werte nun nach meinen Wünschen ändere, tut sich gar nix. Es bleibt bei "grau".

Woran kann das liegen?
Konkrete Frage; wo exakt kann ich in welcher Datei, in welchem Ordner die Hintergrundfarben der Menüs und des ganz unten befindlichen (jetzt grauen) Balkens ändern?



Ich bin seit über eine Woche am suchen..... (natürlich nicht 8 Stunden am Tag

DANKE.


J

[guensi]

Also im original xtc5 Template steht im stylesheet folgendes:

Code: CSS  [Auswählen]

/* CATEGORY MENU */
h2.categoryheader {
        background: #868686 url(img/bg_boxheader.gif);
        height:28px;
        font-size:12px;
        color:#fff;
        padding:2px 8px 0px 8px;
        margin:0;
        line-height:28px;
        vertical-align:middle;
}
h2.categoryheader a {
        text-decoration:none;
        color:#fff;
}
ul#categorymenu {
        background-color:#EDEDED;
        margin-bottom:15px;
        border: solid #ccc;
        border-width:0px 1px 1px 1px;
}
/* 1st TIER */
ul#categorymenu li.level1 {
        list-style-type:none;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}
ul#categorymenu li.level1 a {
        text-decoration:none;
        color:#333;
        background:#eee;
        font-weight:bold;
        padding:4px 0px 4px 6px;
        display:block
}
ul#categorymenu li.level1 a:hover {
        text-decoration:none;
        color:#333;
        background-color:#e1e1e1;
        font-weight:bold;
}

Da wird neben der Hintergrundfarbe im h2.categoryheader noch ein Hintergrundbild definiert, welches immer Vorrang hat. Um also hier die Farbe zu ändern gibts zwei Wege: Ein neues Hintergrundbild, oder Hintergrundbild weglassen, dann greift die Hintergrundfarbe.

Im ul#categorymenu ist mit #EDEDED ein grau definiert, dieses kannst du ändern und änderst damit den Listenhintergrund. Aber je nach Randeinstellung ist davon wenig bis nichts zu sehen, wenn bei den Listeneinträgen hier zum Bsp. im ersten Level unter der Anweisung für den Link (und die gilt hier, da ja eine Verlinkung vorliegt) ul#categorymenu li.level1 a mit #eee ebenfalls ein Grauton definiert wird. Hier die Farbeinstellung ändern, schon sollte es funktionieren.

für die weiteren Navi-Levels gilt das analog.

[johnny]

Hi guensi,

ich danke dir sehr, jedoch war das nicht meine Frage.

Ich bin leider immer noch nicht weiter.

..und die Zeit läuft und läuft und läuft

Es geht doch nicht im den Header! Mir ist klar, das die Datei "bg_boxheader.gif" dafür zuständig ist.

Es geht um den grauen Hintergrund. Der Hintergrund, der in den ganzen Boxen drin ist!

Ich finde einfach nicht die Stelle, wo ich das ändern kann. Ich möchte die graue Hintergrundfarbe ändern, und zwar von den ganzen Boxen, und von dem grauen Balken, der unten ist.

Es müste doch möglich sein, dass wir irgend jemand hier sagen kann, in welcher Datei ich welche Codezeile ändern muss.

Der Farbcode wird ja in einer 6fach Buchstabenfolge definiert. Welchen Wert ich da einsetzen muss, das kriege ich selber raus. Das Problem ist nur, ich kann dort eintragen was ich will, es ändert sich schlicht nichts am Aussehen des Designs. Genau das muss aber doch einen Grund haben. Welcher?

Danke.

J

[johnny]

Hi an alle,

ich kapier das System des Codes nicht.

Z.B. folgender Block;

Code: CSS  [Auswählen]

body {
        font-family:Arial, Sans-serif;
        font-size:12px;
        margin:20px 0;
        padding:0;
        background: url(img/bg.gif) repeat-x #eee;
        color:#444;
        line-height:18px;
 

Damit wird der Hintergrund definiert, also Datei wird die bg.gif heran gezogen, und die wird horizontal gestreckt. So weit so gut.

Aber was bedeutet #eee?
Und wofür ist der Befehl "color:#444"?

Aber das sind (erstmal) Nebensächlichkeiten.

Ich muss wissen, wie ich die grauen Hintergründe der ganzen Boxen links und rechts, also genau der Bereich, wo sich die Inhalte in den Boxen aufbauen, farblich geändert werden kann. Und zwar wollte ich das ohne eine Grafik Datei machen, statt dessen mit Farbanweisungsbefehlen.

Und unten der graue Balken, wie kann ich da die Hintergrundfarbe ändern?

[knecht2020]

#eee ist die Hintergrundfarbe in dem Bereich wo kein Bild angezeigt wird.
Und Color definiert die Schriftfarbe die im Grunde für den ganzen Inhalt zwischen body und body gilt.
Wobei diese natürlich in jedem Bereich wie z.B. "leftcol" o.ä mit einer eigenen Zuweisung geändert werden kann.
Schau mal bei selfhtml oder CSS4you, dort findest du alles erklärt.
Gruß
Werner

[franky_n]

Hallo johnny,

installier Dir bitte mal im Mozilla Firefox den Firebug.
Mit dem kannst Du wenn Du im Quelltext mit der Maus drüber fährst ganz schnell auf Deiner Seite sehen was für die jeweiligen Boxen zuständig ist.

In Deinem Fall ist z.B.: #eee der Farbcode #EEE000
Informier Dich wie man Farbcodes zusammenstellt.

Der Befehl:

Code: CSS  [Auswählen]

background: url(img/bg.gif) repeat-x #eee;

bedeutet nichts anderes als:
Mach einen Hintergrund mit der Grafik bg.gif im Ordner img und wiederhole diese Grafik nur auf der x Achse, dahinter ist dann falls das Bild Transparent ist oder nicht angezeigt wird die Farbe #eee

Um nun die Boxen zu ändern benötigst Du in Deiner stylesheet den Abschnitt "boxbody" der da z.B. so steht:

Code: CSS  [Auswählen]

.boxbody {
        background-color:#ededed;
        border: solid #ccc;
        border-width:0px 1px 1px 1px;
        padding:8px;
        margin-bottom:15px
}

Die background-color dann mal ändern.
Wenn es dann nicht funktioniert hast Du die falsche stylesheet.css genommen.
Wenn Du es nach der Anleitung nicht hinbekommst solltest Du entweder erwägen Dich in die Materie einzuarbeiten oder aber jemand anderen das machen lassen.

Viele Grüße

Franky

[johnny]

Hi Werner,

danke dir. Wirklich. Aber ich hab jetzt keine Zeit mir irgendwas selber beizubringen. Ich brauche eine SOFORTLÖSUNG.

----------

Hi Franky,

danke dir. Das mit dem Background war mir ja ziemlich klar, habe ich ja oben schon geschrieben.

Ich brauchte eine Lösung für die ganzen Boxen. Mit deiner Hilfe bin ich nun ganz erheblich weiter.

Danke mann!

Zwei Abschnitte in der CSS Datei (ich vermute mal ganz stärk, wenn nicht noch stärker, dass diese Infos auch in die stylesheet.css vermerkt sind) möchte ich dir gerne noch entlocken;

1.) da gibts oben links im xtc5 template, was ich ja gerade für einen Bekannten versuche anzupassen, die "categorien box". Die Titelzeile ist standardmässig eine Grafik, aber das habe ich komplett rausgelöscht und arbeite nur noch mit der Farbcodeanweisung. Reicht für mich erstmal. Aber wenn ich die Kategorie anklicke, dann hat die hier noch Unterkategorien.

Die erste Unterkategorie ist hellgrau. Wo ist das wie definiert. Finde ich nicht.

Die nächte darunter liegende ist dunkelgrau. Wo und wie ist das definiert. Finde ich nicht.

2.) Unten ist ein grauer Balken. Da steht u.a. drin; "modified eCommerce Shopsoftware eCommerce Shopsoftware". Das kann da auch ruhig drin bleiben, aber ich möchte auch diese Hintergrundfarbe ändern. Finde ich nicht.

Insgesammt möchte ich mit Farbdefinitionen arbeiten, nicht mit Hintergrundbildern.

Also nochmals superbesten Dank für die Hilfe bisher.

[franky_n]

Hallo johnny,

die Kategorien findest Du unter

Code: CSS  [Auswählen]

ul#categorymenu li.level1 {
        list-style-type:none;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}
ul#categorymenu li.level1 a {
        text-decoration:none;
        outline: none;
        color:#333;
        background:#eee;
        font-weight:bold;
        padding:4px 0px 4px 6px;
        display:block;
}
ul#categorymenu li.level1 a:hover {
        text-decoration:none;
        color:#333;
        background-color:#e1e1e1;
        font-weight:bold;
}
 

Wobei level1 dann die erste Kategoriebene ist. Die anderen folgen mit level2, level3 etc...
Dort die Einträge "background" mal verändern...

Beim footer suche mal nach "footer" gibt es glaube ich 2 oder 3mal in der stylesheet.css

Viele Grüße

Franky