osCommerce Knowledge Base
Wie kann ich die Farben ändern? ( kommentierte Stylessheet.css ) | Zuletzt aktualisiert: 11th May, 2004 Beitrag ID: 129 |
Die meisten Farben lassen sich in der Datei /catalog/stylesheet.css definieren.
Nachfolgend finden Sie eine kommentierte Version der stylesheet.css, diese ist auf die Grundversion ausgelegt und kann somit von Ihrer teilweise abweichen.
Bei manchen Kombinationen von TR und TD ist zu beachten, dass beide identisch definiert werden, damit kein Rahmen-Effekt entsteht.
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px;
background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px;
color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px;
color: #70d250; text-decoration: underline; }
/* Hauptbereich des Shops */
BODY {
background: #ffffff;
color: #000000;
margin: 0px;
}
/* Farbe der Links im Shop */
A {
color: #000000;
text-decoration: none;
}
/* Farbe bei MouseOver */
A:hover {
color: #AABBDD;
text-decoration: underline;
}
FORM {
display: inline;
}
/* Kopfbereich der Seite wo das Banner von oscommerce eingefuegt ist */
TR.header {
background: #ffffff;
}
/* Navigationszeile unmittelbar unter dem Kopfbereich */
TR.headerNavigation {
background: #bbc3d3;
}
/* Navigationszeile z.B. die >> Zeichen */
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
}
/* Navigationszeile Textfarbe */
A.headerNavigation {
color: #FFFFFF;
}
/* Navigationszeile bei MouseOver */
A.headerNavigation:hover {
color: #ffffff;
}
/* Einblendung bei Fehler oder Warnung z.B. AGBs nicht akzeptiert */
TR.headerError {
background: #ff0000;
}
/* Einblendung bei Fehler oder Warnung z.B. AGBs nicht akzeptiert */
TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}
/* Einblendung beim Versand eines neuen Passworts */
TR.headerInfo {
background: #00ff00;
}
/* Einblendung beim Versand eines neuen Passworts */
TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}
/* Balken unten mit Datum und Anzahl Zugriffe */
TR.footer {
background: #bbc3d3;
}
/* Balken unten mit Datum und Anzahl Zugriffe */
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight: bold;
}
/* Farbe des Rahmen um alle Boxen */
.infoBox {
background: #b6b7cb;
}
/* Fuellfarbe aller Boxen */
.infoBoxContents {
background: #f8f8f9;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.infoBoxNotice {
background: #FF8E90;
}
.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
/* Fuellfarbe Ueberschrift aller Boxen */
TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #bbc3d3;
color: #ffffff;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
/* Farbe Produktliste ungerade Zeilen */
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd,
TR.payment-odd, TR.productListing-odd, TR.productReviews-odd,
TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f4f7fd;
}
/* Farbe Produktliste gerade Zeilen */
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even,
TR.payment-even, TR.productListing-even, TR.productReviews-even,
TR.upcomingProducts-even, TR.shippingOptions-even {
background: #ffffff;
}
TR.productListing-heading {
background: #d2e9fb;
}
/* Produkttabelle Ueberschrift Fuellfarbe */
TD.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #d2e9fb;
color: #000000;
font-weight: bold;
font-variant: small-caps;
}
TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
/* Farbe Seitenauswahl unten rechts */
A.pageResults {
color: #0000FF;
}
/* Farbe Seitenauswahl unten rechts bei bei MouseOver */
A.pageResults:hover {
color: #0000FF;
background: #FFFF33;
}
/* Ueberschrift Farbe wie unser Angebot, Kategorien, etc. */
TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #9a9a9a;
}
TR.subBar {
background: #f4f7fd;
}
/* Sub Titelzeile z.B. Es wurden keine Artikel gefunden ... */
TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}
/* Haupt-Schrift */
TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}
TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
/* Farbe der neuen Artikel im Warenkorb */
SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
TEXTAREA {
width: 100%;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
/* Farbe Schriftzug Gast bei der Begruessung */
SPAN.greetUser {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #f0a480;
font-weight: bold;
}
/* Formularbereich bei Weiterempfehlungen und Kundenkonto */
TABLE.formArea {
background: #f1f9fe;
border-color: #7b9ebd;
border-style: solid;
border-width: 1px;
}
TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
/* MouseOver-Balken im checkout-Bereich */
.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }
/* Navigationsleiste unten im checkout */
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif;
font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px;
color: #000000; }
Weitere Hilfe über die Gestaltung der CSS können Sie auch im Internet finden.


