Anleitungen

Jedes in Smartstore.biz 5 verwendete Theme hat eine eigene Style-Datei, genannt screen.css. Sie unterscheiden sich zum Teil voneinander. Dies ist eine Erläuterung der Datei, wie sie im Theme Basic verwendet wird.

/*//////////////////////////////////////////////

//// GENERIC ELEMENT FORMATTING

//////////////////////////////////////////////*/

body{

background: @ color:background @; Hintergrundfarbe der ganzen Seite

color:@ color:foreground @; Allgemeine Schriftfarbe

margin: 5px; Abstand vom Rand

text-align: @ theme-param:site-align @; Einstellung im Programm: zentriert oder linksbündig

}

#page{ innere Tabelle, in der der Shop sitzt

width: 900px; Breite der Tabelle

<sm:script>

var sSiteAlign = toStr(ThemeParam("site-align"));

if(sSiteAlign == 'center'){

output("margin:auto;");

}; sorgt dafür, dass, wenn zentriert gewählt ist, der Abstand rechts und links gleich ist

</sm:script>

}

body,td,div,p{ Allgemein, Tabellenzeilen, Divs, normale Schrift in einem Absatz

font-family: @ font:medium/face @; Schriftart, shopumfassend

font-size: @ font:medium/size @; Schriftgröße

font-weight: @ font:medium/weight @; Schriftgewicht (fett, normal). Das alles wird aus der global.config im Ordner Themes übernommen.

}

th{ oberste Tabellenzeilen mit Überschriften

font-family: @ font:medium/face @;

font-size: @ font:medium/size @;

}

tfoot td{color: @ color:text.weak @} Tabellenzeile, die als Fußzeile gekennzeichnet ist

img{border:0} Allgemeine Bilder

.cnt-def img.thumb Vorschaubild , .cnt-def img.nopic Platzhalter, .cnt-def img.category-image Warengruppenbild, .cnt-def img#product_picture Produktbild {border: 1px solid @ color:alt.dark @} > in einem Container "Standard"

.cnt-alt img.thumb, .cnt-alt img.nopic, .cnt-alt img.category-image, .cnt-alt img#product_picture {border: 1px solid @ color:main.dark @}

a{color: @ color:hyperlink @} > in einem Container "Alternativ"

hr{durchgezogene Linie

width: 100%; Breite

height: 1px; Höhe

margin-top: 3px; Abstand nach oben

margin-bottom: 3px; nach unten

}

 

/*//////////////////////////////////////////////

//// BREADCRUMB NAVIGATION Sie sind hier....

//////////////////////////////////////////////*/

#breadcrumb{border-bottom: 1px solid @ color:text.weak @} Strich unten drunter

a.breadcrumb{text-decoration: none;} kein Unterstrich

a.breadcrumb:hover{text-decoration: underline;} Unterstrich beim Mausdraufzeigen

/*//////////////////////////////////////////////

//// TEXT FORMATTING

//////////////////////////////////////////////*/

.t-imgsub{background:@ color:main.light @; padding: 2px} /* Image subtitles/description */

.t-em{font-weight:bold; text-transform:uppercase; color:@ color:alt.text.em @;} /* emphasized text */

.t-weak{color:@ color:text.weak @;} /* weakened text */ Textformatierung, kommt an vielen Stellen im Shop vor

 

/*//////////////////////////////////////////////

//// GENERIC LIST FORMATTING kommt mehrfach im Shop vor, wo mehrere Zeilen als Liste formatiert sind

//////////////////////////////////////////////*/

.list{table-layout:auto; width:100%}

.list-intro{padding:3px;padding-bottom:5px;text-align:center}

.list-footer{padding:3px;padding-bottom:5px;text-align:center}

.list-group{

text-align:right;

/*background:@ color:main @;*/

}

.list-item{}

.list-item-alt{background:@ color:alt.light @}

.list-item-border{border: 1px solid @ color:alt.dark @}

.list-item-list-info{}

