更改提交按钮的颜色

Question

我试图更改提交按钮上默认绿色的颜色。我试图改变绿色的边缘，当鼠标悬停在按钮和绿色背景上时，点击蓝色代替。

谢谢。

Answer 1

为了延长/更新的主题，你需要遵循以下步骤：

1. 创建应用程序的目录下的“主​​题”目录

2. 创建内的“按钮”目录“主题”目录

3. 转到“aviarc-data/widgets”目录，找到最新版本的小部件包，这些包的内容与“com.aviarc.toronto.widget.core-NNN-vYYYYMMDD .jar“

4. 从该存档中，您需要提取相关小部件的主题部分。在你的场景中，你需要将“\ metadata \ widgets \ button \ theme”目录的内容解压到你的“themes \ button”目录中。

5. 现在你可以做的CSS和实际图像的任何调整，即改变颜色，完全代替了他们等

Answer 2

多伦多按钮已经建在这些主题：黑，蓝，绿，红色和黄色。例如，如果您在按钮上指定class="blue"，它将变为蓝色。这些主题只是指定了button.png和button_hrep.png文件的替代版本。

假设您复制默认多伦多主题，你有按钮图像文件的替代版本的文件夹themes/button/blue-highlight/，你可以添加以下到你的主题button.css：

/* "blue_highlight" - changes the borders and background images of the button to use different images */ 
.$URN$_button-blue_highlight .button-top-left, 
.$URN$_button-blue_highlight a:hover span.button-top-left, 
.$URN$_button-blue_highlight a:focus span.button-top-left, 
.$URN$_button-blue_highlight a:active span.button-top-left, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-left, 
.$URN$_button-blue_highlight .button-top-right, 
.$URN$_button-blue_highlight a:hover span.button-top-right, 
.$URN$_button-blue_highlight a:focus span.button-top-right, 
.$URN$_button-blue_highlight a:active span.button-top-right, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-right, 
.$URN$_button-blue_highlight .button-bottom-left, 
.$URN$_button-blue_highlight a:hover span.button-bottom-left, 
.$URN$_button-blue_highlight a:focus span.button-bottom-left, 
.$URN$_button-blue_highlight a:active span.button-bottom-left, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-left, 
.$URN$_button-blue_highlight .button-bottom-right, 
.$URN$_button-blue_highlight a:hover span.button-bottom-right, 
.$URN$_button-blue_highlight a:focus span.button-bottom-right, 
.$URN$_button-blue_highlight a:active span.button-bottom-right, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-right { 
    background-image: url(blue-highlight/button.png); 
} 
.$URN$_button-blue_highlight a:hover span.button-top-middle, 
.$URN$_button-blue_highlight a:focus span.button-top-middle, 
.$URN$_button-blue_highlight a:active span.button-top-middle, 
.$URN$_button-blue_highlight .button-top-middle, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-middle, 
.$URN$_button-blue_highlight .button-bottom-middle, 
.$URN$_button-blue_highlight a:hover span.button-bottom-middle, 
.$URN$_button-blue_highlight a:focus span.button-bottom-middle, 
.$URN$_button-blue_highlight a:active span.button-bottom-middle, 
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-middle { 
    background-image: url(blue-highlight/button_hrep.png); 
} 

Here's an example theme which adds a blue_highlight class 。