Sehr geehrte POWERGAP Kunden,
ich weiß, heute schon das dritte Update, und das bei 36 Grad draußen
Dieses mal ist es eine Möglichkeit für grafische Perfektionisten einen Scrollbalken nach eigenem Geschmack zu designen. Der IE bietet ja zumindest über das CSS einige einfache Formatierungsmöglichkeiten, der Firefox gar keine und übernimmt die Standardbalken des jeweiligen Betriebssystems:
POWERGAP hat eine Unlimited Lizenz des Tools www.hesido.com/web.php?page=customscrollbar eingekauft, dass nun von allen Nutzern im POWERGAP Shop verwendet werden kann.
Im Demo-Shop haben wir auf der Startseite unten ein Beispiel eingebaut:
(Klick, um LIVE zu sehen)
In dem Fall wurde es für den Infotyp "X Zufalls-Artikel (Template)" genutzt. 20 Zufallsartikel, die in einer Zeile horizontal gescrollt werden können. Eine schicke Sache um mit wenig Platz einem Kunden auch mehr als nur die bisher sichtbaren neusten Artikel auf der Startseite anzuzeigen.
Natürlich ist es neben den Startseitenmodulen auch für andere bereits vorhandene POWERGAP Features einsetzbar. Immer dann, wenn man Content etwas platzsparender unterbringen möchte. Es sollte sogar direkt im Artikeltext funktionieren, um dort z.B. eine überbreite Tabelle auf diese Weise grafisch geschickt einzusetzen.
Die Einbindung und Nutzung ist
Über "Sonstiges" > "Sonstige Einstellungen" > Feld "Javascript_Head" bitte diesen Code einsetzen:
<!--[if IE 6]>
<link href="x_flexcrollie6styles.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type='text/javascript' src="x_flexcroll.js"></script>
<link href="x_flexcrollie6styles.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type='text/javascript' src="x_flexcroll.js"></script>
Über "Layout" > "Schriften / CSS" > "ROOT" muss der folgendes CSS eingesetzt werden:
/* Scroll Bar Master Styling Starts Here */
/* comments can freely be removed from this file */
/* do not modify .scrollgeneric class, required for proper operation */
.scrollgeneric {
line-height: 1px; font-size: 1px;
position: absolute; top: 0; left: 0;
}
.vscrollerbase, .vscrollerbar {
width: 18px;
}
.hscrollerbase, .hscrollerbar {
height: 18px;
}
.vscrollerbar, .hscrollerbar {
/*padding information of these elements are only used for
padding of the scroll-bar with respect to the scroll base,
the padding will automatically be turned off by the script*/
padding: 5px;
/* z-index for scrollbars no longer has to be given as of version
1.7.5 for correct operation, but it is still recommended, as this
decides the z-index for content.*/
z-index: 2;
}
.vscrollerbarbeg {
/*top image holder for vertical scroll bar*/
background: url(https://cdn.powergap.de/x_vscroller.png) 0px -10px;
width: 18px;
/* height is auto set by the script to fit the scrollbar */
}
.vscrollerbarend {
/*bottom image holder for vertical scroll bar*/
background: url(https://cdn.powergap.de/x_vscroller.png);
width: 18px; height: 10px;
}
.hscrollerbarbeg {
/*left image holder for horizontal scroll bar*/
background: url(https://cdn.powergap.de/x_hscroller.png) -10px 0px;
height: 18px;
/* width is auto set by the script to fit the scrollbar */
}
.hscrollerbarend {
/*right image holder for horizontal scroll bar*/
background: url(https://cdn.powergap.de/x_hscroller.png);
height: 18px; width: 10px;
}
/* Following are OPTIONAL */
.vscrollerbase, .hscrollerbase {
background-color: #D1DDCB;
background-image: url(https://cdn.powergap.de/x_scrollbaseback.png);
}
.hscrollerbasebeg {
height: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -22px 0px no-repeat;
/* width is auto set to fill the base */
}
.hscrollerbaseend {
height: 18px; width: 7px;
background: url(https://cdn.powergap.de/x_scrollbases.png) 0% 0% no-repeat;
}
.vscrollerbasebeg {
width: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -7px -8px no-repeat;
/* height is auto set to fill the base */
}
.vscrollerbaseend {
height: 7px; width: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -7px 0px no-repeat;
}
.scrollerjogbox {
width: 18px; height: 18px;
top: auto; left: auto; bottom: 0px; right: 0px;
background: white url(https://cdn.powergap.de/x_scrolljog.png) 50% 50%;
}
/* Scroll Bar Master Styling Ends Here */
#content {
padding: 1em;
margin:0.2em 2em;
}
.copyrightnotice {
font-size: 70%;
font-weight: bold;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-indent: 0;
}
#mycustomscroll {
/* Typical fixed height and fixed width example */
width: 500px;
height: 120px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
margin: 0.3em auto;
padding: 1px;
}
.fixedwidth {
/* a wide div is used for creating horizontal scrollbars for demonstration purposes */
/* width: 300px; */
height: 90px;
position: relative;
color: black;
padding: 1px;
}
/* comments can freely be removed from this file */
/* do not modify .scrollgeneric class, required for proper operation */
.scrollgeneric {
line-height: 1px; font-size: 1px;
position: absolute; top: 0; left: 0;
}
.vscrollerbase, .vscrollerbar {
width: 18px;
}
.hscrollerbase, .hscrollerbar {
height: 18px;
}
.vscrollerbar, .hscrollerbar {
/*padding information of these elements are only used for
padding of the scroll-bar with respect to the scroll base,
the padding will automatically be turned off by the script*/
padding: 5px;
/* z-index for scrollbars no longer has to be given as of version
1.7.5 for correct operation, but it is still recommended, as this
decides the z-index for content.*/
z-index: 2;
}
.vscrollerbarbeg {
/*top image holder for vertical scroll bar*/
background: url(https://cdn.powergap.de/x_vscroller.png) 0px -10px;
width: 18px;
/* height is auto set by the script to fit the scrollbar */
}
.vscrollerbarend {
/*bottom image holder for vertical scroll bar*/
background: url(https://cdn.powergap.de/x_vscroller.png);
width: 18px; height: 10px;
}
.hscrollerbarbeg {
/*left image holder for horizontal scroll bar*/
background: url(https://cdn.powergap.de/x_hscroller.png) -10px 0px;
height: 18px;
/* width is auto set by the script to fit the scrollbar */
}
.hscrollerbarend {
/*right image holder for horizontal scroll bar*/
background: url(https://cdn.powergap.de/x_hscroller.png);
height: 18px; width: 10px;
}
/* Following are OPTIONAL */
.vscrollerbase, .hscrollerbase {
background-color: #D1DDCB;
background-image: url(https://cdn.powergap.de/x_scrollbaseback.png);
}
.hscrollerbasebeg {
height: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -22px 0px no-repeat;
/* width is auto set to fill the base */
}
.hscrollerbaseend {
height: 18px; width: 7px;
background: url(https://cdn.powergap.de/x_scrollbases.png) 0% 0% no-repeat;
}
.vscrollerbasebeg {
width: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -7px -8px no-repeat;
/* height is auto set to fill the base */
}
.vscrollerbaseend {
height: 7px; width: 18px;
background: url(https://cdn.powergap.de/x_scrollbases.png) -7px 0px no-repeat;
}
.scrollerjogbox {
width: 18px; height: 18px;
top: auto; left: auto; bottom: 0px; right: 0px;
background: white url(https://cdn.powergap.de/x_scrolljog.png) 50% 50%;
}
/* Scroll Bar Master Styling Ends Here */
#content {
padding: 1em;
margin:0.2em 2em;
}
.copyrightnotice {
font-size: 70%;
font-weight: bold;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-indent: 0;
}
#mycustomscroll {
/* Typical fixed height and fixed width example */
width: 500px;
height: 120px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
margin: 0.3em auto;
padding: 1px;
}
.fixedwidth {
/* a wide div is used for creating horizontal scrollbars for demonstration purposes */
/* width: 300px; */
height: 90px;
position: relative;
color: black;
padding: 1px;
}
Für das Beispiel im Demoshop musste ich nur beim "#mycustomscroll" die width und height-Angabe und beim ".fixedwidth" die height Angabe anpassen, sowie diesen Code in dem jeweiligen Infotyp "X Zufalls-Artikel (Template)" einsetzen:
Mit diesem DIV schafft man es also das wie im Demoshop einzustellen:
<div id='mycustomscroll' class='flexcroll'><div class='fixedwidth' style="width:1000px;"><table border=0><tr><td>
-------------
</td></tr></table>
</div></div>
<center><br><span class=rating_2>alle Preise inkl. MwSt., zzgl. (4.95 €) Versandkosten</span></center>
Template HTML:
<table width=131 height=79 border=0 cellspacing=0 cellpadding=2 background=img/start_3.jpg><tr><td valign=top align=justify>
<table border=0><tr><td>
<a href="#a_link"><img src="#thumb" style="float:left;height: 60px;width: 60px;border: 0px;"
ONMOUSEOVER="dT(event,'<b>#a_name_tt</b><br>#a_text_tt','',0)" ONMOUSEOUT="hT()"></a>
</td><td align=center valign=middle>
<span class=b7><b>#curk #vk</b></span>
</td></tr></table>
</td></tr></table>
<table border=0><tr><td>
<a href="#a_link"><img src="#thumb" style="float:left;height: 60px;width: 60px;border: 0px;"
ONMOUSEOVER="dT(event,'<b>#a_name_tt</b><br>#a_text_tt','',0)" ONMOUSEOUT="hT()"></a>
</td><td align=center valign=middle>
<span class=b7><b>#curk #vk</b></span>
</td></tr></table>
</td></tr></table>
Klar muss man sich ein wenig damit beschäftigen um es komplett auszureizen. Ich selbst habe mich für dieses Beispiel nur mit der horizontalen Möglichkeit beschäftigt. Wer das vertikal auch zusätzlich nutzen will muss sich schon recht mühsam durch die Doku auf www.hesido.com/web.php?page=customscrollbar einlesen.
Geplant war der Einsatz dieses Tools ursprünglich um ein Suchergebnis horizontal anzuzeigen. Als alles fertig war haben wir aber gemerkt, dass die Ladezeiten bei zu vielen Artikeln (z.B. in einer AUG) einfach die Performance für den Besucher unrealistisch lang wurde. Da es schon gekauft war, habe ich im Demoshop diese Möglichkeit aufgezeigt, damit es nicht ganz umsonst gekauft wurde.
Wenn wir Startseitendesigns für unsere Kunden machen, werden wir in Zukunft diese Möglichkeit hier bestimmt noch das ein oder andere mal einsetzen. Es hilft zwar kaum direkt mehr Bestellungen zu bekommen, aber ist eine schöne Sache um ein Layout zu perfektionieren..