Freitag, 6. Januar 2012

Taming the button. Layout, a 2nd theme...

Fine, it works with one theme now. To really proof the flexibility I will add a secon theme to my application and use it with the disabled button here as well.

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.

Ok, a quick look into firebug shows that I (accidently) have as well subscribed the button of theme 21 to the button of theme 23 in my ThemesAdmin application. After fixing this, or if you have a clean installation of theme 21, it will look like this.

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!

So for now I copy the original Image from theme 21, rename it to Scarlet_21_sButtons.png and upload it as shared Workspace (not associated to any application) component. I can reference it in my CSS file now.

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

button.button-default.apex_disabled,button.button-default.apex_disabled:hover
{
cursor:default;
opacity:0.4;
background-position:right -50px;
padding: 0 11px 0 0;
}

button.button-default.apex_disabled:active,button.button-default.apex_disabled:focus
{
outline:0 none #000;
}

button.button-default.apex_disabled span,button.button-default.apex_disabled:hover span
{
background-position:0 0;
}

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:

Sources:

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....

Keine Kommentare:

Kommentar veröffentlichen