MODUL: CSS Buttons

Kopernikus · Beitrag von **Kopernikus** » So 31. Mär 2013, 14:09

Hallo zusammen

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');

Ergänze:

Code: Alles auswählen

require_once (DIR_FS_INC.'xtc_css_button.inc.php');

Gehe zu: webs / inc / xtc_image_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);
  }

Durch:

Code: Alles auswählen

  function xtc_image_button($image, $alt = '', $parameters = '') {
    return xtc_css_button($image, $alt, $parameters, false);
  }

Gehe zu: webs / inc / xtc_image_submit.inc.php

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;
  }

Ersetze durch:

Code: Alles auswählen

  function xtc_image_submit($image, $alt = '', $parameters = '') {
    return xtc_css_button($image, $alt, $parameters, true);
  }

Gehe zu: webs / templates / webs / buttons

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.'>&nbsp;</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.'>&nbsp;</span>';
    }
        $html .= '<span class="animate_image'.$gradient.'">&nbsp;</span>';
    if ($buttons[$name]['iconposition'] != 'iconnone') {
        $html .= '<span class="buttonIcon"  title="'.$title.'" style="background-image: url('.$iconpath.$buttons[$name]['icon'].');">&nbsp;</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">&nbsp;</span>';
    }

    return $html;
}

?>

Jetzt noch die Ergänzung in der CSS

Ö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 ========= */
/* ====================================================================================================================== */

Fertig

Erklä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

Und so siehts nun bei mir im Testshop (Version 1.14) aus: https://www.engelis-naturshop.ch/webs14
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

Kopernikus · Beitrag von **Kopernikus** » Mo 1. Apr 2013, 11:31

Nun habe ich bei diesem Modul doch noch einen kleinen Fehler entdeckt. Die "löschen" und "reload" Buttons im Warenkorb machen noch einige Probleme. Um dieses Problem zu lösen müsst Ihr noch folgende Zeilen ergänzen.

Zunächst müsst Ihr die neu angelegte xtc_css_button.inc.php um folgende Zeile erweitern:

Code: Alles auswählen

  'button_cart_del.gif'  => array('Image' => 'button_cart_del.gif',  'Text' =>IMAGE_BUTTON_DELETE,  'icon' =>	'', 'iconposition' => 'iconnone',  'Size' => '1',    'color' => '0',    'customColor_0' => '',    'customColor_1' => '',    'clear' =>	false ),

Der löschen Button sollte dadurch eigentlich angezeigt werden, wird jedoch durch den "Display: none" Befehl in der checkout.css versteckt.

Zunächst sollten also mal die folgenden Zeilen aus der templates/webs/css/checkout.css auskommentiert werden:

Code: Alles auswählen

.qty {
	background: url(../img/qty_bg.gif) transparent 40px 0px no-repeat;
}

.form_cart_quantity_submit {
	cursor: pointer;
}

table.order_details .qty span {
	display: none;
	padding-left: 8px;
}

table.order_details .qty span a {
	margin-left: 4px;
}

Anschliessend ergänzt ihr die checkout.css durch folgende Zeilen:

Code: Alles auswählen

.qty_frame{
   position: relative;
   float: left;
}
.qty{
   position: relative;
   float: left;
   padding-right: 5px;
}
.reload  {
   position: relative;
   float: left;
   padding-right: 5px;
}
.delete{
   position: relative;
   float: left;
}

Öffnet nun die /templates/webs/module/order_details.html und sucht darin folgende Zeilen

Code: Alles auswählen

	<td class="cell quantity">
				<div class="qty">
					{$item.PRODUCTS_QTY}
					<span>{$BUTTON_RELOAD}{$item.BUTTON_DELETE}</span>
				</div>
</td>

Ersetzt diese durch folgenden code:

Code: Alles auswählen

<td class="cell quantity">
	<div class="qty_frame">
                <div class="qty">{$item.PRODUCTS_QTY}  </div>
	            <div class="reload">{$BUTTON_RELOAD}</div>
	            <div class="delete">{$item.BUTTON_DELETE}</div>
				</div>   
			</td>

Damit werden nun der löschen und der reload Button wieder schön formatiert angezeigt. Leider jedoch ohne die hover Funktion und beim löschen Button fehlt das Alt-Tag. Ich habe bis jetzt noch nicht herausgefunden wie ich das beheben kann. Es handelt sich hierbei jedoch um "Kosmetik". Das Modul funktioniert damit 100%tig und ihr könnt die css Buttons vollumfänglich im Shop nutzen.

Grüsse Kopernikus

rieste · Beitrag von **rieste** » Di 2. Apr 2013, 06:08

Hallo,

was ist der unterschied dieses Moduls zu den CSS Buttons vom WEBS Template? Hier sind ja doch schon CSS Button verbaut die man nur aktivieren muß?

lg

Kopernikus · Beitrag von **Kopernikus** » Di 2. Apr 2013, 07:17

Das basiert aber nach wie vor auf Grafiken. Gemäss Jörg kommen die "echten" CSS Buttons erst in der Version V1.0.15. Ich weiss nicht was die Version von Jörg schlussendlich genau kann - würde mich aber auch sehr interessieren. Das von mir publizierte Modul ging jedoch schon durch einige Entwickler-Hände. Es wurde in den letzten Jahren immer wieder verbessert und optimiert. Der letzte Entwickler achtete auch darauf, dass minimalste Änderung an den Core Dateien notwendig werden. Damit werden nur 3 Core Dateien berührt.

Mit diesem Modul kannst Du wirklich vieles konfigurieren. Sozusagen jeden Button einzeln. Sogar icons können mit wenigen klicks in jedem einzelnen CSS Button realisiert werden. Zusätzlich (falls gewünscht) kann man noch über jeden Button ein javascript Fader legen. Damit blenden die Buttons beim hovern weich ein- und ausgeblendet. Ist meiner Meinung nach eine Spielerei die ich nicht wirklich benötige. Falls jemand diese Funktion wünscht, kann ich sie hier auch noch beschreiben.

WEB-Software Support

MODUL: CSS Buttons

MODUL: CSS Buttons

Re: MODUL: CSS Buttons

Re: MODUL: CSS Buttons

Re: MODUL: CSS Buttons