.list-item-partslist{background:@ color:main.light @}

.list-item-partslist-header{font-weight:bold;padding:2px}

.list-item-partslist-item{padding:2px}

.list-item-hsep{ Trennlinien horizontal

background-image: url(@ image:hsep_default @);

background-repeat:repeat-y;

margin: 0 6px 0 6px;

line-height: 1px;

width: 3px;

height: 100%;

border: 0;

padding: 0;

}

.list-item-vsep{ Trennlinien vertikal

background-image: url(@ image:vsep_default @) ;

background-repeat:repeat-x;

margin: 6px 0px 6px 0;

line-height: 1px;

width: 100%;

height: 3px;

}

 

/*//////////////////////////////////////////////

//// ATTRIBUTELIST FORMATTING

//////////////////////////////////////////////*/

/* [inherited from global.css] */  Einstellungen werden aus der Datei global.css übernommen

 

/*//////////////////////////////////////////////

//// BANNER AREA (including level1-navigation) Bereich mit dem Hintergrundbanner, dem Shoplogo und der obersten Navi

//////////////////////////////////////////////*/

#topnav{width: 900px} Breite

#nav-level1{text-align: right; padding: 0px 0px 4px 0px} Ausrichtung oberste Navi

#banner{ Hintergrundbanner

/*position: relative;*/

text-align: left; Banner links

width: 900px; Breite

height: 120px; Höhe

background: url('@ image:logo @') no-repeat @ color:main.dark @; Hintergrundfarbe und Einbindung des Banners

border-top: 1px solid @ color:main.dark @; Rahmen oben

border-bottom: 1px solid @ color:main.dark @; Rahmen unten

overflow: hidden;

}

#clogo{ Shoplogo

position: relative;

left: @ script:10 + Number(getProjectSetting('logo-padding-horizontal')) @px; Abstand von links (einstellbar im Programm) plus 10

top: @ script:10 + Number(getProjectSetting('logo-padding-vertical')) @px; Abstand von oben (einstellbar im Programm) plus 10

overflow: hidden;

}

#nav-level1 a{

color: @ color:main.dark @; Linkfarbe oberste Navi

text-decoration: none; kein Unterstrich

}

#nav-level1 a:hover{text-decoration: underline} Unterstrich bei Mausdrauf

#nav-level1 span{padding:0px 8px 0px 8px; color: @ color:main.dark @} Abstand der Links voneinander, Farbe der Trennstriche

 

/*//////////////////////////////////////////////

//// LEVEL2 NAVIGATION obere Warengruppennavi

//////////////////////////////////////////////*/

#nav-level2{

position: relative;

width: 100%;

/*background: url('@ image:bg_nav_level2 @') bottom repeat-x;*/

z-index: 2;

}

#nav-level2 a{ Einstellungen für die Links der oberen Warengruppennavigation

display: block;

float: left;

padding: 8px 12px 6px 2px; Abstand nach allen Seiten

border-right: 1px solid @ color:background @; Trennstrich zwischen den Links, sieht man in der Linie darunter

background: url('@ image:bg_nav_level2 @') left bottom repeat-x;  Linie unter den Links

color: @ color:main.dark @; Farbe

text-decoration: none; kein Unterstrich

}

#nav-level2 a:hover{

background: url('@ image:bg_nav_level2_active @') bottom repeat-x; Linie unten bei Mouseover

color: #0000CC; Schriftfarbe bei Mouseover

}

#nav-level2 a.selected{ Gewählter Link

font-weight: normal;

color: #0000CC; Schriftfarbe

background: url('@ image:bg_nav_level2_active @') bottom repeat-x @ color:alt.light @;

}

#nav-level2 a.selected:hover{ Gewählter Link, Mouseover

color: @ color:main.dark @; Schriftfarbe

background: url('@ image:bg_nav_level2_active @') bottom repeat-x @ color:alt.light @; Hintergrundbild

}

#nav-level2-back{ Restlicher Platz neben den Links

clear: both;

position: relative;

