css - 如何更改magento上的按钮样式

Question

我需要一些关于在我的 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; 
}

请让我知道我必须将此代码粘贴到哪里才能使其正常工作。非常感谢

Answer 1

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

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

您可以使用以下方法设置跨度的样式:.btn-cart span 跨度

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

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