Changing the colour of the submit buttons

Question

I'm trying to change the color of the default green on the submit buttons. I'm trying to change the green edges when the mouse is hovering over the button and the green background when clicked on to blue instead.

Thanks.

Can you post the link to the page with the current submit buttons? — Cynthia, Oct 05 '12 at 10:32
Do you use default theme for your application or do you have a custom one? — Vlad, Oct 07 '12 at 22:11
At the moment we are using the default theme for the buttons Vlad. — Daniel, Oct 08 '12 at 01:15

Adam Sharp · Answer 1 · 2012-10-11T04:03:22.203

Toronto buttons already have these themes built in: black, blue, green, red and yellow. For example, if you specify class="blue" on your button it will turn blue. These themes just specify alternate versions of the button.png and button_hrep.png files.

Assuming you've copied the default Toronto theme, and you have the folder themes/button/blue-highlight/ with your alternate versions of the button image files, you could add the following to your theme's 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.

score 0 · Answer 2 · answered Oct 09 '12 at 03:41

In order to extend/update the theme you'll need to follow the steps below:

Create "themes" directory in your application's directory
Create "button" directory within that "themes" directory
Go to the "aviarc-data/widgets" directory and find the most recent version of the widget's package, something along the lines of "com.aviarc.toronto.widget.core-N.N.N-vYYYYMMDD.jar"
From that archive you need to extract theme part for the relevant widget. In your scenario you need to extract the content of "\metadata\widgets\button\theme" directory right into your "themes\button" directory.
Now you can do any adjustments to the CSS and actual images, i.e. change the colors, completely replace them etc.

Changing the colour of the submit buttons

2 Answers2