2

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

谢谢。

4

2 回答 2

1

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

假设您已经复制了默认的 Toronto 主题，并且您拥有包含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);
}

这是一个添加blue_highlight类的示例主题。

于 2012-10-11T03:52:40.803 回答
0

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

  1. 在应用程序目录中创建“主题”目录

  2. 在该“主题”目录中创建“按钮”目录

  3. 转到“aviarc-data/widgets”目录并找到小部件包的最新版本，类似于“com.aviarc.toronto.widget.core-NNN-vYYYYMMDD.jar”

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

  5. 现在您可以对 CSS 和实际图像进行任何调整，即更改颜色、完全替换它们等。

于 2012-10-09T03:41:31.723 回答