如何更改magento上的按钮样式

时间:2013-09-28 11:55:23

标签: css magento

我需要一些关于在我的magento网站上添加到购物车和其他按钮的帮助。

http://www.siameyewear.com/ray-ban-rb3025-112-69-aviator-large-metal.html

你可以看到

对我来说这看起来太简单了。我已经创建了一个新的css按钮。但问题是我不知道如何用我的主题改变它。我已经要求主题支持来提供帮助。但他们不支持定制。

.classname {
    -moz-box-shadow:inset 0px 2px 0px 0px #ffeac7;
    -webkit-box-shadow:inset 0px 2px 0px 0px #ffeac7;
    box-shadow:inset 0px 2px 0px 0px #ffeac7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #f7a413) );
    background:-moz-linear-gradient( center top, #ffce79 5%, #f7a413 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#f7a413');
    background-color:#ffce79;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topleft:10px;
    border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topright:10px;
    border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-bottomright:10px;
    border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-radius-bottomleft:10px;
    border-bottom-left-radius:10px;
    text-indent:-2.62px;
    border:2px solid #919191;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:22px;     
    font-weight:bold;
    font-style:normal;
    height:62px;
    line-height:62px;   
    width:143px;
    text-decoration:none;
    text-align:center;  
    text-shadow:0px 3px 0px #e8ad54; 
}
.classname:hover {  
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f7a413), color-stop(1, #ffce79) );
    background:-moz-linear-gradient( center top, #f7a413 5%, #ffce79 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7a413', endColorstr='#ffce79');  
    background-color:#f7a413;
}
.classname:active {     
    position:relative;
    top:1px; 
}

请告诉我在哪里粘贴此代码以使其正常工作。 非常感谢你

1 个答案:

答案 0 :(得分:1)

通常,当您更改按钮时,您要么更改给定的类名,要么复制类名并从那里设置样式。

您的“添加到购物车”是围绕包含文本而非实际按钮的范围构建的。

您可以使用以下方式设置范围样式: .btn-cart跨度

关于你的问题,我的帖子底部.. 您可以通过删除当前样式来覆盖主题样式,然后创建自己的样式 - 记住使用类“btn-cart”。这意味着,您可以在提供给“.btn-cart”的CSS中更改“.classname”,但是您可能需要查看.btn-cart的当前样式,尤其是.btn-cart跨度样式。您可以将代码粘贴到其中一个CSS表中(请检查您的page.xml)。样式表放在/ skin / frontend / x / x / css /

如果要更改“添加到购物车”按钮的布局,请转到...... / template / catalog / product / view.phtml。从这里,您可以更改按钮。请记住,有一个地方可以显示添加到购物车按钮的位置。