新聞中心

Ecshop教程：修改支付寶付款按鈕樣式外觀換成圖片

作者 / 無(wú)憂主機(jī) 時(shí)間 2015-11-12 19:37:19

很多無(wú)憂主機(jī)在php空間使用ecshop的用戶覺得ecshop默認(rèn)的支付寶按鈕太單調(diào)，也不顯眼，覺得太難看，想要自定義的修改成帶有個(gè)性的顏色或者其他圖片之類的，那么如何修改呢？下面由無(wú)憂主機(jī)小編就來(lái)為大家簡(jiǎn)單介紹一種修改ecshop支付寶支付按鈕的方法。小編就先來(lái)下個(gè)單，分別看看修改前和修改后的不同之處。下完單之后，點(diǎn)進(jìn)用戶中心——我的訂單，顯示的效果如下圖：接下來(lái)小編就開始進(jìn)行修改了。首先打開網(wǎng)站根目錄/includes/modules/payment/alipay.php；大概在196行，找到以下這段代碼：

$button = '<div style="text-align:center"><input type="button" onclick="window.open(\'https://www.alipay.com/cooperate/gateway.do?'.$param. '&sign='.md5($sign).'&sign_type=MD5\')" value="' .$GLOBALS['_LANG']['pay_button']. '" /></div>';

將其修改成以下這段代碼：

$button = '<div style="text-align:center"><input type="button" class="alipay_anniu" onclick="window.open(\'https://www.alipay.com/cooperate/gateway.do?'.$param. '&sign='.md5($sign).'&sign_type=MD5\')" value="' .$GLOBALS['_LANG']['pay_button']. '" /></div>';

也就是在<input type="button"后面添加：class="alipay_anniu" 接下來(lái)是在themes/模版文件/style.css文件的最下面添加以下代碼：

.alipay_anniu {
width: 220px;/*按鈕寬度*/
height: 40px;/*按鈕高度*/
border: 2px solid #EBEBEB;/*按鈕邊框*/
background: none repeat scroll 0 0 #990099;/*按鈕背景顏色*/
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
display: inline-block;
position: relative;
text-align: center;/*按鈕字體居中*/
cursor: pointer;/*鼠標(biāo)放在按鈕上變成小手*/
font-size:18px;/*字體大小*/
color:#ffffff;/*字體顏色*/

修改之后的效果: