Ich habe mir dieses Wochenende die Buttons in meinem Shop vorgenommen. Mein Ziel: CSS Buttons welche man individuell formatieren kann. Dabei bin ich auf ein interessantes Modul gestossen, welches ich an Webs angepasst habe. Der Einbau geht in wenigen Minuten von statten.
Gehe zu: / webs / includes / application_top.php
Suche:
Code: Alles auswählen
require_once(DIR_FS_INC.'ecb_substr.inc.php');
Code: Alles auswählen
require_once (DIR_FS_INC.'xtc_css_button.inc.php');
Ersetze:
Code: Alles auswählen
function xtc_image_button($image, $alt = '', $parameters = '') {
return xtc_image('templates/'.CURRENT_TEMPLATE.'/buttons/' . $_SESSION['language'] . '/'. $image, $alt, '', '', $parameters);
}
Code: Alles auswählen
function xtc_image_button($image, $alt = '', $parameters = '') {
return xtc_css_button($image, $alt, $parameters, false);
}
Suche:
Code: Alles auswählen
function xtc_image_submit($image, $alt = '', $parameters = '') {
$image_submit = '<input type="image" src="' . xtc_parse_input_field_data('templates/'.CURRENT_TEMPLATE.'/buttons/' . $_SESSION['language'] . '/'. $image, array('"' => '"')) . '" alt="' . xtc_parse_input_field_data($alt, array('"' => '"')) . '"';
if (xtc_not_null($alt)) $image_submit .= ' title=" ' . xtc_parse_input_field_data($alt, array('"' => '"')) . ' "';
if (xtc_not_null($parameters)) $image_submit .= ' ' . $parameters;
$image_submit .= ' />';
return $image_submit;
}
Code: Alles auswählen
function xtc_image_submit($image, $alt = '', $parameters = '') {
return xtc_css_button($image, $alt, $parameters, true);
}
Erstelle neuen Ordner mit dem Namen "cssbutton_ico" und speichere dort die folgenden Icons ab:
http://www.filesend.net/download.php?f= ... afcaad1fc2
Gehe zu: webs / inc
Erstelle eine neue Datei mit dem Namen "xtc_css_button.inc.php" und speichere folgenden Inhalt ab:
Code: Alles auswählen
<?php
function xtc_css_button($image, $alt, $parameters='', $submit) {
$name = $image;
$buttonpath = 'templates/'.CURRENT_TEMPLATE.'/buttons/' . $_SESSION['language'] . '/';
$iconpath = 'templates/'.CURRENT_TEMPLATE.'/buttons/cssbutton_ico/';
$html = '';
$clear = '';
$customColor_0 = '';
$customColor_1 = ''; // jedem Button andere Farben zuweisen z.B. im Array die Farben 'customColor_0' => '#ff0000', 'customColor_1' => '#0000ff', einsetzen.
$buttonSize = ' buttonSize';
$textButton = ' textButton';
$imageButton = ' imageButton';
$gradient = ' gradient_0'; // Button gradient
$title = xtc_parse_input_field_data($alt, array('"' => '"'));
if (xtc_not_null($parameters)) {$parameters = ' '.$parameters;}
/* Buttons array */
$buttons = array(
'default' => array('Image' => '', 'Text' => $alt, 'icon' => '', 'iconposition' => 'iconnone', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_add_address.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_edit_adress.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_add_quick.gif' => array('Image' => '', 'Text' => IMAGE_BUTTON_IN_CART, 'icon' => 'icon_add_cart.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_admin.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_admin.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_back.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_back2.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_buy_now.gif' => array('Image' => '', 'Text' => IMAGE_BUTTON_IN_CART, 'icon' => 'icon_add_cart.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_change_address.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_edit_adress.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_checkout.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_checkout.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_confirm_order.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_confirm.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_continue.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_next2.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_continue_shopping.gif' => array('Image' => '', 'Text' => $alt, 'icon' => '', 'iconposition' => 'iconnone', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_delete.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_delete2.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_download.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_download.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_login.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_login.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_logoff.gif' => array('Image' => '', 'Text' => $alt, 'icon' => '', 'iconposition' => 'iconnone', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_in_cart.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_add_cart.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_login_newsletter.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_checkout.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_print.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_print.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_product_more.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_product_more.png','iconposition' => 'iconleft', 'Size' => '1', 'color' => '1', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_quick_find.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_search.png', 'iconposition' => 'icononly', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_redeem.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_review.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_search.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_search.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_send.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_checkout.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_login_small.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_login.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_update.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_update.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'button_update_cart.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_update.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'button_write_review.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_write_review.png','iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'small_edit.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_edit.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'small_delete.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_delete2.png', 'iconposition' => 'iconright', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
'cart_del.gif' => array('Image' => $name, 'Text' => $alt, 'icon' => '', 'iconposition' => 'iconnone', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'edit_product.gif' => array('Image' => '', 'Text' => $alt, 'icon' => 'icon_admin.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => true ),
'print.gif' => array('Image' => '', 'Text' => TEXT_PRINT, 'icon' => 'icon_print.png', 'iconposition' => 'iconleft', 'Size' => '1', 'color' => '0', 'customColor_0' => '', 'customColor_1' => '', 'clear' => false ),
);
if ($buttons[$name]['customColor_0']) {
$customColor_0 = ' style="background-color:'.$buttons[$name]['customColor_0'].'!important;"';
}
if ($buttons[$name]['customColor_1']) {
$customColor_1 = ' style="background-color:'.$buttons[$name]['customColor_1'].'!important;"';
}
if (!array_key_exists($name, $buttons)) {$name = 'default';}
if ($buttons[$name]['Image']) {
$html .= '<span class="cssButton'.$imageButton.$buttonSize.$buttons[$name]['Size'].'"'.$parameters.'>';
$html .= '<span>';
$html .= '<img src="'.$buttonpath.$buttons[$name]['Image'].'" alt="'.$buttons[$name]['Text'].'" />';
$html .= '</span>';
}else {
if ($buttons[$name]['color'] == '1') {// farben umkehren (hover-effekt)
$html .= '<span class="cssButton color_1 '.$buttons[$name]['iconposition'].$textButton.$buttonSize.$buttons[$name]['Size'].'"'.$customColor_1.$parameters.'>';
$html .= '<span class="background_hover color_0"'.$customColor_0.'> </span>';
}else {
$html .= '<span class="cssButton color_0 '.$buttons[$name]['iconposition'].$textButton.$buttonSize.$buttons[$name]['Size'].'"'.$customColor_0.$parameters.'>';
$html .= '<span class="background_hover color_1"'.$customColor_1.'> </span>';
}
$html .= '<span class="animate_image'.$gradient.'"> </span>';
if ($buttons[$name]['iconposition'] != 'iconnone') {
$html .= '<span class="buttonIcon" title="'.$title.'" style="background-image: url('.$iconpath.$buttons[$name]['icon'].');"> </span>';
}
if ($buttons[$name]['iconposition'] != 'icononly') {
$html .= '<span class="buttonText" title="'.$title.'">'.$buttons[$name]['Text'].'</span>';
}
}
if ($submit) {
$html .= '<button';
if ($submit <> true) {
$html .= ' name="'.$submit.'"';
}
if ($submit == true || $submit == "submit") {
$html .= ' type="submit"';
}
$html .= ' title="'.$title.'"'.$parameters.'>';
$html .= $title.'</button>';
}
$html .= '</span>';
if ($buttons[$name]['clear']) {
$html .= '<span class="buttonclear"> </span>';
}
return $html;
}
?>
Öffne: webs /templates / webs / css/ buttons.css
Füge folgenden Code am Ende ein:
Code: Alles auswählen
/* ====================================================================================================================== */
/* ========= css Buttons ========= */
/* ====================================================================================================================== */
.cssButton {
position:relative;
margin:0 4px 0 0;
display:inline-block;
text-align:left;
overflow:hidden;
text-decoration:none !important;
}
.buttonSize0,
.buttonSize0 .background_hover,
.buttonSize0 .animate_image,
.buttonSize0 .buttonIcon,
.buttonSize0 button {
height:28px;
line-height:28px;
cursor:pointer;
}
.buttonSize1,
.buttonSize1 .background_hover,
.buttonSize1 .animate_image,
.buttonSize1 .buttonIcon,
.buttonSize1 button {
height:24px;
line-height:24px;
cursor:pointer;
}
.buttonSize2,
.buttonSize2 .background_hover,
.buttonSize2 .animate_image,
.buttonSize2 .buttonIcon,
.buttonSize2 button {
height:20px;
line-height:20px;
cursor:pointer;
}
.cssButton .background_hover,
.cssButton .animate_image,
.cssButton button {
position:absolute !important;
display:inline-block;
width:100%;
top:0;
left:0;
border:none;
background:transparent;
}
.cssButton .animate_image {
background-position:50% 50%;
}
.cssButton:hover .animate_image {
background-position:60% 50%;
}
.cssButton .background_hover {
opacity:0;
filter: alpha(opacity=0);
}
.cssButton:hover .background_hover {
opacity:1;
filter: alpha(opacity=100);
}
.cssButton .buttonIcon {
position:absolute;
background-position:center center;
background-repeat:no-repeat;
}
/* ================================================= */
.cssButton.buttonSize0 .buttonIcon {
width:35px;
}
.cssButton.buttonSize1 .buttonIcon {
width:35px;
}
.cssButton.buttonSize2 .buttonIcon {
width:25px;
}
/* ================================================= */
.cssButton.buttonSize0 .buttonIcon {
background-size:20px;
-moz-background-size:20px;
}
.cssButton.buttonSize1 .buttonIcon {
background-size:20px;
-moz-background-size:20px;
}
.cssButton.buttonSize2 .buttonIcon {
background-size:13px;
-moz-background-size:13px;
}
/* ================================================= */
.icononly.buttonSize0 .buttonIcon {
width:28px;
}
.icononly.buttonSize1 .buttonIcon {
width:24px;
}
.icononly.buttonSize2 .buttonIcon {
width:20px;
}
/* ================================================= */
.iconleft .buttonIcon {
left:0;
}
.iconright .buttonIcon {
right:0;
}
.cssButton .buttonText,
.icononly .buttonIcon {
position:relative;
display:inline-block;
font-weight:bold;
font-size:12px;
white-space:nowrap;
}
.cssButton .buttonText {
padding:0 10px;
}
/* ================================================= */
.iconleft.buttonSize0 .buttonText {
padding:0 10px 0 33px;
}
.iconleft.buttonSize1 .buttonText {
padding:0 10px 0 33px;
}
.iconleft.buttonSize2 .buttonText {
padding:0 5px 0 25px;
}
/* ================================================= */
.iconright.buttonSize0 .buttonText {
padding:0 33px 0 10px;
}
.iconright.buttonSize1 .buttonText {
padding:0 33px 0 10px;
}
.iconright.buttonSize2 .buttonText {
padding:0 25px 0 5px;
}
/* ================================================= */
.iconnone.buttonSize0 .buttonText {
padding:0 10px;
}
.iconnone.buttonSize1 .buttonText {
padding:0 10px;
}
.iconnone.buttonSize2 .buttonText {
padding:0 5px;
}
/* ================================================= */
.cssButton button {
color:transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.buttonclear {
clear:both;
font-size:0;
line-height:0;
}
/* cssButton style =================================== */
.cssButton,
.background_hover,
.animate_image {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.cssButton.textButton {
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);
box-shadow:0 1px 2px rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.Shadow(color='#808080',direction='120',strength='2');
}
/* Verlauf */
.cssButton .gradient_0 {
background-image:url(buttons/cssbutton_ico/gradient_0.png) ;
}
/* not IE */
.cssButton .gradient_1 {
background-image:-moz-linear-gradient( -90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 50%,rgba(0,0,0,.2) 51%,rgba(0,0,0,.6) 100%);
background-image:-webkit-linear-gradient( -90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 50%,rgba(0,0,0,.2) 51%,rgba(0,0,0,.6) 100%);
background-image:linear-gradient( -90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 50%,rgba(0,0,0,.2) 51%,rgba(0,0,0,.6) 100%) ;
}
.cssButton .gradient_2 {
background-image:-moz-linear-gradient( -90deg,rgba(255,255,255,0.1) 0,rgba(0,0,0,.3) 100%);
background-image:-webkit-linear-gradient( -90deg,rgba(255,255,255,0.1) 0,rgba(0,0,0,.3) 100%);
background-image:linear-gradient( -90deg,rgba(255,255,255,0.1) 0,rgba(0,0,0,.3) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#1affffff,endColorstr=#4d000000) ;
}
/* Text Farbe */
.cssButton {
color:#FFFFFF!important;
}
/* Text-Shadow */
.cssButton .buttonText {
text-shadow:1px 1px 1px #000000;
text-shadow:1px 1px 1px rgba(0,0,0,1) !important;
}
/* Button Farbe */
.color_1 {
background-color:#AD4C79!important;
}
.color_0 {
background-color:#4D4D4D!important;
}
/* css Animation ================================== (not IE) */
/* .cssButton .background_hover,
.cssButton .animate_image {
-webkit-transition-duration:200ms;
-webkit-transition-property:background-color,background-position,opacity;
-webkit-transition-timing-function:ease-in-out;
-moz-transition-duration:200ms;
-moz-transition-property:background-color,background-position,opacity;
-moz-transition-timing-function:ease-in-out;
-o-transition-duration:200ms;
-o-transition-property:background-color,background-position,opacity;
-o-transition-timing-function:ease-in-out;
}
*/
/* ====================================================================================================================== */
/* ========= css Buttons ========= */
/* ====================================================================================================================== */
Und so siehts nun bei mir im Testshop (Version 1.14) aus: https://www.engelis-naturshop.ch/webs14Erklärung: xtc_css_button.inc.php
-----------------------------------------------------------------------------------------------------------------------------
$gradient = ' gradient_0'; ... verschiedene Verläufe (0,1,2)
$buttons[$name]['color'] ... Farben umkehren (0 oder 1)
$buttons[$name]['Size'] ... Button-Grösse einstellen (0=height:28px, 1=height:24px, 2=height:20px)
$buttons[$name]['iconposition'] ... diverse Icon Einstellungen (iconnone, icononly, iconleft, iconright)
$buttons[$name]['customColor_0'] und $buttons[$name]['customColor_1'] ... jedem Button andere Farben zuweisen
Achtung: Ich bin noch immer in der Testphase. Bis jetzt habe ich jedoch noch keine Fehler gefunden. Hinweis: Dieses Modul entstammt nicht von mir, sondern wurde für xt-modified entwickelt und von mir lediglich an webs angepasst. Das Original findet ihr hier: http://www.modified-shop.org/forum/inde ... ic=19662.0
Gruss Kopernikus