Donnerstag, 5. Januar 2012

Taming the button. Layout, the dirty hack

Last time I started my disable template based buttons journey. I finished with a conditional button toggled based on the presence of a CSS Class. Even if the button is disabled it still does not look like that. So today I will start to change the style of the button.

I will do this quick and dirty by now, just to proof that the basic concept works.

First I have to find out what makes the layout change when the button is hovered, activated or focused. I use firebug to investigate element and find out that the definition can be found in the file 4_1.css located in the themes css directory.
I don't want to change original the css file, so I have to create a style that oversteers the changed values with the original ones. So for now I place the style in the HTML Header sction of my page. My style looks like this:

<style type="text/css">

  a.uButton.apex_disabled span, a.uButton.apex_disabled span:hover, a.uButton.apex_disabled span:active{
    cursor: default;
    color: #464545;
    font-weight: 400;
    background-color:#F5F5F0;
    background-image:-moz-linear-gradient(top, #F5F5F0,#F5F5F0);
    box-shadow:0 0 0 rgba(0, 0, 0, 0.25) inset;    
  }
  
</style>

My Application looks like this if the button P1_TOGGLED is disabled.


Being not a pixel pusher that should be fair enough.

Source

To be continued...

Keine Kommentare:

Kommentar veröffentlichen