Sehr geehrte POWERGAP Kunden,
ab sofort ist der SSL-Bereich in der Pflege der abweichenden Adressen neu!
Schon länger ist sicher auch Ihren Kunden aufgefallen, dass die Bedienung nicht optimal war. Nun ist die Usability an dieser Stelle deutlich verbessert worden.
In der ersten Maske ist der Text bei dem Haken für die ALA um das "anhaken, wenn Lieferung an" erweitert worden. Das stellt den Sinn der Checkbox deutlicher dar.
Wenn ein Kunde diese Maske erneut aufruft, ist diese Checkbox dann ganz verschwunden. Bisher war diese mit einem "readonly" Status auf nicht änderbar gesetzt und ein Besucher wunderte sich teilweise, das das soll. Sind also abweichende Adressen erfasst, kommt der Kunde in nun diese neue Maske:
Diese bedarf nun keinerlei Erklärung. So in diesem Zustand ist das alles in allen Shops installiert. Wer nun perfektionieren möchte, kann das Design z.B. für die Buttons selbst per CSS verändern. Der schattierte Verlauf in den Buttons (gradient genannt) zeigt der IE übrigens nicht an.
Einstellungen auf Ihr individuelles CI:
Wir liefern innerhalb des Quellcodes bereits diese Formatierungen aus:
Diese brauchen Sie nirgends einstellen. Bitte nur für die nötigen Änderungen das neue CSS einbinden!
Beispielsweise brauch man im CSS unter Layout > Schriften/CSS > SSL nur
eintragen, wenn der "löschen" Button einen roten Rahmen bekommen soll. Bitte beachten Sie dabei, bei Änderungen den Browser-Cache zu leeren, damit Ihre Änderungen Wirkung zeigen.
Hier ein Beispiel :
und der dazu nötige CSS-Code:
Die Datei img/hint_button.gif ist ein einfaches GIF mit der Hintergrundfarbe des Buttons. Da im Standard ein Gradient eingestellt ist und dieses wie eine Grafik behandelt wird, kann man es am einfachsten (damit es in allen Browsern direkt funktioniert) mit eben einer Grafik überschreiben. Ansonsten muss man CSS-Hacks nutzen, damit das auch im IE usw. richtig ausschaut..
Die Klassen unter /* Formatierung Tabelle ALA */ dienen Dazu die einzelnen Zeilen der Auflistung zu formatieren. z.B. die geänderte Hintergrundfarbe, wenn man mit der Maus über eine Adresse hoovert.
Sollten Sie sich nicht selbst an das CSS trauen und es dennoch perfekt an Ihr CI angepasst wünschen, können wir das hier gegen 15 Minuten Grafiker-Aufwand (17,50€) auf Wunsch für Sie übernehmen..
Für alle Shopbetreiber des POWERGAP-Premium Segments haben wir diese Anpassungen schon erledigt.
ab sofort ist der SSL-Bereich in der Pflege der abweichenden Adressen neu!
Schon länger ist sicher auch Ihren Kunden aufgefallen, dass die Bedienung nicht optimal war. Nun ist die Usability an dieser Stelle deutlich verbessert worden.
In der ersten Maske ist der Text bei dem Haken für die ALA um das "anhaken, wenn Lieferung an" erweitert worden. Das stellt den Sinn der Checkbox deutlicher dar.
Wenn ein Kunde diese Maske erneut aufruft, ist diese Checkbox dann ganz verschwunden. Bisher war diese mit einem "readonly" Status auf nicht änderbar gesetzt und ein Besucher wunderte sich teilweise, das das soll. Sind also abweichende Adressen erfasst, kommt der Kunde in nun diese neue Maske:
Diese bedarf nun keinerlei Erklärung. So in diesem Zustand ist das alles in allen Shops installiert. Wer nun perfektionieren möchte, kann das Design z.B. für die Buttons selbst per CSS verändern. Der schattierte Verlauf in den Buttons (gradient genannt) zeigt der IE übrigens nicht an.
Einstellungen auf Ihr individuelles CI:
Wir liefern innerhalb des Quellcodes bereits diese Formatierungen aus:
.button_neue_ala,.button_ala_loesch,.button_ala_aendern{font-size: 11px;text-decoration:none;border:1px solid #AAA;cursor:pointer;text-decoration:none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;text-align:center;letter-spacing: 0.5px;font-weight: bold; padding:4px;
background-color: #EEE;
background:-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(50%, #EEE), color-stop(50.1%, #DDD), to(#CCC));
background:-moz-linear-gradient(top, #FFF, #EEE 50%, #DDD 50.1%, #CCC);
background:linear-gradient(top, #FFF, #EEE 50%, #DDD 50.1%, #CCC);}
.button_neue_ala{color:#444;}
.button_ala_aendern{color:#444;}
.button_ala_loesch{color:#C03737;}
/* Formatierung Tabelle ALA */
table.ala {border-collapse: collapse;margin-top:10px;padding:0px;}
table.ala th {background-color: #FFF;color: #666;}
table.ala th, table.ala td {border-bottom: 1px solid #ECECEC;border-top: 1px solid #ECECEC;padding: 0.6em;}
table.ala tr td {background-color: #FFFFFF;font-size:12px;}
table.ala tr:hover td {background-color: #F9F9F9;}
table.ala tr.odd td {background-color: #FFFFFF;font-size:12px;}
table.ala tr.odd:hover td {background-color: #F9F9F9;}
background-color: #EEE;
background:-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(50%, #EEE), color-stop(50.1%, #DDD), to(#CCC));
background:-moz-linear-gradient(top, #FFF, #EEE 50%, #DDD 50.1%, #CCC);
background:linear-gradient(top, #FFF, #EEE 50%, #DDD 50.1%, #CCC);}
.button_neue_ala{color:#444;}
.button_ala_aendern{color:#444;}
.button_ala_loesch{color:#C03737;}
/* Formatierung Tabelle ALA */
table.ala {border-collapse: collapse;margin-top:10px;padding:0px;}
table.ala th {background-color: #FFF;color: #666;}
table.ala th, table.ala td {border-bottom: 1px solid #ECECEC;border-top: 1px solid #ECECEC;padding: 0.6em;}
table.ala tr td {background-color: #FFFFFF;font-size:12px;}
table.ala tr:hover td {background-color: #F9F9F9;}
table.ala tr.odd td {background-color: #FFFFFF;font-size:12px;}
table.ala tr.odd:hover td {background-color: #F9F9F9;}
Diese brauchen Sie nirgends einstellen. Bitte nur für die nötigen Änderungen das neue CSS einbinden!
Beispielsweise brauch man im CSS unter Layout > Schriften/CSS > SSL nur
.button_ala_loesch{border:1px solid #C03737;}
eintragen, wenn der "löschen" Button einen roten Rahmen bekommen soll. Bitte beachten Sie dabei, bei Änderungen den Browser-Cache zu leeren, damit Ihre Änderungen Wirkung zeigen.
Hier ein Beispiel :
und der dazu nötige CSS-Code:
.button_neue_ala,.button_ala_loesch,.button_ala_aendern{background-image: url('img/hint_button.gif');border:0;padding:6px;padding-left:10px;padding-right:10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;font-family: Arial, Helvetica;text-transform:uppercase;font-size: 10px;}
.button_ala_loesch{color:#DEB3B3;}
.button_ala_aendern,.button_neue_ala{color:#FFF;}
.button_ala_loesch{color:#DEB3B3;}
.button_ala_aendern,.button_neue_ala{color:#FFF;}
Die Datei img/hint_button.gif ist ein einfaches GIF mit der Hintergrundfarbe des Buttons. Da im Standard ein Gradient eingestellt ist und dieses wie eine Grafik behandelt wird, kann man es am einfachsten (damit es in allen Browsern direkt funktioniert) mit eben einer Grafik überschreiben. Ansonsten muss man CSS-Hacks nutzen, damit das auch im IE usw. richtig ausschaut..
Die Klassen unter /* Formatierung Tabelle ALA */ dienen Dazu die einzelnen Zeilen der Auflistung zu formatieren. z.B. die geänderte Hintergrundfarbe, wenn man mit der Maus über eine Adresse hoovert.
Sollten Sie sich nicht selbst an das CSS trauen und es dennoch perfekt an Ihr CI angepasst wünschen, können wir das hier gegen 15 Minuten Grafiker-Aufwand (17,50€) auf Wunsch für Sie übernehmen..
Für alle Shopbetreiber des POWERGAP-Premium Segments haben wir diese Anpassungen schon erledigt.