Webshop Tutorial. E-Commerce ECM ERP SFA EDI. Backup. Aussehen des Webshops anpassen Vorlagen verwenden und ändern.

Transkript

1 Webshop SFA ECM Backup E-Commerce ERP EDI Aussehen des Webshops anpassen Vorlagen verwenden und ändern

2 Inhaltsverzeichnis 1 EINLEITUNG EINFÜHRUNG BEISPIELE FÜR DESIGNVORLAGEN MENÜOPTIONEN 5 2 VORLAGEN KONFIGURIEREN VORINSTALLIERTE VORLAGEN AKTIVIEREN PLUGINS ANPASSEN PLUGIN-VORLAGE AUFRUFEN PLUGIN-VORLAGE MITHILFE VON HTML-SYNTAX EDITIEREN DAS STANDARD-LAYOUT EINES PLUGINS DEFINIEREN SEITEN ANPASSEN SEITEN-VORLAGE AUFRUFEN SEITEN-VORLAGE MITHILFE VON HTML-SYNTAX EDITIEREN DAS STANDARD-LAYOUT EINER SEITE DEFINIEREN MOBILE VERSION ANPASSEN 17 3 BEISPIELE FÜR DIE BEARBEITUNG DER PLUGINS PRODUKTDARSTELLUNG-PLUGIN ANPASSEN INSTANZEN DES PRODUKTDARSTELLUNGS-PLUGINS KONFIGURIEREN LAYOUT DES PRODUKTDARSTELLUNGS-PLUGINS ANPASSEN CSS-STILE DES PRODUKTDARSTELLUNGS-PLUGINS ANPASSEN AUSSEHEN DES PRODUKTNETZ-PLUGINS ANPASSEN INSTANZEN DES PRODUKTNETZ-PLUGINS KONFIGURIEREN LAYOUT DES PRODUKTNETZ-PLUGINS ANPASSEN CSS-STILE DES PRODUKTNETZ-PLUGINS ANPASSEN 25 4 BEISPIEL FÜR DAS EDITIEREN EINER SEITE ANORDNUNG DER HOMEPAGE-ELEMENTE ANPASSEN LAYOUT DER HOMEPAGE ANPASSEN CSS-STILE DER HOMEPAGE ANPASSEN 28 5 EXPORT UND IMPORT ZUR VERFÜGUNG STEHENDER VORLAGEN VORLAGEN EXPORTIEREN VORLAGEN IMPORTIEREN 36 6 FRAGEN 37 2

3 1 Einleitung 1.1 Einführung Dieses richtet sich an fortgeschrittene Benutzer, die weitreichende Veränderungen am Layout des Comarch Webshops und seiner einzelnen Komponenten vornehmen möchten. Der Comarch Webshop wird mit HTML- und CSS-Vorlagen geliefert. Sie können diese unverändert nutzen oder Ihren eigenen Vorstellungen anpassen. Entspricht zum Beispiel ein Standard-Layout nicht Ihren Vorstellungen? Oder wollen Sie gern einen individuellen Look Ihrer Plugins erreichen und dabei das ganze Änderungsprozedere beschleunigen? Dann wird Ihnen dieses behilflich sein. In den folgenden Kapiteln wird zunächst der Vorlagenbereich des Webshops beschrieben, und danach Beispiele für dessen Verwendung gegeben. HINWEIS: Im Comarch ERP Webshop haben alle neueröffneten Shops ab Version die neuen Vorlagen installiert. i 1.2 Beispiele für Designvorlagen 3

4 4

5 1.3 Menüoptionen Die folgenden Menüoptionen kommen häufig in der Vorlagenbearbeitung vor: Klicken, um Änderungen vorzunehmen Änderungen speichern Schließt aktuelle Bearbeitungsfenster, ohne Änderungen zu speichern Trägt im Bearbeitungsfenster die Liste der Elemente ein, aus denen ein Objekt konstruiert wird; überschriebt den Inhalt, der sich im Bearbeitungsfenster befindet; speichert Änderungen nicht. Das ausgewählte Objekt auf Standardeinstellungen zurücksetzen, Aktion ist irreversibel 2 Vorlagen konfigurieren In diesem Kapitel erfahren Sie, wie Sie die HTML- und CSS-Vorlagen und weitere Elemente ändern können, die das Aussehen Ihres Webshops beeinflussen. Beachten Sie auch: Die Bearbeitung einiger Elemente sind mit Änderungen von grafischen Elementen unter Seiten verwalten/grafische Themen/Grafische Elemente der Plugins verbunden. Grafische Elemente für die Produktverfügbarkeit sind unter Konfiguration/Sortimentdarstellung/Verfügbarkeit zu finden. Unter Konfiguration/Sortimentdarstellung/Lagerbestände befinden sich Grafiken zu den Lagerbeständen. Um den Code bearbeiteter Plugins von eigenen Grafiken zu nutzen, kann man diese unter Inhalt verwalten/benutzerdateien/dateiliste hochladen. Nach dem Hochladen erscheint ein Zugriffspfad. Im Shop vorkommende Befehle müssen unter Konfiguration/Shop-Konfiguration/Sprache Bearbeitung editiert werden. 2.1 Vorinstallierte Vorlagen aktivieren 1. Gehen Sie im Verwaltungspanel des Webshops zu Seiten verwalten. Innerhalb der Vorlagen haben Sie Zugang zu drei Optionen: Konfiguriation Plugins Seiten 5

6 2. Klicken Sie auf Konfiguration. Konfiguration der Vorlagen 3. Falls noch nicht geschehen, setzen Sie ein Häkchen bei Aktiv, um die mitgelieferten Desginvorlagen zu aktivieren. 4. Klicken Sie auf Speichern. Nach der Aktivierung der Vorlagen ist die Auswahl eines weiteren Parameters möglich: global.css. 5. Setzen Sie ein Häkchen bei global.css. 6. Klicken Sie auf Speichern. 2.2 Plugins anpassen Bevor Sie jetzt das Aussehen eines Plugins anpassen, müssen Sie dieses unter Seiten verwalten/plugins/instanzen konfiguriert haben. Falls Sie dies noch nicht getan haben, gehen Sie nun zu Seiten verwalten/plugins/instanzen, Karteireiter Konfiguration und geben Sie unter Seiten an, wo im Webshop das Plugin erscheinen soll. 6

7 2.2.1 Erweiterte Einstellungen überprüfen Plugins 1. Klicken Sie im Seitenmenü auf Plugins. Der Bereich der Plugins besteht aus zwei Registerkarten: Plugins Hier können Sie Bearbeitungen an Plugins, die im Shop vorhanden sind, vornehmen. Standard Standardeinstellungen für Plugins und Widgets (kleine Plugins, Teile von Plugins). 2. Öffnen Sie ein Plugin, indem Sie auf den Karteireiter Plugins gehen und auf das Bearbeitungssymbol des jeweiligen Plugins klicken. Dadurch baut sich das Editorfenster auf