width: 100%;

line-height: 1px;

height: 5px;

top: -5px;

margin-bottom: 5px;

background: url('@ image:bg_nav_level2 @') bottom repeat-x;

z-index: 1;

}

 

#pane-parent{width: 900px} Tabellen im mittleren Teil

#pane-left{width: @ script:g_lLeftPaneWidth @px} linke Seite, Breite einstellbar im Programm

#pane-body{width: 100%} Mittelteil

/*#pane-right{width: 170px}*/ rechte Seite, Breite voreingestellt

 

/*//////////////////////////////////////////////

//// SEARCHBAR FORMATTING  Sucheseite und Schnellsuche

//////////////////////////////////////////////*/

#searchbar {width: 100%} Tabelle Sucheseite

#searchbar form{padding: 0; padding-bottom:4px margin: 0px}

#quicksearch td{padding: 5px} Schnellsuche Tabellenzeilenabstand

#quicksearch form{display: inline}

#quicksearch input{vertical-align: middle; margin-right: 4px} Textfeld Abstand rechts

input.quicksearch-term{border: 1px solid @ color:alt.dark @; padding: 1px; width: 110px} Rahmen und Länge des Textfeldes

/*//////////////////////////////////////////////

//// SUBNAVIGATION (Level 3 and deeper). Linke Navi und

//// Includes MINIBASKET because similar. Mini-Warenkorb

//////////////////////////////////////////////*/

#nav-level3, #minibasket{

width: 100%;

margin-bottom: 5px; Abstand nach unten

padding: 0px;

background: @ color:nav.level3 @; Hintergrundfarbe, wird in der theme.config generiert

color: @ color:nav.level3.text @; Schriftfarbe, wie oben

overflow: hidden;

}

#minibasket{margin-bottom: 10px} Abstand nach unten

#nav-level3 a, #searchbar a, #minibasket a{color: @ color:nav.level3.text @; text-decoration:none} Linkfarbe

#minibasket a:hover{text-decoration:underline}

#nav-level3 ul{ "Liste" der linken Navi

list-style-type: none;

margin: 0px;

padding: 0px;

}

#nav-level3 li{padding: 0px; margin: 0px}

#nav-level3 li a{Links links :-)

display: block;

padding: 3px 0px 3px 16px; Abstände

text-decoration: none;

color: @ color:nav.level3.text @; Linkfarbe der linken Navi

border-bottom: 1px dotted #E0E0E0; Trennstriche

overflow: hidden;

}

#nav-level3 li a:hover{

background: url('@ image:bullet_light @') no-repeat 3px center;} Grafik neben den Links bei Mouseover

#nav-level3 li a.selected{

font-weight: bold; Fettschrift bei gewählter Warengruppe

}

#nav-level3 li a.expanded{ Aufgeklappte Warengruppe

padding-left: 5px;

padding-right: 12px;

background: url('@ image:bullet_light_top @') @ script:g_lLeftPaneWidth-15 @px center no-repeat @ color:alt.dark @; Grafik neben den Links

color: @ color:alt.light @;

border-bottom: 1px solid @ color:background @;

}

#nav-level3 li a.expanded:hover{ Aufgeklappt, Mouseover

background: url('@ image:bullet_light_top @') @ script:g_lLeftPaneWidth-15 @px center no-repeat @ color:nav.level3 @;

color: @ color:alt.light @;

}

.minibasket{width: @ script:g_lLeftPaneWidth-6 @px; margin: 3px; color: @ color:nav.level3.text @} Miniwarenkorb Breite, Schriftfarbe

.minibasket-value{text-align: right; font-weight: bold} Miniwarenkorb Zahlen

.minibasket-footer{text-align: right} Miniwarenkorb Fußzeile mit Link

 

/*//////////////////////////////////////////////

//// FOOTERBAR FORMATTING Tabelle im Footer

//////////////////////////////////////////////*/

#footer{

width: 100%;

margin-top: 10px; Abstand nach oben

padding: 10px; Abstand nach innen

