Question

我正在尝试更改提交按钮上默认绿色的颜色。当鼠标悬停在按钮上时，我正在尝试更改绿色边缘，而当单击蓝色时，我会尝试更改绿色背景。

感谢。

Answer 1

多伦多按钮已经内置了这些主题：黑色，蓝色，绿色，红色和黄色。例如，如果您在按钮上指定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

Answer 2

为了扩展/更新主题，您需要按照以下步骤操作：

在应用程序目录中创建“themes”目录
在“themes”目录中创建“button”目录
转到“aviarc-data / widgets”目录，找到最新版本的小部件包，类似于“com.aviarc.toronto.widget.core-NNN-vYYYYMMDD.jar”
您需要从该存档中提取相关小部件的主题部分。在您的场景中，您需要将“\ metadata \ widgets \ button \ theme”目录的内容解压缩到“themes \ button”目录中。
现在您可以对CSS和实际图像进行任何调整，即更改颜色，完全替换它们等。

更改提交按钮的颜色

2 个答案: