Sehr geehrte POWERGAP Kunden,
mit diesem Update, welches schon seit einigen Tagen in allen Shops zu Verfügung steht, lassen sich die alten langweiligen Standard-Dropdowns :
gegen die neue CSS-Variante austauschen:
Diese sehen nicht nur schicker aus, sondern gehen ohne Klick per OnMouseOver auf. Das spart für den Besucher Klicks und ist in der Usability damit im Vorteil.
Größter Vorteil bleibt aber die individuelle Gestaltung! Denn per CSS lässt sich so ein Dropdown komplett auf das eigene CI abstimmen und damit perfekt in ein edles Shopdesign integrieren. Die Standard Dropdowns der Browser sehen je nach Betriebssystem bekanntlich immer anders aus und z.B. die störenden grell-blauen Dropdowns aus einem MAC-System passen auf schick gestylten Seiten des Öfteren gar nicht zum Gesamtbild.
Im gleichen Zuge ist auch das Update "Suchergebnis Footer & Kopf als Template mit neuen Funktionen" zu empfehlen, was direkt mit angepasst werden sollte.
Die Aktivierung im eigenen Shop:
.. ist zugeben etwas aufwendiger. Es sei denn die Standardgraue Farbgebung aus der Auslieferungsversion, (siehe www.powergap-shop.com/Test-Untergruppe.html) reicht Ihnen aus.
Dann ist nur folgendes zu tun:
Über T > Eingrenzung SE muss auf "CSS-Dropdown" umgestellt werden:
Sollten Sie mehrere Artikelgruppen nutzen, dann muss diese Einstellung je AG einzeln erfolgen.
Dann muss über Layout > Schriften/CSS > ALL(ROOT) der folgende CSS-Code eingefügt werden:
P.S. Sollten die einzelnen Dropdowns "aneinander kleben", so muss das "margin-right" innerhalb von z.B. "#dd_aug2" von "0px" auf "10px" geändert werden.
Der erste Part "POWERGAP Standard CSS Dropdown Sortierung Suchergebnis" ist für das Sortiert-Dropdown aus dem Suchergebnis-Footer-Template! Wer hier auch die CSS Variante bevorzugt, muss dieses CSS einsetzen und statt dem Synonym #sortierung, das #css_sortierung benutzen.
Wer z.B. keine Eingrenzungen für die Zusatzkategorien1+2 benötigt, sollte den jeweiligen Teil im CSS natürlich nicht in den eigenen Shop kopieren. Das spart einiges an der Dateigröße des CSS, da diese Dropdowns (vor allem, damit diese auf den unterschiedlichen Browsern möglichst identisch dargestellt werden) einiges an CSS benötigen.
Mit diesen wenigen Schritten hat man die Einrichtung vollbracht und muss per Strg+F5 den Shop im Browser so auffrischen, dass das CSS neu geladen wird um das Ergebnis zu sehen. Die Kunden, die gerade im Shop sind, sehen das spätestens in einer Stunde dann auch. Denn der Cache des CSS verfällt nach 60 Minuten.
In allen Shops sind 3 Größen-Varianten der Dropdown Hintergrund Grafik ausgeliefert:
sollte man eine andere Breite als die 100, 150 oder 200 Pixel benötigen, so muss man die jeweilige Grafik einfach nur erstellen und über den IMG-Explorer hoch laden. Die "width"-Angaben im jeweiligen CSS-Part müssen angepasst werden.
Mit dem Austausch der Grafiken und entsprechender Änderungen im CSS lassen sich diese Dropdowns schön auf das eigene CI anpassen! Hier andere Varianten:
Wer sich nicht selbst an diese Änderung traut, der kann wie üblich uns damit beauftragen. Der Aufwand für uns mit Anpassung an Ihr CI ist ca. 15 Minuten (bei 70€/Stunde).
Zu empfehlen ist dieses Update jedem Shopbetreiber, denn solche Aufwertungen gehören heute zum guten Ton. Werden genau solche Updates nicht eingeschaltet, so gerät der Shop immer mehr auf die Schienen, wo sich dann veraltete Shops auf ein Bier treffen. Spaß bei Seite, wir können ja niemanden zum Glück zwingen, aber bitte nutzen Sie solche Updates um einfach auf dem aktuellen Stand zu bleiben!
P.S. Bitte hierzu auch den folgenden Beitrag beachten:
http://www.powergap.de/forum/index.php?topic=982.msg2623#msg2623
mit diesem Update, welches schon seit einigen Tagen in allen Shops zu Verfügung steht, lassen sich die alten langweiligen Standard-Dropdowns :
gegen die neue CSS-Variante austauschen:
Diese sehen nicht nur schicker aus, sondern gehen ohne Klick per OnMouseOver auf. Das spart für den Besucher Klicks und ist in der Usability damit im Vorteil.
Größter Vorteil bleibt aber die individuelle Gestaltung! Denn per CSS lässt sich so ein Dropdown komplett auf das eigene CI abstimmen und damit perfekt in ein edles Shopdesign integrieren. Die Standard Dropdowns der Browser sehen je nach Betriebssystem bekanntlich immer anders aus und z.B. die störenden grell-blauen Dropdowns aus einem MAC-System passen auf schick gestylten Seiten des Öfteren gar nicht zum Gesamtbild.
Im gleichen Zuge ist auch das Update "Suchergebnis Footer & Kopf als Template mit neuen Funktionen" zu empfehlen, was direkt mit angepasst werden sollte.
Die Aktivierung im eigenen Shop:
.. ist zugeben etwas aufwendiger. Es sei denn die Standardgraue Farbgebung aus der Auslieferungsversion, (siehe www.powergap-shop.com/Test-Untergruppe.html) reicht Ihnen aus.
Dann ist nur folgendes zu tun:
Über T > Eingrenzung SE muss auf "CSS-Dropdown" umgestellt werden:
Sollten Sie mehrere Artikelgruppen nutzen, dann muss diese Einstellung je AG einzeln erfolgen.
Dann muss über Layout > Schriften/CSS > ALL(ROOT) der folgende CSS-Code eingefügt werden:
/* POWERGAP Standard CSS Dropdown Sortierung Suchergebnis */
#dd_sort, #dd_sort ul, #dd_sort_top, #dd_sort_top ul {font-family: Arial, Helvetica;font-size: 11px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;cursor:pointer;}
#dd_sort a, #dd_sort_top a { display: block; color: #666666;font-size: 11px;font-family: Arial, Helvetica;padding: 3px 0px;}
/*text-decoration: none;*/
.dd_sort_kopf, .dd_sort_top_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_sort li, #dd_sort_top li { font-size: 11px;font-family: Arial, Helvetica; float: left;}
#dd_sort li ul, #dd_sort_top li ul {font-size: 11px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sort li ul a, #dd_sort_top li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_sort li ul a:hover, #dd_sort_top li ul a:hover {color:#CC0000;}
#dd_sort li:hover ul li, #dd_sort li:hover ul li ul, #dd_sort li.pg_hover ul ul, #dd_sort li.pg_hover ul ul ul, #dd_sort_top li:hover ul ul, #dd_sort_top li:hover ul ul ul, #dd_sort_top li.pg_hover ul ul, #dd_sort_top li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sort li:hover ul, #dd_sort li li:hover ul, #dd_sort li li li:hover ul, #dd_sort li.pg_hover ul, #dd_sort li li.pg_hover ul, #dd_sort li li li.pg_hover ul, #dd_sort_top li:hover ul, #dd_sort_top li li:hover ul, #dd_sort_top li li li:hover ul, #dd_sort_top li.pg_hover ul, #dd_sort_top li li.pg_hover ul, #dd_sort_top li li li.pg_hover ul {left: auto;}
#dd_sort li:hover, #dd_sort li.pg_hover, #dd_sort_top li:hover, #dd_sort_top li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis AUG */
#dd_aug, #dd_aug ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_aug a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_aug_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_aug li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_aug li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_aug li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_aug li ul a:hover{color:#CC0000;}
#dd_aug li:hover ul li, #dd_aug li:hover ul li ul, #dd_aug li.pg_hover ul ul, #dd_aug li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_aug li:hover ul, #dd_aug li li:hover ul, #dd_aug li li li:hover ul, #dd_aug li.pg_hover ul, #dd_aug li li.pg_hover ul, #dd_aug li li li.pg_hover ul {left: auto;}
#dd_aug li:hover, #dd_aug li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis AUG2 */
#dd_aug2, #dd_aug2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_aug2 a {display: block; color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_aug2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_aug2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_aug2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_aug2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_aug2 li ul a:hover{color:#CC0000;}
#dd_aug2 li:hover ul li, #dd_aug2 li:hover ul li ul, #dd_aug2 li.pg_hover ul ul, #dd_aug2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_aug2 li:hover ul, #dd_aug2 li li:hover ul, #dd_aug2 li li li:hover ul, #dd_aug2 li.pg_hover ul, #dd_aug2 li li.pg_hover ul, #dd_aug2 li li li.pg_hover ul {left: auto;}
#dd_aug2 li:hover, #dd_aug2 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Farben */
#dd_farb, #dd_farb ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_farb a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_farb_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_100.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:95px!important; width:105px;padding: 3px 3px;}
#dd_farb li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_farb li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 104px!important;width: 108px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_farb li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 100px;}
#dd_farb li ul a:hover{color:#CC0000;}
#dd_farb li:hover ul li, #dd_farb li:hover ul li ul, #dd_farb li.pg_hover ul ul, #dd_farb li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_farb li:hover ul, #dd_farb li li:hover ul, #dd_farb li li li:hover ul, #dd_farb li.pg_hover ul, #dd_farb li li.pg_hover ul, #dd_farb li li li.pg_hover ul {left: auto;}
#dd_farb li:hover, #dd_farb li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Größen */
#dd_groe, #dd_groe ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_groe a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_groe_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_100.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:95px!important; width:105px;padding: 3px 3px;}
#dd_groe li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_groe li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 104px!important;width: 108px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_groe li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 100px;}
#dd_groe li ul a:hover{color:#CC0000;}
#dd_groe li:hover ul li, #dd_groe li:hover ul li ul, #dd_groe li.pg_hover ul ul, #dd_groe li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_groe li:hover ul, #dd_groe li li:hover ul, #dd_groe li li li:hover ul, #dd_groe li.pg_hover ul, #dd_groe li li.pg_hover ul, #dd_groe li li li.pg_hover ul {left: auto;}
#dd_groe li:hover, #dd_groe li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Hersteller*/
#dd_her, #dd_her ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_her a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_her_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_her li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_her li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_her li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_her li ul a:hover{color:#CC0000;}
#dd_her li:hover ul li, #dd_her li:hover ul li ul, #dd_her li.pg_hover ul ul, #dd_her li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_her li:hover ul, #dd_her li li:hover ul, #dd_her li li li:hover ul, #dd_her li.pg_hover ul, #dd_her li li.pg_hover ul, #dd_her li li li.pg_hover ul {left: auto;}
#dd_her li:hover, #dd_her li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Zusatzkategorie 1*/
#dd_zk1, #dd_zk1 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_zk1 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_zk1_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_zk1 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_zk1 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_zk1 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_zk1 li ul a:hover{color:#CC0000;}
#dd_zk1 li:hover ul li, #dd_zk1 li:hover ul li ul, #dd_zk1 li.pg_hover ul ul, #dd_zk1 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_zk1 li:hover ul, #dd_zk1 li li:hover ul, #dd_zk1 li li li:hover ul, #dd_zk1 li.pg_hover ul, #dd_zk1 li li.pg_hover ul, #dd_zk1 li li li.pg_hover ul {left: auto;}
#dd_zk1 li:hover, #dd_zk1 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Zusatzkategorie 2*/
#dd_zk2, #dd_zk2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_zk2 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_zk2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_zk2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_zk2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_zk2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_zk2 li ul a:hover{color:#CC0000;}
#dd_zk2 li:hover ul li, #dd_zk2 li:hover ul li ul, #dd_zk2 li.pg_hover ul ul, #dd_zk2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_zk2 li:hover ul, #dd_zk2 li li:hover ul, #dd_zk2 li li li:hover ul, #dd_zk2 li.pg_hover ul, #dd_zk2 li li.pg_hover ul, #dd_zk2 li li li.pg_hover ul {left: auto;}
#dd_zk2 li:hover, #dd_zk2 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Spezialkategorie 1*/
#dd_sk1, #dd_sk1 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_sk1 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_sk1_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_sk1 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_sk1 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sk1 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_sk1 li ul a:hover{color:#CC0000;}
#dd_sk1 li:hover ul li, #dd_sk1 li:hover ul li ul, #dd_sk1 li.pg_hover ul ul, #dd_sk1 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sk1 li:hover ul, #dd_sk1 li li:hover ul, #dd_sk1 li li li:hover ul, #dd_sk1 li.pg_hover ul, #dd_sk1 li li.pg_hover ul, #dd_sk1 li li li.pg_hover ul {left: auto;}
#dd_sk1 li:hover, #dd_sk1 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Spezialkategorie 2*/
#dd_sk2, #dd_sk2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_sk2 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_sk2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_sk2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_sk2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sk2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_sk2 li ul a:hover{color:#CC0000;}
#dd_sk2 li:hover ul li, #dd_sk2 li:hover ul li ul, #dd_sk2 li.pg_hover ul ul, #dd_sk2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sk2 li:hover ul, #dd_sk2 li li:hover ul, #dd_sk2 li li li:hover ul, #dd_sk2 li.pg_hover ul, #dd_sk2 li li.pg_hover ul, #dd_sk2 li li li.pg_hover ul {left: auto;}
#dd_sk2 li:hover, #dd_sk2 li.pg_hover {color:#CC0000;}
#dd_sort, #dd_sort ul, #dd_sort_top, #dd_sort_top ul {font-family: Arial, Helvetica;font-size: 11px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;cursor:pointer;}
#dd_sort a, #dd_sort_top a { display: block; color: #666666;font-size: 11px;font-family: Arial, Helvetica;padding: 3px 0px;}
/*text-decoration: none;*/
.dd_sort_kopf, .dd_sort_top_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_sort li, #dd_sort_top li { font-size: 11px;font-family: Arial, Helvetica; float: left;}
#dd_sort li ul, #dd_sort_top li ul {font-size: 11px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sort li ul a, #dd_sort_top li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_sort li ul a:hover, #dd_sort_top li ul a:hover {color:#CC0000;}
#dd_sort li:hover ul li, #dd_sort li:hover ul li ul, #dd_sort li.pg_hover ul ul, #dd_sort li.pg_hover ul ul ul, #dd_sort_top li:hover ul ul, #dd_sort_top li:hover ul ul ul, #dd_sort_top li.pg_hover ul ul, #dd_sort_top li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sort li:hover ul, #dd_sort li li:hover ul, #dd_sort li li li:hover ul, #dd_sort li.pg_hover ul, #dd_sort li li.pg_hover ul, #dd_sort li li li.pg_hover ul, #dd_sort_top li:hover ul, #dd_sort_top li li:hover ul, #dd_sort_top li li li:hover ul, #dd_sort_top li.pg_hover ul, #dd_sort_top li li.pg_hover ul, #dd_sort_top li li li.pg_hover ul {left: auto;}
#dd_sort li:hover, #dd_sort li.pg_hover, #dd_sort_top li:hover, #dd_sort_top li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis AUG */
#dd_aug, #dd_aug ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_aug a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_aug_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_aug li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_aug li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_aug li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_aug li ul a:hover{color:#CC0000;}
#dd_aug li:hover ul li, #dd_aug li:hover ul li ul, #dd_aug li.pg_hover ul ul, #dd_aug li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_aug li:hover ul, #dd_aug li li:hover ul, #dd_aug li li li:hover ul, #dd_aug li.pg_hover ul, #dd_aug li li.pg_hover ul, #dd_aug li li li.pg_hover ul {left: auto;}
#dd_aug li:hover, #dd_aug li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis AUG2 */
#dd_aug2, #dd_aug2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:0px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_aug2 a {display: block; color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_aug2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_aug2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_aug2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_aug2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_aug2 li ul a:hover{color:#CC0000;}
#dd_aug2 li:hover ul li, #dd_aug2 li:hover ul li ul, #dd_aug2 li.pg_hover ul ul, #dd_aug2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_aug2 li:hover ul, #dd_aug2 li li:hover ul, #dd_aug2 li li li:hover ul, #dd_aug2 li.pg_hover ul, #dd_aug2 li li.pg_hover ul, #dd_aug2 li li li.pg_hover ul {left: auto;}
#dd_aug2 li:hover, #dd_aug2 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Farben */
#dd_farb, #dd_farb ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_farb a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_farb_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_100.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:95px!important; width:105px;padding: 3px 3px;}
#dd_farb li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_farb li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 104px!important;width: 108px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_farb li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 100px;}
#dd_farb li ul a:hover{color:#CC0000;}
#dd_farb li:hover ul li, #dd_farb li:hover ul li ul, #dd_farb li.pg_hover ul ul, #dd_farb li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_farb li:hover ul, #dd_farb li li:hover ul, #dd_farb li li li:hover ul, #dd_farb li.pg_hover ul, #dd_farb li li.pg_hover ul, #dd_farb li li li.pg_hover ul {left: auto;}
#dd_farb li:hover, #dd_farb li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Größen */
#dd_groe, #dd_groe ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_groe a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_groe_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_100.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:95px!important; width:105px;padding: 3px 3px;}
#dd_groe li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_groe li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 104px!important;width: 108px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_groe li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 100px;}
#dd_groe li ul a:hover{color:#CC0000;}
#dd_groe li:hover ul li, #dd_groe li:hover ul li ul, #dd_groe li.pg_hover ul ul, #dd_groe li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_groe li:hover ul, #dd_groe li li:hover ul, #dd_groe li li li:hover ul, #dd_groe li.pg_hover ul, #dd_groe li li.pg_hover ul, #dd_groe li li li.pg_hover ul {left: auto;}
#dd_groe li:hover, #dd_groe li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Hersteller*/
#dd_her, #dd_her ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_her a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_her_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_her li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_her li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_her li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_her li ul a:hover{color:#CC0000;}
#dd_her li:hover ul li, #dd_her li:hover ul li ul, #dd_her li.pg_hover ul ul, #dd_her li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_her li:hover ul, #dd_her li li:hover ul, #dd_her li li li:hover ul, #dd_her li.pg_hover ul, #dd_her li li.pg_hover ul, #dd_her li li li.pg_hover ul {left: auto;}
#dd_her li:hover, #dd_her li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Zusatzkategorie 1*/
#dd_zk1, #dd_zk1 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_zk1 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_zk1_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_zk1 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_zk1 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_zk1 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_zk1 li ul a:hover{color:#CC0000;}
#dd_zk1 li:hover ul li, #dd_zk1 li:hover ul li ul, #dd_zk1 li.pg_hover ul ul, #dd_zk1 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_zk1 li:hover ul, #dd_zk1 li li:hover ul, #dd_zk1 li li li:hover ul, #dd_zk1 li.pg_hover ul, #dd_zk1 li li.pg_hover ul, #dd_zk1 li li li.pg_hover ul {left: auto;}
#dd_zk1 li:hover, #dd_zk1 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Zusatzkategorie 2*/
#dd_zk2, #dd_zk2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_zk2 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_zk2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_zk2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_zk2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_zk2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_zk2 li ul a:hover{color:#CC0000;}
#dd_zk2 li:hover ul li, #dd_zk2 li:hover ul li ul, #dd_zk2 li.pg_hover ul ul, #dd_zk2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_zk2 li:hover ul, #dd_zk2 li li:hover ul, #dd_zk2 li li li:hover ul, #dd_zk2 li.pg_hover ul, #dd_zk2 li li.pg_hover ul, #dd_zk2 li li li.pg_hover ul {left: auto;}
#dd_zk2 li:hover, #dd_zk2 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Spezialkategorie 1*/
#dd_sk1, #dd_sk1 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_sk1 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_sk1_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_150.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:145px!important; width:155px;padding: 3px 3px;}
#dd_sk1 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_sk1 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 154px!important;width: 158px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sk1 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 150px;}
#dd_sk1 li ul a:hover{color:#CC0000;}
#dd_sk1 li:hover ul li, #dd_sk1 li:hover ul li ul, #dd_sk1 li.pg_hover ul ul, #dd_sk1 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sk1 li:hover ul, #dd_sk1 li li:hover ul, #dd_sk1 li li li:hover ul, #dd_sk1 li.pg_hover ul, #dd_sk1 li li.pg_hover ul, #dd_sk1 li li li.pg_hover ul {left: auto;}
#dd_sk1 li:hover, #dd_sk1 li.pg_hover {color:#CC0000;}
/* POWERGAP Standard CSS Dropdown Eingrenzung Suchergebnis Spezialkategorie 2*/
#dd_sk2, #dd_sk2 ul {font-family: Arial, Helvetica;font-size: 12px;color:#666666;font-weight:normal;float: left;height:20px;list-style: none;background: white;padding: 3px 0px;border: 1px solid #DDDDDD;margin-left:10px!important;margin-left:10px;margin-top:-1px!important;margin-top:2px;}
#dd_sk2 a {display: block;color: #666666;font-size: 12px;font-family: Arial, Helvetica;padding: 3px px;}
/*text-decoration: none;*/
.dd_sk2_kopf {color: #666666;height:18px!important; height:20px;background:url(https://cdn.powergap.de/pg_dropdown_200.gif) no-repeat;margin-left:3px!important;margin-left:3px;width:195px!important; width:205px;padding: 3px 3px;}
#dd_sk2 li {font-size: 12px;font-family: Arial, Helvetica; float: left;}
#dd_sk2 li ul {font-size: 12px;font-family: Arial, Helvetica;position: absolute;left: -999em;height: auto;width: 204px!important;width: 208px;font-weight: normal;border-width: 1px;margin-top:0px;margin-left:-1px!important;margin-left:0px;}
#dd_sk2 li ul a {padding: 4px;margin-left:3px!important;margin-left:3px;width: 200px;}
#dd_sk2 li ul a:hover{color:#CC0000;}
#dd_sk2 li:hover ul li, #dd_sk2 li:hover ul li ul, #dd_sk2 li.pg_hover ul ul, #dd_sk2 li.pg_hover ul ul ul {left: -999em;color:#CC0000;}
#dd_sk2 li:hover ul, #dd_sk2 li li:hover ul, #dd_sk2 li li li:hover ul, #dd_sk2 li.pg_hover ul, #dd_sk2 li li.pg_hover ul, #dd_sk2 li li li.pg_hover ul {left: auto;}
#dd_sk2 li:hover, #dd_sk2 li.pg_hover {color:#CC0000;}
P.S. Sollten die einzelnen Dropdowns "aneinander kleben", so muss das "margin-right" innerhalb von z.B. "#dd_aug2" von "0px" auf "10px" geändert werden.
#dd_aug2, #dd_aug2 ul {...margin-right:10px...}
Der erste Part "POWERGAP Standard CSS Dropdown Sortierung Suchergebnis" ist für das Sortiert-Dropdown aus dem Suchergebnis-Footer-Template! Wer hier auch die CSS Variante bevorzugt, muss dieses CSS einsetzen und statt dem Synonym #sortierung, das #css_sortierung benutzen.
Wer z.B. keine Eingrenzungen für die Zusatzkategorien1+2 benötigt, sollte den jeweiligen Teil im CSS natürlich nicht in den eigenen Shop kopieren. Das spart einiges an der Dateigröße des CSS, da diese Dropdowns (vor allem, damit diese auf den unterschiedlichen Browsern möglichst identisch dargestellt werden) einiges an CSS benötigen.
Mit diesen wenigen Schritten hat man die Einrichtung vollbracht und muss per Strg+F5 den Shop im Browser so auffrischen, dass das CSS neu geladen wird um das Ergebnis zu sehen. Die Kunden, die gerade im Shop sind, sehen das spätestens in einer Stunde dann auch. Denn der Cache des CSS verfällt nach 60 Minuten.
In allen Shops sind 3 Größen-Varianten der Dropdown Hintergrund Grafik ausgeliefert:
 | (img/pg_dropdown_100.gif) |
 | (img/pg_dropdown_150.gif) |
 | (img/pg_dropdown_200.gif) |
sollte man eine andere Breite als die 100, 150 oder 200 Pixel benötigen, so muss man die jeweilige Grafik einfach nur erstellen und über den IMG-Explorer hoch laden. Die "width"-Angaben im jeweiligen CSS-Part müssen angepasst werden.
Mit dem Austausch der Grafiken und entsprechender Änderungen im CSS lassen sich diese Dropdowns schön auf das eigene CI anpassen! Hier andere Varianten:
Wer sich nicht selbst an diese Änderung traut, der kann wie üblich uns damit beauftragen. Der Aufwand für uns mit Anpassung an Ihr CI ist ca. 15 Minuten (bei 70€/Stunde).
Zu empfehlen ist dieses Update jedem Shopbetreiber, denn solche Aufwertungen gehören heute zum guten Ton. Werden genau solche Updates nicht eingeschaltet, so gerät der Shop immer mehr auf die Schienen, wo sich dann veraltete Shops auf ein Bier treffen. Spaß bei Seite, wir können ja niemanden zum Glück zwingen, aber bitte nutzen Sie solche Updates um einfach auf dem aktuellen Stand zu bleiben!
P.S. Bitte hierzu auch den folgenden Beitrag beachten:
http://www.powergap.de/forum/index.php?topic=982.msg2623#msg2623