text-align: center; Ausrichtung zentriert

border-top: 1px solid @ color:main @; Linie oberhalb

overflow: hidden;

}

#nav-footer a{text-decoration: none} Links im Footer

#nav-footer a:hover{text-decoration: underline} Mouseover

#nav-footer span{padding:0px 8px 0px 8px; color: @ color:main.dark @} Abstand und Trennstriche

 

/*//////////////////////////////////////////////

//// PAGINATOR zuständig für die Links, die erscheinen, wenn man Produktlisten auf mehrere Seiten verteilt

//////////////////////////////////////////////*/

#paginator-top, #paginator-bottom{

background-color: @ color:main.dark @;

padding: 4px;

}

#paginator-top{border-bottom: 1px solid @ color:background @}

#paginator-bottom{border-top: 1px solid @ color:background @}

#paginator a.pi, #paginator span{

display: block;

font-weight: bold;

width: 22px;

height: 14px;

padding-top: 0px;

padding-bottom: 0px;

text-align: center;

vertical-align: middle;

margin-right: 0px;

border-right: 1px solid @ color:main.light @;

color: @ color:main.light @;

float: left;

}

#paginator a.pi:link, #paginator a.pi:visited, #paginator a.pi:active, #paginator span.pi-ellipsis{background:transparent; color: @ color:main.light @;}

#paginator a.pi:hover{background:transparent; color:@ color:alt @; text-decoration:underline}

#paginator span.pi-active{background:@ color:main.light @; color:@ color:main.dark @}

#paginator a.pi-last, #paginator span.pi-last{border-right:none}

 

/*//////////////////////////////////////////////

//// CONTAINER FORMATTING formatiert die verschiedenen Container, die man in den Modulen auswählen kann

//////////////////////////////////////////////*/

.cnt-def{ Container Standard

width: 100%;

/*border: 1px solid @ color:main @;*/

background: @ color:main.light @;} Hintergrundfarbe

.cnt-def-header{

font-weight: bold;

color: @ color:main.text @; Schriftfarbe der Überschrift

border-bottom: 1px solid @ color:background @; Linie darunter

background: url('@ image:tab_corner_right_main @') right top no-repeat @ color:main @; Hintergrund der Tabellenzeile mit der Überschrift, enthält die kleine Ecke

padding: 5px 10px 5px 5px; Abstand

}

.cnt-def-body{

color: @ color:main.light.text @; Schriftfarbe im Inneren des Moduls

}

.cnt-alt{ Container Alternativ

width: 100%;

/*border: 1px solid @ color:main @;*/

background: @ color:alt.light @;}

.cnt-alt-header{

font-weight: bold;

color: @ color:alt.text @;

border-bottom: 1px solid @ color:background @;

background: url('@ image:tab_corner_right_alt @') right top no-repeat @ color:alt @;

padding: 5px 10px 5px 5px;

}

.cnt-alt-body{

/*color: @ color:alt.light.text @;*/

}

.cnt-simple{width: 100%} Container Simpel

.cnt-simple-header{

color: @ color:text.weak @;

font-weight: bold;

padding: 5px 5px 0px 0px;

border-bottom: 1px solid @ color:text.weak @;

}

.cnt-simple-body{

/* */

}

.cnt-hilite{width: 100%;} Container Hervorgehoben

.cnt-hilite-header{

text-align: center;

background: url('@ image:bg_cnt_hilite_header @') left top repeat-x @ color:alt.light.darker @; Hintergrundbild der Überschrift

border: 1px solid @ color:alt @; Rahmen

color: @ color:alt.text @;

font-weight: bold;

padding: 5px;

}

.cnt-hilite-body{

/* */

}

.cnt-body{

padding: 0px;

}

div.cnt-special-header{  Überschrift des Miniwarenkorbs

font-weight: bold;

color: @ color:alt.light @;

background: url('@ image:tab_corner_right_alt_dark @') right top no-repeat @ color:alt.dark @;

padding: 5px 10px 5px 5px;

border-bottom: 1px solid @ color:background @;

}