8 Das Editiorfenster beinhaltet: 1) Aktivitätsfeld, welches eine Aktivierung oder Deaktivierung durchgeführter Änderungen am Plugin ermöglicht. 2) Editierfeld hier können Sie Änderungen am Plugin eingeben. 3) Liste der verfügbaren Elemente. 4) Funktionstasten: Erstellen setzt für das Editierprogramm verfügbare Elemente ein. Standard wiederherstellen setzt das Plugin auf Standardeinstellungen zurück, die im Karteireiter Standard definiert sind. Speichern speichert vorgenommene Änderungen. Abbrechen schließt das Editorfenster, ohne vorgenommene Änderungen zu speichern. Im oben beschriebenen Editorfenster werden die Widgets einschließlich ihrer Elemente bearbeitet. Überschrift Inhalt HINWEIS: Der Editierungsbereich für das Plugin kann mehrere Eingabefelder beinhalten, welche für verschiedene Elemente des Plugins und seine unterschiedlichen Zustände verantwortlich sind. Unter Zuständen versteht man z.b. das Aussehen eines Plugins vor und nach dem Login eines Benutzers. i Plugin-Vorlage mithilfe von HTML-Syntax editieren Die Editierung der Plugins basiert auf der HTML- und CSS- Syntax, sowie den folgenden zusätzlichen Faktoren: <cdn_t id= element /> Element mit angegebener ID, welches aus der Liste der verfügbaren Elemente gewählt werden kann. BEISPIEL: Um ein Steuerelement einzufügen, das die Eingabe des Logins ermöglicht, sollte in das Editierungsfeld folgender Teilcode hinzugefügt werden: <cdn_t id= username />. <cdn_t:loc id= napis /> fügt am entsprechend angegebenen Ort die Benennung der angegebenen ID ein (übersetzt - je nach Sprachauswahl), Befehle können in Konfiguration/ Shop-Konfiguration/ Sprache Bearbeitung bearbeitet werden. BEISPIEL: Um die Benennung Passwort einzufügen, welches sich je nach Auswahl der Sprache im Shop ändern kann, muss das folgende Fragment eingegeben werden: <cdn_t:loc id= ComPassword />. Das folgende Beispiel zeigt das Login-Plugin. 8

9 Hinweis: Die Groß- und Kleinschreibung ist bei der ID von Bedeutung, bitte achten Sie daher beim Ausfüllen darauf. Hinweis: Der Tag <cdn_t:loc id= /> wird nicht im Objekt Widget unterstützt (Plugins Standard Widget). i i Das Standard-Layout eines Plugins definieren Im Karteireiter Standard kann das Standard-Layout von Plugins und Widgets definiert werden. 9

10 1. Klicken Sie auf Widget, um die Standardeinstellungen für Widgets zu verändern. Das hier definierte Layout wird auf die neu erstellten Widgets übertragen sowie auf jene, für die die Funktion Standard wiederherstellen verwendet wird. Hinweis: Die Funktion Standard wiederherstellen in jenem Karteireiter, in dem die Standardansicht definiert wird, stellt das Standard-Layout, das im Shop-Code definiert wurde, wieder her. i 2. Nehmen Sie eventuelle Änderungen im Editierfeld vor und speichern Sie. 3. Klicken Sie auf Plugin, um eine Liste der der verfügbaren Plugin-Standardvorlagen zu sehen. 4. Wählen Sie das gewünschte Plugin zur Editierung aus. 5. Nehmen Sie die gewünschten Änderungen vor und speichern Sie. 10

11 2.3 Seiten anpassen In diesem Kapitel erfahren Sie, wie Sie das Aussehen der Webshop-Seiten anpassen können. Beachten Sie auch: Den Inhalt der einzelnen Boxen, sowie das Layout der darin enthaltenen Plugins kann unter Seiten verwalten/plugins/seiten festgelegt werden. Unter Seiten verwalten/plugins/instanzen können Sie konfigurieren, auf welchen Seiten die Plugins erscheine. Dort können Sie neue Plugins hinzufügen. Weiterhin können Sie bei der Bearbeitung einzelner Plugins unter Seiten festlegen, wo diese verfügbar sein sollen Seiten-Vorlage aufrufen Seiten 1. Gehen Sie im linken Menü zu Vorlagen Seite. Der Bereich Seiten besteht aus zwei Karteireitern: Seiten zum Editieren der einzelnen Seiten des Shops. Standard ermöglicht die Definition eines Standard-Layouts für Seiten und eines Standard-Stils. 2. Klicken Sie auf den Karteireiter Seiten. 3. Um eine bestimmte Seite aufzurufen, klicken Sie auf das Bearbeitungssymbol neben der entsprechenden Seite. Das Editorfenster öffnet sich

12 Das Editorfenster beinhaltet: 1) Feld, das die CSS-Stile aktiviert, die später im Editor gespeichert sind. 2) CSS-Editor, mit dem Sie Stile für entsprechende Seiten hinzufügen können. 3) Funktionstasten für den CSS-Editor Standard wiederherstellen vervollständigt den CSS-Editor im Karteireiter Standard mit ergänzenden Werten. Speichern speichert durchgeführte Änderungen. Abbrechen schließt den Editor, ohne durchgeführte Änderungen zu speichern. 4) Feld, das das Layout der Seite aktiviert, welches im unteren Editor aufgelistet ist. 5) HTML-Editor, der beliebige Änderungen am Layout der Seite ermöglicht. 6) Liste von Elementen, die auf der Seite eingesetzt werden können. 7) Funktionstasten für den Seiten- (HTML-)Editor Erstelle erstellt für den Editor verfügbare Elemente. Standard wiederherstellen vervollständigt den HTML-Editor im Karteireiter Standard mit ergänzenden Werten. Speichern speichert durchgeführte Änderungen. Abbrechen schließt den Editor, ohne durchgeführte Änderungen zu speichern. 12

13 Hinweis: Im Comarch Webshop gibt es ab der Version zusätzlich die Möglichkeit, für jede Seite weitere Tags zu definieren. i Diese Tags sind der jeweiligen Vorlage zuordnet. 3. Nehmen Sie die gewünschten Änderungen im Editierfeld vor und speichern Sie die Eingaben Seiten-Vorlage mithilfe von HTML-Syntax editieren Nachfolgend ist ein Beispiel zur Editierung von Hauptseiten angeführt. 13

14 Im obigen Beispiel wurde die Seite mit Hilfe von <div> - Tags erstellt, welche die Abschnitte der Seite beinhalten. Sie beschreiben das Aussehen und die Lage. Die Editierung erfolgt in HTML, zusätzlich wird der Tag <cdn_t id= /> verwendet. Mit Hilfe dieses Tags können die Boxen in die Widgets eingefügt werden. Sie können das Layout der Widgets zwischen den einzelnen Boxen unter Seiten verwalten/plugins/seiten ändern, indem Sie einzelne Seiten editieren. Im obigen Editor sind die Widgets per Drag & Drop zwischen den Boxen verschoben worden. Neben jedem Widget wird in Klammern die individuelle ID angezeigt. Diese Nummer wird auch bei CSS verwendet die ID in Form eines solchen Widgets für die Kopfzeile ist beispielsweise #i2. Auf Grundlage dessen erstellen die IDs die Stile Das Standard-Layout einer Seite definieren 1. Gehen Sie auf Vorlagen Seiten - Karteireiter Standard. Hier können Sie das Layout der Seite definieren sowei zusätzliche Tags und CSS-Styles eintragen, die für die neu erstellten Seiten verwendet werden, beziehungsweise in die bestehenden eingetragen werden (falls Sie Standard wiederherstellen nutzen). 14

15 2. Klicken Sie auf CSS, um das Editorfenster zu öffnen, das einen vordefinierten Standard-CSS-Style enthält. 3. Ändern Sie bei Bedarf das CSS und speichern Sie. Die Bearbeitung erfolgt genau wie bei der Bearbeitung der Stile auf den einzelnen Seiten. Hinweis: i Bei der Bearbeitung des CSS-Stile sollte auf die Form der Kommentare geachtet werden, um die Identifizierung der definierten Regel zu erleichtern: /*Kommentar*/ Den folgenden CSS-Styles können zusätzliche Tags hinzugefügt werden, die mit der jeweiligen Vorlage verknüpft sind. Dies ist ein Äquivalent zu den zusätzlichen Template-Tags für die erstellten Vorlagen. 15

