So first I switch the theme of my DisableButtonExample application to Scarlet - 21 (You will have to install it if it is not already there). Then I run my application and got the following (unexpected) result.
The button looks like usual and is not disabled on startup, because the template Button Disabled is missing.
So lets start the work. Of course I will do all the themes related stuff within my ThemesAdmin application. First I create a Cascading Style Sheet file with the obvious name Scarlet_21.css.
An investigation of the button with firebug shows that the style is based on the image sButtons.png. First I try to copy the code from the original css style.
background: url("../images/sButtons.png") no-repeat scroll right -50px
but that does not work. Looks like I'm in the wrong path.
Help: "Send me a mail, comment or whatever, if you know a way to reference the original button image in a custom css file!
I got hit by reality. First I made some really good progress, but than I encountered some graphical issues (my button looks ugly, some parts missing hovering does not really work). It took me several hours to find the root cause for my problems. First I had a really hard time. Then I learned how to toggle the hover and active state of my button and to toggle style elements with firebug. Finally encountered that I don't have to set the background image in my stylesheet. So forget about copying and uploading that image. But me request for help is still valid :)
I could have removed the text from this post, but the point is that this blog is more or less a log of my progress and it often takes more time for me (as a newbie to many of this technologies) to find my way than it takes to read this posts (to justify the blog title).
So the final stylesheet looks like this
padding: 0 11px 0 0;
outline:0 none #000;
button.button-default.apex_disabled span,button.button-default.apex_disabled:hover span
The only thing left is to reference the stylesheet in the page templates I use and to create the Button Disabled template simular to the last post. Did I mention that I use a separate application named ThemesAdmin to develop my themes and subscribe the templates in my actual application to the changed templates in the ThemesAdmin application? I only tweak the, and subscribe to the tweaked templates I plan to use to avoid unnecessary effort.
The final result looks like this:
Ps.: I got some feedback from a workmate. He mentioned that it would be better to hide the functionality that is covered by the condition on the dynamic action for now. He don't like that the developer still has to change some code manually to make it work. I already have some ideas, but let see how it works.
To be continued....