/*/////////////////////////////////////////////////////////////////

/// CONTAINER SPECIFICATION (overriding default text and link Formatiert Schrift und Links in den Innenzeilen der verschiedenen Container

/// formatting according to container background colors).

/// This technique requires invalid HTML, but it worls perfectly

/// in any browser and solves our color management problem.

/////////////////////////////////////////////////////////////////*/

#cnt-def *.cnt-body *{color:@ color:main.light.text @}

#cnt-def *.cnt-body a{color:@ color:hyperlink.light @}

#cnt-def *.cnt-body *.t-em{color:@ color:alt.dark @;}

#cnt-def *.cnt-body *.t-weak{color:@ color:main.text.weak @;}

#cnt-def *.cnt-body *.t-imgsub{background:@ color:alt.light @}

#cnt-alt *.cnt-body *{color:@ color:alt.light.text @}

#cnt-alt *.cnt-body a{color:@ color:hyperlink.light @}

#cnt-alt *.cnt-body *.t-em{color:@ color:main.dark @;}

#cnt-alt *.cnt-body *.t-weak{color:@ color:alt.text.weak @;}

#cnt-alt #paginator a.pi{background:transparent; color:@ color:main.dark @}

#cnt-alt #paginator a.pi:hover{background:transparent; color:@ color:alt.dark @}

#cnt-alt #paginator span.pi-active{background:@ color:alt @; color:@ color:alt.text @}

 

/*////////////////////////////////////////////////

//// CHECKOUT BAR auf den Rechnungsseiten, Schritt 1...

////////////////////////////////////////////////*/

#checkout-bar{

background-color: transparent; Hintergrundfarbe transparent

border-collapse: collapse;

}

#checkout-bar td{padding: 2px}

.checkout-item{

color: @ color:text.weak @; Schriftfarbe

border: 2px solid @ color:alt.dark @; Rahmen

}

.checkout-item div{

color: @ color:text.weak @; kleine Schrift unter der Überschrift

}

.checkout-item-active{ Aktive Tabellenspalte

color: @ color:alt.dark @;

background: @ color:alt.light @;

border: 2px solid @ color:alt.dark @;

}

.checkout-item-active div{

color: @ color:alt.dark @;

}

/*////////////////////////////////////////////////

//// BASKET FORMATTING Warenkorb-Seite

////////////////////////////////////////////////*/

#basket{

border-collapse: collapse;

border-top: 2px solid @ color:alt.dark @;

border-bottom: 2px solid @ color:alt.dark @;

}

#cnt-def #basket, #cnt-alt #basket{border-top:none} Schrift und Links je nach ausgewähltem Container, alt-item bestimmt den Wechsel zwischen mehreren Zeilen mit Produkten

#cnt-hilite #basket, #cnt-simple #basket{border-top:none}

#basket thead th{border-bottom: 1px solid @ color:alt.dark @}

#basket tbody td.alt-item{background:@ color:alt.light @}

#cnt-def #basket tbody td.alt-item, #cnt-alt #basket tbody td.alt-item{background:@ color:background @;}

#cnt-alt #basket tbody td.alt-item{background:@ color:background @;}

#basket tfoot td{color:@ color:foreground @}

#basket tfoot td.first-item{border-top: 1px solid @ color:alt.dark @}

#basket tfoot td.basket-summary{font-weight: bold}

table.basket-buttons{margin: 10px 0px 10px 0px}

#cnt-def table.basket-buttons td, #cnt-alt table.basket-buttons td{padding: 0px 5px 0px 5px}

/*

#product_price{ Größe und Farbe des Preises, Slash und Stern kommentieren diese Einstellung aus, sodass sie nicht angewendet wird. Soll das Aussehen des Preises geändert werden, müssen die Zeichen entfernt werden.

font-size: 14px;

color: #ff0000;

}

.t-price-list{

font-size: 14px;

color: #ff0000;

}

*/