16 4. Klicken Sie auf einen Bereich, um den HTML-Editor zu öffnen. 5. Legen Sie bei Bedarf neue Standard-Layouts für Seiten fest und speichern Sie. Hinweis: i Der Gebrauch des Buttons Standard wiederherstellen bewirkt das Zurücksetzen der im Editor vorgenommenen Änderungen auf den vordefinierten Code des Webshops. Um eigene Grafiken auf den editierten Seiten zu nutzen, können Sie diese unter Inhalt verwalten/benutzerdateien/dateiliste hochladen. Nach dem Hochladen erscheint ein Zugriffspfad. Um die in der Sektion HEAD enthaltenen Daten zu editieren, gehen Sie zu Seiten verwalten/seiten verwalten/vorlage zusätzlicher Tags, wo Sie der Sektion HEAD für alle Seiten Tags hinzufügen können. Unter Seiten verwalten/seiten verwalten/seiten können die Daten der Seite vervollständigt werden. Unter Seiten verwalten/seiten verwalten/seiten, Karteireiter Fortgeschritten können den einzelnen Seiten Tags der Sektion HEAD hinzugefügt werden. 16

17 2.4 Mobile Version anpassen 1. Um die mobile Version des Webshops zu gestalten, gehen Sie zum Bereich Konfiguration > Mobile > Konfiguration. 2. Geben Sie im Karteireiter Kopfzeile den Text ein, der auf jeder Seite oben zu finden sein wird. 3. Laden Sie das Logo des Shops für die mobile Version hoch. 4. Gehen Sie zum Karteireiter Grafik. 5. Laden Sie gegebenenfalls Grafiken für die mobile Version hoch. Die Grafik muss im PNG-Format sein und die Maße 478 x 128 Pixel haben. 17

18 6. Gehen Sie zum Karteireiter CSS. 7. Tragen Sie dort gegebenenfalls Stile für die mobile Version ein. Damit können Sie das Aussehen Ihres Shops auch für mobile Nutzer ändern. 8. Speichern Sie Ihre Eingaben. 18

19 3 Beispiele für die Bearbeitung der Plugins Nachfolgend finden Sie Beispiele für die Bearbeitung einiger Plugins, welche häufig im Webshop vorkommen. 3.1 Produktdarstellung-Plugin anpassen In diesem Abschnitt geht es um die Editierung von Plugins zur Produktdarstellung Instanzen des Produktdarstellungs-Plugins konfigurieren 1. Gehen Sie zu Seiten verwalten/plugins/instanzen. 2. Suchen Sie auf der Liste das Plugin mit dem Namen Produktdarstellung und klicken Sie auf das Bearbeitungssymbol In dem sich öffnenden Fenster nehmen Sie im Karteireiter Konfiguration die gewünschten Änderungen vor. 3. Bestätigen Sie die durchgeführten Änderungen mit. 19

20 3.1.2 Layout des Produktdarstellungs-Plugins anpassen Der nächste Schritt widmet sich der Bearbeitung des Plugin-Layouts. 1. Gehen Sie nun unter Seiten verwalten/vorlagen/plugins 2. Wählen Sie auf der Liste unter Plugins das Plugin Produktdarstellung und bearbeiten es nun weiter, indem Sie auf das Bearbeitungssymbol klicken: 3. Nachfolgend ergänzen Sie das Eingabefeld mit folgendem Code: Widget: <div class= wgtheader ><cdn_t id= title /></div> <div class= wgtcontent ><cdn_t id= content /></div> IDr: ProductDetailsHeader <div class= breadcrumbs ><cdn_t id= path /></div> <div class= center > <h1 class= cl ><cdn_t id= name /></h1> <h3><cdn_t id= code /></h3></div> IDr: ProductDetailsPanel <div class= spc1 left ><cdn_t id= newpromo /><cdn_t id= promotion /></div> <div class= pimg spc2 left > <div class= center ><cdn_t id= img /></div> <cdn_t id= media /> </div> <div class= spc3 right > <div class= right ><cdn_t id= manufacturer /></div> <div class= clear ></div> <cdn_t id= rate /> <div class= mtb4 ><cdn_t id= addrate /></div><br><br> <p><cdn_t id= netprice /><cdn_t id= shippingcost /></p> <p class= plabel mtb4 ><cdn_t id= pricelabel /><span class= price > <cdn_t id= price /></span></p> <p class= prevprice ><cdn_t id= previousprice mtb4 /></p><cdn_t id= cart /> <div class= clear ></div><br><br><br> <div><cdn_t id= tell /></div> <div><cdn_t id= ask /></div> </div> <div class= clear ></div> <cdn_t id= details /> ID: ProductDetailsCart <div class= atc > <cdn_t id= addtocart /><cdn_t id= quantity /> </div> <div class= clear ></div> <div class= tar > <cdn_t id= warehouse /><cdn_t id= availability /> </div> 4. Bestätigen Sie die Änderungen mit. Hinweis: In diesem Beispiel wurden nicht alle Elemente des Plugins geändert. Indem Sie das Häkchen im Kontrollkästchen Aktiv entfernen, können Sie die vorgenommenen Änderungen deaktivieren. i 20

21 3.1.3 CSS-Stile des Produktdarstellungs-Plugins anpassen In diesem Schritt werden dem Webshop Stile hinzugefügt, die das Aussehen des Plugins definieren. 1. Gehen Sie unter Seiten verwalten/vorlagen/seiten. 2. Wählen Sie von der Liste Seiten jene Seite aus, auf der das Plugin bearbeitet werden soll und klicken Sie auf das Bearbeitungssymbol: 3. Unter CSS fügen Sie den folgenden Code ein: /*Beginn CSS*/.product.cp_txt h3{color:gray;}.left{float:left;}.right{float:right}.tal{text-align:left;}.tar{text-align:right;}.tar table{float:right;}.center{margin:0 auto; text-align:center;}.promo a,.new a{height:30px; width:80px; background: #f4c13d;display:block; color:#fff; padding-left:10px; lineheight:30px; text-transform:uppercase; -webkit-transition: all 80ms linear; -moz-transition: all 80ms linear; -ms-transition: all 80ms linear; -o-transition: all 80ms linear; transition: all 80ms linear; }.new a{background:#f4633d }.promo a:hover,.new a:hover{height:30px; width:85px; background:#e8a800; text-decoration: none;}.new a:hover{background:#e83000 }.productmedia span.tab{display:none;}.productmedia div.tabc{border:0;}.productmedia table tr td{height:150px; width:150px; background:#fff; border:2px solid #fff;}.productmedia table tr td img{border:0!important;}.productmedia table tr td:hover{border:2px solid #006293;}.plgProduct.iAdd{display:none;}.plgProduct.cur_pt{display:inline;}.spC1{width:10%;min-height:1px;}.spC2{width:56%;}.spC3{width:31%; margin-right:3%; textalign:right;color:#666;}.spc3 span.cur_pt{}.tx_und:after { content: ab sofort ; }.spc3.atc{/*background: #3298c9;*/ width:245px; height:40px; line-height: 40px; color: #fff; padding:0 10px; font-size: 14px;/*border:2px solid #76c2e6;*/float: right; -webkit-transition: all 180ms linear; -moz-transition: all 180ms linear; -ms-transition: all 180ms linear; -o-transition: all 180ms linear; transition: all 180ms linear; /*-webkit-box-sizing: borderbox; -moz-box-sizing: border-box; box-sizing: border-box; */ /* IE9 SVG, needs conditional override of filter to none */ background: url(data:image/svg+xml;base64,pd94bw wgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhr- woi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijewm- CUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcH- Jlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT 0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zm- c2v0psiwjsigc3rvcc1jb2xvcj0iizi0ogfiyiigc3rvcc1vcgfjax- R5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNjI5MyIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(36,138,187,0.8) 0%, rgba(0,98,147,0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,138,187,0.8)), colorstop(100%,rgba(0,98,147,0.8))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* Opera */ background: -ms-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr= #cc248abb, endcolorstr= #cc006293,gradient Type=0 ); /* IE6-8 */ }.spc3.atc:hover{ padding:0 10px; background-color: #006293;}.spC3.aTC a{color:#fff; font-weight: bold; display:inline-block; height:40px;}.spc3.atc a:hover{text-decoration: none;}.spc3.atc input{border:1px solid #a1cfe6; background: #76c2e6; height:20px; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: borderbox;}.spc3.atc img{}.spc3.atc img.imgqtyspin{background:#fff; verticalalign:middle; padding: 2px 0; margin-bottom:4px; }.spc3.atc.cur_pt{}.pimg.center {height:490px; width:490px; display: table-cell; 21

22 vertical-align: middle;}.pimg.center img{}.pimg.center span.b.cur_pt{display:block;} img.cur_pt + span.cur_pt,.spc3 a{padding-left: 4px; lineheight: 18px;color:#006193; font-weight: bold} p.plabel{} p.prevprice{ text-decoration: line-through;} span.price{color:#e83000; font-size: 26px; font-weight: bold; margin:0 0 10px;}.productDetails{padding:0 10px;}.productDetails.cp_tab_on_bg{background: #fff; bordercolor:#d8d8d7; color: #006193}.mtb4{margin:4px 0;}.plgProduct.product{/*-webkit-box-shadow: inset 5px 0px 8px 2px #ddd; box-shadow: inset 5px 0px 8px 2px #ddd;*/}.productdetails.tabc table.feacont tbody tr.feav td{height: 24px;}.productDetails.tabc table.feacont tbody tr.feav td.fean:first-child{width:20%; text-indent: 5px;}.productDetails.tabc table.feacont tbody tr.feav:nthchild(even) {background: #eee} p.featitle {margin:10px 0; font-weight: bold; text-transform: uppercase; text-indent: 5px;}.productManufacturer a.cp_txt img,.productbrand a.cp_txt img{display:block}.breadcrumbs{margin:10px 0 10px 10px;}.wgtHeader{background-color:#fff;fontsize:18px;color:#006293;line-height:24px;padding:6px 4px 4px 6px; border-bottom:2px solid #ddd;}.widget_holder{margin:0 2px; background:#fff; -webkit-boxshadow: 0px 0px 6px 2px #d5d5d5; box-shadow: 0px 0px 6px 2px #d5d5d5;}.tabc{border-width: 1px; border-style: solid; margin-top: -1px; padding:10px 12px; border-color:#d8d8d7;}.plgproduct.product.pimg{float:left; min-width:320px; overflow:hidden;} /*Ende CSS*/ 4. Bestätigen Sie die eingepflegten Stile mit. Hinweis: Das obige Stylesheet stellt nur ein Beispiel dar und kann fehlerhaft sein. Bei der Erstellung von Stilen sollten Sie berücksichtigen, dass nicht alle Browser CSS3 unterstützen. Hinweis: Dies ist nur ein Beispiel. Sie müssen möglicherweise grafische Elemente des Shops sowie Standardtexte, die im Plugin verwendet werden, anpassen (z.b. ab sofort verfügbar ) Es wird weiterhin empfohlen, Attribute, die das Produkt detailliert beschreiben, sowie gute Bilder einzufügen. i i 22

23 23

24 3.2 Aussehen des Produktnetz-Plugins anpassen Dieses Beispiel setzt sich mit der Editierung des Plugins Produktnetz auseinander. Dies ist eine Produktliste, die individuell vom Administrator des Webshops angepasst werden kann Instanzen des Produktnetz-Plugins konfigurieren 1. Gehen Sie zu Seiten verwalten/plugins/instanzen. 2. Suchen Sie in der Liste nach dem Plugin Produktnetz und öffnen Sie es mit dem Bearbeitungssymbol: 3. In dem sich öffnenden Fenster gehen sie unter Konfiguration wie folgt vor: 4. Die durchgeführten Änderungen bestätigen Sie mit. 24

25 3.2.2 Layout des Produktnetz-Plugins anpassen Der nachfolgende Abschnitt setzt sich mit der Bearbeitung des Plugin-Layouts auseinander. 1. Gehen Sie zu Seiten verwalten/vorlagen/plugins. 2. In der Liste unter Plugins wählen Sie das Plugin Produktnetz und öffnen es mit dem Bearbeitungssymbol: 3. Danach ergänzen Sie die drei Eingabefelder mit dem folgenden Code: Feld Widget <div class= wgtheader ><cdn_t id= title /></div> <div class= wgtcontent ><cdn_t id= content /></div> Feld ID: ProductGridList <div class= textcenter ><cdn_t id= pager /></div> <cdn_t id= list /> Feld ID: ProductGridListItem <div class= view view-first > <cdn_t id= img /> <div class= mask > <h2><cdn_t id= name /></h2> <p> <cdn_t id= price /><cdn_t id= addtocart /></p> </div> </div> 4. Die durchgeführten Änderungen bestätigen Sie mit CSS-Stile des Produktnetz-Plugins anpassen In diesem Schritt werden dem Webshop Stile hinzugefügt, die das Aussehen des Produktnetz-Plugins definieren. 1. Gehen Sie zu Seiten verwalten/vorlagen/seiten. 2. Wählen Sie von der Liste Seiten jene Seite aus, auf der das Plugin bearbeitet werden soll und beginnen Sie damit, indem Sie auf das Bearbeitungssymbol klicken: 3. In CSS fügen Sie den folgenden Code ein:.view {width: 300px; height: 300px; margin: 10px; float: left; border: 10px solid #F3F3F3; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #000000; cursor: default; }.view.mask,.view.content { width: 300px; height: 300px; position: absolute; overflow: hidden; top: 0; left: 0}.view img { display: block; position: relative}.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 20px; padding: 10px; background: rgba(0, 64, 96, 0.8); margin: 20px 0 20px 0;}.view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; 25

26 text-align: center}.view-first img { transition: all 0.2s linear;}.view-first.mask { opacity: 0; background-color: rgba(90,165,201, 0.7); transition: all 0.4s ease-in-out;}.view-first h2 { transform: translatey(-100px); opacity: 0; transition: all 0.2s ease-in-out;}.view-first p { transform: translatey(100px); opacity: 0; transition: all 0.2s linear;}.view-first:hover img { transform: scale(1.1);}.view-first:hover.mask { opacity: 1;}.view-first:hover h2,.view-first:hover p { opacity: 1; transform: translatey(0px);}.view-first:hover p { transition-delay: 0.1s;}.cp_link.cur_pt.lsticrt > img {display:none;}.b.lstname.cp_link {display: inline-block; text-decoration: none; color: #fff; text-transform: uppercase; margin-bottom: 0px;}.lsticrttxt {display: inline-block; text-decoration: none; background: #004060; font-weight: bold; border: 1px solid #000; color: #fff; padding-top: 15px; width:200px; height:40px; text-transform: uppercase; margin-top: 25px; margin-bottom: 5px; border-radius: 10px;}.lsticrttxt:hover { background: #013650;} /*plg grid*/.prodname{font-size:1.1em;font-weight:bold;} /*plg grid2*/.prodgrid {overflow:hidden; text-align: center;}.prodgrid.p {float:left;overflow:hidden;padding: 0px;margin:0px;}.prodGrid.pb {padding: 2px; margin:1px; overflow: hidden;}.prodgrid.p.brd{border-style: solid; border-width: 1px;}.prodGrid.p.lstname{display: block; height: 34px;overflow: hidden;}.prodgrid.p.pprc{display: block;text-decoration: linethrough;height:17px;}.prodgrid.p.prc{display: block; font-weight: bold; color: #FFF; text-shadow: 3px 3px 4px #000;}.prodGrid.p.bsk.lsticrt {display:inline-block; text-align:left;}.prodgrid.p.bsk.lsticrttxt{position:absolute; margin-left: 6px;margin-top: 8px; font-weight: bold;}.prodgrid.p p.img{height:220px;line-height:220px;}.prodgrid.p p.img a{line-height:220px;}.prodgrid.p p.img img{vertical-align:middle;}.prodgrid.p.newpromo span{display:inline-block; width:24px; height:24px;}.prodgrid.p.newpromo.new{background:transparent url( view/ pl_new.png ) no-repeat 0 0;}.prodGrid.p.newPromo.promo{background:transparent url( view/pl_promo.png ) no-repeat 0 0;} 4. Die eingepflegten Stile bestätigen Sie mit. 4 Beispiel für das Editieren einer Seite Nachfolgend finden Sie ein Beispiel für die Bearbeitung der Homepage eines Webshops. 4.1 Anordnung der Homepage-Elemente anpassen 1. Gehen Sie zu Seiten verwalten/plugins/seiten. 2. Suchen Sie auf der Liste das Plugin Hauptseite und öffnen Sie den Editor durch Klicken auf das Bearbeitungssymbol: 3. In dem sich öffnenden Editorfenster können Sie die Plugins wie folgt erweitern (es ist wichtig, dass sich die Plugins dabei nur in den angezeigten Boxen befinden, da im folgenden Schritt nur jene editiert werden): 26

27 Die Reihenfolge der Boxen muss nicht unbedingt die Reihenfolge der Plugins auf der Seite wiederspiegeln dies hängt ganz von dem erstellten Layout und der CSS ab. 5. Die durchgeführten Änderungen bestätigen Sie mit. 27

28 4.1.1 Layout der Homepage anpassen 1. Gehen Sie unter Seiten verwalten/vorlagen/seiten. 2. In der Liste unter dem Reiter Seiten suchen Sie Hauptseite und wählen zum Bearbeiten der Seite das Bearbeitungssymbol: 3. Anschließend geben Sie in das Feld Seite Folgendes ein: <div class= container cp_txt > <cdn_t id= box_2 /> <cdn_t id= box_1 /> <div class= leftcolumn > <cdn_t id= box_4 /> </div> <div class= content > <cdn_t id= box_6 /> </div> <div class= footer > <cdn_t id= box_12 /> </div> </div> 4. Die durchgeführten Änderungen bestätigen Sie mit CSS-Stile der Homepage anpassen 1. Gehen Sie zu Seiten verwalten/vorlagen/seiten. 2. In der Liste unter dem Karteireiter Seiten gehen Sie (in diesem Beispiel) auf Hauptseite und wählen zum Bearbeiten der Seite das Bearbeitungssymbol: 3. Anschließend geben Sie in das Feld CSS Folgendes ein: body{font-family:arial,verdana, Helvetica Neue, Helvetica, sansserif;font-size:12px;line-height:17px;margin:0px;padding:0 px;} a{text-decoration:none;}a:hover{text-decoration: underline;} a img{border-width: 0px;} p{margin:0px;margin-bottom:2px;} /*netto*/.view { width: 300px; height: 300px; margin: 10px; float: left; border: 10px solid #F3F3F3; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #000000; cursor: default; }.view.mask,.view.content { width: 300px; height: 300px; position: absolute; overflow: hidden; top: 0; left: 0}.view img { display: block; position: relative}.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 20px; padding: 10px; background: rgba(0, 64, 96, 0.8); margin: 20px 0 20px 0;}.view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center}.view-first img { transition: all 0.2s linear;}.view-first.mask { opacity: 0; background-color: rgba(90,165,201, 0.7); 28

29 transition: all 0.4s ease-in-out;}.view-first h2 { transform: translatey(-100px); opacity: 0; transition: all 0.2s ease-in-out;}.view-first p { transform: translatey(100px); opacity: 0; transition: all 0.2s linear;}.view-first:hover img { transform: scale(1.1);}.view-first:hover.mask { opacity: 1;}.view-first:hover h2,.view-first:hover p { opacity: 1; transform: translatey(0px);}.view-first:hover p { transition-delay: 0.1s;}.cp_link.cur_pt.lsticrt > img {display:none;}.b.lstname.cp_link {display: inline-block; text-decoration: none; color: #fff; text-transform: uppercase; margin-bottom: 0px;}.lsticrttxt {display: inline-block; text-decoration: none; background: #004060; font-weight: bold; border: 1px solid #000; color: #fff; padding-top: 15px; width:200px; height:40px; text-transform: uppercase; margin-top: 25px; margin-bottom: 5px; border-radius: 10px;}.lsticrttxt:hover { background: #013650;} /*plg grid*/.prodname{font-size:1.1em;font-weight:bold;} /*plg grid2*/.prodgrid {overflow:hidden; text-align: center;}.prodgrid.p {float:left;overflow:hidden;padding: 0px;margin:0px;}.prodGrid.pb {padding: 2px; margin:1px; overflow: hidden;}.prodgrid.p.brd{border-style: solid; border-width: 1px;}.prodGrid.p.lstname{display: block; height: 34px;overflow: hidden;}.prodgrid.p.pprc{display: block;text-decoration: linethrough;height:17px;}.prodgrid.p.prc{display: block; font-weight: bold; color: #FFF; text-shadow: 3px 3px 4px #000;}.prodGrid.p.bsk.lsticrt {display:inline-block; text-align:left;}.prodgrid.p.bsk.lsticrttxt{position:absolute; margin-left: 6px;margin-top: 8px; font-weight: bold;}.prodgrid.p p.img{height:220px;line-height:220px;}.prodgrid.p p.img a{line-height:220px;}.prodgrid.p p.img img{vertical-align:middle;}.prodgrid.p.newpromo span{display:inline-block; width:24px; height:24px;}.prodgrid.p.newpromo.new{background:transparent url( view/ pl_new.png ) no-repeat 0 0;}.prodGrid.p.newPromo.promo{background:transparent url( view/pl_promo.png ) no-repeat 0 0;}.product.cp_txt h3{color:gray;}.left{float:left;}.right{float:right}.tal{text-align:left;}.tar{text-align:right;}.tar table{float:right;}.center{margin:0 auto; text-align:center;}.promo a,.new a{height:30px; width:80px; background:#f4c13d; display:block; color:#fff; padding-left:10px; line-height:30px; text-transform:uppercase; -webkit-transition: all 80ms linear; -moz-transition: all 80ms linear; -ms-transition: all 80ms linear; -o-transition: all 80ms linear; transition: all 80ms linear;}.new a{background:#f4633d }.promo a:hover,.new a:hover{height:30px; width:85px; background:#e8a800; text-decoration: none;}.new a:hover{background:#e83000 }.productmedia span.tab{display:none;}.productmedia div.tabc{border:0;}.productmedia table tr td{height:150px; width:150px; background:#fff; border:2px solid #fff;}.productmedia table tr td img{border:0!important;}.productmedia table tr td:hover{border:2px solid #006293;}.plgProduct.iAdd{display:none;}.plgProduct.cur_pt{display:inline;}.spC1{width:10%;min-height:1px;}.spC2{width:56%;}.spC3{width:31%; margin-right:3%; text-align:right;color:#666;}.spc3 span.cur_pt{}.tx_und:after { content: ab sofort ;}.spc3.atc{/*background: #3298c9;*/ width:245px; height:40px; line-height: 40px; color: #fff; padding:0 10px; font-size: 14px;/*border:2px solid #76c2e6;*/float: right; -webkit-transition: all 180ms linear; -moz-transition: all 180ms linear; -ms-transition: all 180ms linear; -o-transition: all 180ms linear; transition: all 180ms linear; /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; */ /* IE9 SVG, needs conditional override of filter to none */ background: url(data:image/svg+xml;base64,pd94bwwgdmvy c2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3ln- 29

30 czlm9yzy8ymdawl3n2zyigd2lkdgg9ijewmcuiighlawdodd0imtawjsigdmlld0jved0imcawidegmsigchjlc2vydmvbc3bly3rsyxrpbz0ibm9uzsi+ciagpgxpbmvhckdyyw- RpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFka- WVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT 0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zm- c2v0psiwjsigc3rvcc1jb2xvcj0iizi0ogfiyiigc3rvcc1vcgfjax- R5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNjI5MyIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(36,138,187,0.8) 0%, rgba(0,98,147,0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,138,187,0.8)), colorstop(100%,rgba(0,98,147,0.8))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* Opera */ background: -ms-linear-gradient(top, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(36,138,187,0.8) 0%,rgba(0,98,147,0.8) 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr= #cc248abb, endcolorstr= #cc006293,gradien ttype=0 ); /* IE6-8 */}.spc3.atc:hover{/*border:2px solid #006293; background: #248abb;*/ padding:0 10px; background-color: #006293;} /* - Green Button ---*/ #one { background-color: #d7ff37; background-image: -moz-lineargradient(top, rgba(229, 255, 174, 0.8), rgba(43, 182, 0, 0.7)); background-image: -o-linear-gradient(top, rgba(229, 255, 174, 0.8), rgba(43, 182, 0, 0.7)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(229, 255, 174, 0.8)), to(rgba(43, 182, 0, 0.7))); background-image: -webkit-lineargradient(top, rgba(229, 255, 174, 0.8), rgba(43, 182, 0, 0.7)); background-image: linear-gradient(top, rgba(229, 255, 174, 0.8), rgba(43, 182, 0, 0.7));} #one:hover { background-color: #42b000; } /* - End Green Button ---*/.spc3.atc a{color:#fff; font-weight: bold; display:inline-block; height:40px;}.spc3.atc a:hover{text-decoration: none;}.spc3.atc input{border:1px solid #a1cfe6; background: #76c2e6; height:20px; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.spc3.atc img{}.spc3.atc img.imgqtyspin{background:#fff; vertical-align:middle; padding: 2px 0; margin-bottom:4px; }.spc3.atc.cur_pt{}.pimg.center {height:490px; width:490px; display: table-cell; vertical-align: middle;}.pimg.center img{}.pimg.center span.b.cur_pt{display:block;} img.cur_pt + span.cur_pt,.spc3 a{padding-left: 4px; line-height: 18px;color:#006193; font-weight: bold} p.plabel{} p.prevprice{ text-decoration: line-through;} span.price{color:#e83000; font-size: 26px; font-weight: bold; margin:0 0 10px;}.productDetails{padding:0 10px;}.productDetails.cp_tab_on_bg{background: #fff; border-color:#d8d8d7; color: #006193} /**************************/.mtb4{margin:4px 0;}.plgProduct.product{/*-webkit-box-shadow: inset 5px 0px 8px 2px #ddd; box-shadow: inset 5px 0px 8px 2px #ddd;*/}.productdetails.tabc table.feacont tbody tr.feav td{height: 24px;}.productDetails.tabc table.feacont tbody tr.feav td.fean:firstchild{width:20%; text-indent: 5px;}.productDetails.tabc table.feacont tbody tr.feav:nth-child(even) {background: #eee} /*.productdetails.tabc table.feacont tbody tr.feav:nthchild(odd) {background: #FFF}*/ p.featitle {margin:10px 0; font-weight: bold; text-transform: uppercase; text-indent: 5px;}.productManufacturer a.cp_txt img,.productbrand a.cp_txt img{display:block}.breadcrumbs{margin:10px 0 10px 10px;} #panel_11{display: none;} #panel_2.widget_holder{-webkit-box-shadow: none; boxshadow: none; position: fixed; background:none repeat scroll 0 0 rgba(255, 255, 255, 0.8); z-index: 100;} #panel_1.widget_holder{padding-top:200px;}.ovrhdn.bnrhld a img{margin-bottom:10px;}.container{position: relative;}.plgheader{position: relative; z-index: 1000;}.plgHeader.eshop_pageHeader{height:40px; background: #006293;}.plgHeader.eshop_pageHeader a.cp_link{width:204px; display: inline-block; line-height: 40px; margin:0; text-align: left; textindent: 30px; font-size: 16px; color: #fff;}.plgheader.eshop_pageheader a.cp_link:nth-child(2){background:#004060;}.plgheader.eshop_pageheader a.cp_link:nth-child(3) {background:#3290c9;}.plgheader.eshop_pageheader a.cp_link:nth-child(4) {background:#1c536e;}.plgheader.eshop_pageheader a.cp_link:nth-child(5) {background:#5aa5c9;}.plgheader.eshop_pageheader a.cp_link:hover{text-decoration: 30

31 none;}.plgheader.eshop_pageheader a.cp_link:first-child:hover{backgro und:#005681;}.plgheader.eshop_pageheader a.cp_link:nth-child(2):hover{backg round:#013650;}.plgheader.eshop_pageheader a.cp_link:nthchild(3):hover{background:#227fb7;}.plgheader.eshop_pageheader a.cp_link:nth-child(4):hover{backg round:#13455e;}.plgheader.eshop_pageheader a.cp_link:nth-child(5):hover{back ground:#4795ba;}.plgbanner{height: 140px;}.plgCart div.wgtheader,.plgsearch div.wgtheader{display: none;}.plgsearch{position: absolute; top:95px; left:845px;}.plgcart{ position: absolute; top:10px; left:810px; border: 2px dashed #004060; padding:5px; width:185px; height: 62px;}.CartViewLast,.CartViewList { display: none;}.plgsearch input.cp_btn_main_bg.cp_btn_main_brd.cp_btn_ main_txt{background: #006293; border:2px solid #006293; color:#fff;} /************************************************* *************************************/.container{width:1024px;margin:0px auto;}.leftcolumn{float:left;width:220px;}.content{overflow:hidden;}.footer{clear:both;}.disnone{display:none;}.ovrhdn{overflow:hidden;}.wgtheader{background-color:#fff;font-size:18px;/*borderradius:4px;*/color:#006293;line-height:24px;padding:6px 4px 4px 6px; border-bottom:2px solid #ddd;}/*************** ********************************************** *******************/.widget_holder{/*margin:2px;*/margin:0 2px; background:#fff; -webkit-box-shadow: 0px 0px 6px 2px #d5d5d5; boxshadow: 0px 0px 6px 2px #d5d5d5;} /**************** ********************************************** ********************/.cp_mnu_link,.cp_link,.mv a,.mh a,.tree a{color:#264977;}.cp_tab_on_bg{background-color:#bbb;}.cp_txt{color:#006193;}.cp_bg{background-color:#a6b9e7;}.cp_page_bg{background-color:#f3f3f3;} /***************** ********************************************** ***********************/.cp_watermark{color:#bbb;}.cp_vld_txt{color:red;}.cp_oddrow_bg{background-color:#ddf;}.clear,.cl{clear:both;}.textcenter{text-align:center;}.textright{text-align:right;}.b {font-weight:bold;}.fr{float:right;}.cur_pt,.cur_pt *{cursor:pointer;} /*plg header generic*/.plgheadergnc.logo{float:left;}.plgheadergnc.sea{margin-bottom:16px;text-align:right;}.plgheadergnc.sea a{font-size:0.95em;marginleft:16px;display:block;}.plgheadergnc.links{text-align:right;}.plgheadergnc.lngcurr,.plgheadergnc.lgncrt{textalign:right;margin-top:24px;}.plgheadergnc.del>span{display:none;}.plgheadergnc.del>span img,.plgheadergnc.del>span b{margin:2px;cursor:pointer;}.plgheadergnc.del:hover span{display:inline;position:absolute; margin-left:-30px; margin-top: 12px; padding: 2px; width: 28px;text-align: center; border-width:1px; border-style: solid;}.plgheadergnc.arr{display:inline-block;border: solid 3px transparent; border-top: solid 3px gray; margin-left: 2px; height: 1px;}.plgHeaderGnc.links a{margin-left:12px;overflow:hidden;} /*plg search*/.plgsearch.plgsearchtxt{width:120px; border:2px solid #006293;} /************************************ ********************************************* ***********/.plgsearch a{font-size:0.95em;}.plgsearchadv>div>ul{list-style:none;padding-left:8px;}.plgsearchadv>div>ul>li{clear:both;padding-bottom:2px;}.plgsearchadv>div>ul>li>label{width:150px;display:block;float:le ft;}.plgsearchadv>div>ul>li input[type= text ],.plgsearchadv>div>ul li select{width:240px;}.plgsearchadv>div>ul>li.seaprice input{width:60px;} /*plg new promo*/.newprdgr.p {float:left;text-align:center;overflow:hidden;}.newprdgr.p.pb{border-width:1px;border-style:solid;margin:1px; padding:4px;}.newprdgr.p p.img{height:220px;line-height:220px;}.newprdgr.p p.img a{line-height:220px;}.newprdgr.p p.img img{vertical-align:middle;}.newprdgr.p.prc{font-weight:bold;font-size:1.1em;}.newprdgr.p.prc,.newprdgr.p.pprc{display:block;}.newprdgr.p.pprc{text-decoration:line-through;}.newprdgr.p.lsticrttxt{position:absolute;font-weight:bold;margin- top:8px;margin-left:8px;} /*plg lst*/.plgproductlistmv.descimg{float:left;width:100px;}.plgproductlistmv.descimg img{height:100px;}.plgproductlistmv.listmvopts{liststyle:none;padding:0px;margin:0px;}.plgproductlistmv.listmvopts li{float:left;marginleft:24px;float:right;}.plgproductlistmv.listmvpgrtop,.plgproductlistmv.listmvpgrbtm{text-align:right;margin-top:16px;}.plgproductlistmv.view a{background-image: url(view/view. png); background-repeat: no-repeat; display: inline-block; width: 21px; height: 19px; margin-bottom: -4px;}.plgProductListMv.view a.act,.plglist.view a:hover{backgroundposition: left bottom;} 31

32 .plgproductlistmv.view a.t{background-position: right top;}.plgproductlistmv.view a.t.act,.plglist.view a.t:hover{backgroundposition: right bottom;}.plgproductlistmv.p {padding: 0px;margin:0px; overflow: hidden;}.plgproductlistmv.p.lstcode {font-size: 0.8em;}.plgProductListMv.p.brd{border-style: solid; border-width: 1px; padding: 4px; margin:1px; overflow: hidden;}.plgproductlistmv.p.productum{font-size:.9em; fontweight:normal; color:#8a8a8a;display: block;}.plgproductlistmv.p.lstname{display:block;font-size:1.2em;}.plgproductlistmv.p.lstcode{display:block;}.plgproductlistmv.p.newpromo p{display:inline-block; width:24px; height:24px;}.plgproductlistmv.p.newpromo.new{background:transparent url( view/pl_new.png ) no-repeat 0 0;}.plgProductListMv.p.newPromo.promo{background:transparent url( view/pl_promo.png ) no-repeat 0 0;}.plgProductListMv.pdrS.nfo{float:right;}.plgProductListMv.pdrS.pImg{float:left;width:240px;}.plgProductListMv.pdrS.lsticrttxt{position:absolute; fontweight:bold;margin-top:8px;margin-left:8px;}.plgproductlistmv.pdrs.prc{font-weight:bold;font-size:1.1em;}.plgproductlistmv.pdrs.desc{display:block;}.plgproductlistmv.pdrm.p {float:left; text-align: center;}.plgproductlistmv.pdrm.p.nfo table{margin:0px auto;} /*plg prodpres*/.plgproduct.product.nav{float:right;}.plgproduct.product.pimg{float:left;/*width:320px;*/ minwidth:320px; overflow:hidden;}.plgproduct.product.pimg.pdrzoom{margin-left:-32px;} /*.plgproduct.product.pimg span{display:block;}*/.plgproduct.product.pcart{overflow:hidden;}.plgproduct.product.pcart.new,.plgproduct.product.pcart.promo{background:url( view/pp_new_long.png ) norepeat scroll left center transparent;color:#1b1506;fontsize:10px;font-weight:bold;height:19px;margin:0;padding:7px px;width:80px;}.plgProduct.product.pCart.promo{background:url( view/pp_promo.png ) no-repeat scroll left center transparent;}.plgproduct.product.pcart.cloud{background: url(view/pp_promot.png) center no-repeat; text-align: center; height:46px; width:46px; line-height:46px;display:inline-block;}.plgproduct.product.pcart.prodprice{margin-top:8px; fontsize:1.2em;}.plgproduct.product.pcart.productum{font-size:.9em; fontweight:normal; color:#8a8a8a;display: block;}.plgproduct.product.pcart.addtocart a{text-decorat ion:none;position:absolute;font-weight:bold;fontsize:14px;color:#006193;margin-top:14px;margin-left:8px;}.plgproduct.product.pcart.productmulattr select{width:150px;}.plgproduct.productform{list-style:none;padding:0px;margin:0p x;padding-left:8px;}.plgproduct.productform li label{display:block;float:left;width:20 0px;}.plgProduct.productForm li.labelcb label{display:inline;float:no ne;}.plgproduct.productform li.hdr{padding-top:4px;}.plgproduct.productform li.hdr label{display:inline; padding:2px;border-radius:6px;border:solid 1px #DDD;float:none;background-color:#D7D7D7;}.plgProduct.productForm li input[type= text ],.plgproduct.productform li textarea{width:370px;}.plgproduct.productformhdr p.hdr{font-size:1.1em;fontweight:bold;padding:8px;border-radius:8px;border:solid 1px #DDD;display:inline-block;}.plgProduct.productFormHdr img{max-width:240px;maxheight:240px;} /*plg currency*/.currcd{text-align:center;font-size:1.2em;fontweight:bold;cursor:default;}.currcd>.arr{display:inline-block;border: solid 3px transparent; border-top: solid 3px gray; margin-left: 4px; height: 1px;}.currCd>span{display:none;}.currCd>span>b{cursor:pointer;padding:4px;font-size:0.9em;}.currCd:hover>span{display:inline;position:absolute; margin-left:- 40px; margin-top: 15px; padding: 2px; width: 36px;text-align: center; border-width:1px; border-style: solid;z-index:200;} /*plg contact form*/.plgcontact ul{list-style:none;padding-left:8px;}.plgcontact ul>li{clear:both;padding-bottom:2px;}.plgcontact ul>li>input[type= text ],.plgcontact ul>li>textarea{width:70%;}.plgcontact ul>li>label{width:150px;display:block;float:left;}.plgcontact ul>li.cntcopy>label{width:auto;display:inline;float:no ne;}.plgcontactfast.cntcfstfrm img{vertical-align:top;marginright:4px;width:17px;}.plgcontactfast.custompopup ul{list-style:none;paddingleft:8px;}.plgcontactfast.custompopup ul>li{clear:both;paddingbottom:2px;}.plgcontactfast.custompopup ul>li>input[type= text ],.plgcontactfast.custompopup ul>li>textarea{width:70%;}.plgcontactfast.custompopup ul>li>label{width:150px;display:bl ock;float:left;}.plgcontactfast.custompopup ul>li.cntcopy>label{width:auto;dis play:inline;float:none;} /*plg passwordrec*/.plgpasswordrcv div>ul{list-style:none;padding-left:8px;}.plgpasswordrcv div>ul>li{clear:both;padding-bottom:2px;}.plgpasswordrcv div>ul>li>input[type= text ]{width:70%;}.plgpasswordrcv ul>li>label{width:150px;display:block;float:left;} /*plg register, client profile*/.formheader{border: solid 1px #CACACA;backgroundcolor:#3395C6;color:#FFF;border-radius:5px;fontsize:12px;padding:1px 8px 2px 8px;font-weight:bold;}.formElements{list-style:none;padding-left:8px;}.formElements>li{clear:both;padding-bottom:2px;}.formElements>li>input[type= text ],.formelements>li>input[type= password ],.formelements>li>select{width:55%;} 32

33 .formelements>li>label{width:150px;display:block;float:left;}.formelements>li.formsmallel>input[type= text ]{width:64px;}.plgregister.wgtcontent{width:80%;margin:0px auto;borderradius:12px;background-color:#ddf;padding:12px;} /*login*/.loginform{padding:0px;margin:0px;}.loginform>li{clear:both;padding-bottom:2px;}.loginform>li>label{float:left;width:50px;}.loginform>li.rm>label{float:none;} /*plg cart*/.plgcart.ttl{float:left;}.plgcart.cp_link{cursor:pointer;}.plgcart.ttlv{float:right;text-align:right;}.plgcart.qtp{float:right;}.plgcart.title{font-weight:bold;margin-top:8px;}.plgcart.qtp *{cursor:pointer;} /*plg comparer*/.plgproductcmp.cmptab{table-layout: fixed; width:100%;}.plgproductcmp.cmptab td{padding:2px;overflow:hidden;vertic al-align:top;border-width:0px;}.plgproductcmp.cmptab>tbody>tr>td:first-child{width: 120px;}.plgProductCmp.cmpTab>tbody>tr>td>.new,.plgProductCmp.cmpTab>tbody>tr>td>.promo{background:url(view/ pp_new_long.png) no-repeat scroll left center transparent;color:#1b1506;font-size:10px;font-we ight:bold;height:19px;margin:0;padding:7px px;width:80px;display:inline-block;}.plgProductCmp.cmpTab>tbody>tr>td>.promo{background: url(view/pp_promo.png) left no-repeat;}.plgproductcmp.cmptab>tbody>tr>td.cnt{text-align: center;}.plgproductcmp.cmptab>tbody>tr>td.cnt.prodname{font-size: 1.2em;}.plgProductCmp.cmpTab>tbody>tr>td.cnt.prodCode{font-size: 0.8em;}.plgProductCmp.cmpTab>tbody>tr>td.cnt.cmpImg{display: block;}.plgproductcmp.cmptab>tbody>tr>td.cmptit{padding:1px 1px 0px 20px; font-weight: bold; background: url(view/lar.png) no-repeat;}.plgproductcmp.cmptab>tbody>tr>td.cmpavb td{border: none 0px #000;}.plgProductCmp.cmpTab>tbody>tr>td.cmpAvb>div>table{margin: 0px auto;}.plgproductcmp.cmptab>tbody.alt{background: url(t/alt2.png);}.plgproductcmp.cmptab>tbody.crta{font-weight: bold;position:absolute;margin-left: -148px;margin-top: 8px;}.plgProductCmp.cmpTab>tbody.cmpAB {display: block;margintop: 8px;}.plgProductCmp.cmpTab>tbody.cloud{background: url(view/ pp_promot.png) right no-repeat; text-align: right; height:46px; line-height:46px;font-weight:bold; margin-top: -60px;padding-right: 6px;margin-bottom: 20px;} /*plg tag cloud*/.plgtagcloud a{line-height:32px;overflow:hidden;}.tc_s1{font-size: 1em;}.tc_s2{font-size: 1.5em;}.tc_s3{font-size: 2em;}.tc_s4{font-size: 2.5em;} /*plg filter*/.lstflt fieldset{border-width:0px;padding:0px;margin:0px;marg in-top:4px;clear:both;background-color:#ddd;margin:-16px 2px 0px 2px;padding:4px;border-radius:4px;}.lstFlt fieldset>legend{padding-top:24px;font-weight:bold;}.lstflt fieldset input[type= text ]{width: 48px;}.lstFlt>div>.cp_link{display:block;cursor:pointer;fontweight:bold;background: url(t/gd.png) no-repeat right;}.lstflt>div>.cp_link.u{background: url(t/gu.png) no-repeat right;}.lstflt div.pp{position:absolute;z-index:2;}.lstflt div.fltcb>.cp_link{font-size:0.95em;display:block;}.lstflt div.fltcb input[type= submit ]{float:right;}.lstfltparam.fltent{margin-left:6px;border-radius:5px;borderstyle:solid;border-width:1px;padding:1px;display:inli ne-block;cursor:default;margin-bottom:1px;paddingright:14px;padding-left:2px;font-size:0.9em;}.lstfltparam img{width:12px;cursor:pointer;vertic al-align:top;margin-left:-13px;margin-top:1px;borderradius:5px;}.lstfltparam>p>span{display:block; overflow:hidden;}.lstfltparam>p>span:first-child{display:block;width:80px;float:le ft;} /*plg prodmnupres*/.prodmnupres{overflow:hidden;}.prodmnupres.p{float:left; overflow:hidden;text-align:center;fontweight:bold; font-size:1.1em;}.prodmnupres.prtxtc{text-align:left;font-size:1.15em;marginleft:6px;}.prodmnupres.prbr{text-align:left;font-size:0.9em;marginleft:6px; background: transparent url(view/lar.png) no-repeat top left;padding-left:18px;} /*plg mnupres*/.mg_hold {overflow:hidden;text-align:center;}.mg_hold ul{list-style: circle url(view/lar.png) inside;margin:0px;padding:0px;}.mg_hold.psp_img{background-position:top right;backgroundrepeat:no-repeat;}.mg_hold.ps_img{overflow: hidden;margin-top:2px;marginbottom:2px;}.mg_hold.ps_img>a{font-weight: bold; font-size: 16px;}.mg_Hold p>a{font-weight: bold; font-size: 16px;}.mg_Hold.ps_img ul{font-size: 12px; margin-top: 4px; paddingleft:0px;} /*plg other*/.plglanguage img{cursor:pointer;}.plgheader a{margin-left:8px;}.eshop20_pagefooter{text-align:center;}.eshop20_pagefooter_copy{font-weight:bold;}.prodmenu select{width:100%;}.padall{padding:4px;}.plgshoppinglist.shoppinglistresults {liststyle:none;padding:0px 0px 0px 4px;margin:0px;}.plgShoppingList.shoppingListResults a{font-weight:bold;}.tblfxd {width:100%;table-layout:fixed;} 33