Donnerstag, 5. Januar 2012

Taming the button. Layout, the better way.

Ok it works, so I will focus on a little bit more professional way to solve the layout problem now. The actual solution only works for one page and if I change the theme there will be some drawbacks.
Either there will not be a definition for .apex_disabled class because the button has a different class then uButton or even worse, the style will not fit to the new theme at all.
I will stick with the conditional dynamic actions because it seems to be straight forward to me.

I was googling to find some integration on CSS in relation to APEX the other day when I popped into this webpage. So I decided to use this approach to have a better grep on my styles, templates and themes.
I first I create a new empty Application with the Crimson - 23 Theme and the name ThemesAdmin.

Now I create a textfile with the name Crimson_23.css and copy the style from the header section it.

a.uButton.apex_disabled span, a.uButton.apex_disabled span:hover, a.uButton.apex_disabled span:active{
  cursor: default;
  color: #464545;
  font-weight: 200;
  background-color:#F5F5F0;
  background-image:-moz-linear-gradient(top, #F5F5F0,#F5F5F0);
  box-shadow:0 0 0 rgba(0, 0, 0, 0.25) inset;   
}
I upload the css file as shared component into my ThemesAdmin application. Now I change the Page themes of the Crimson - 23 theme and add the line

<link rel="stylesheet" href="#WORKSPACE_IMAGES#Crimson_23.css" type="text/css"/>


to all of them (Ok for now I only change the No Tabs - No Sidebar template because I'm a little lazy and this is my default page template). Now I don't have to add the entry to the header section of each page anymore.
I also create a copy of the button template with the name Button Disabled that already contains the CSS class apex_disabled. Now I should be able to create already disabled buttons from scratch.

Next I subscribe the page template and the button template in the DisableButtonExample application to the corresponding templates of the ThemesAdmin application (Edit Template => Subscription => Reference Master Template Form). This allows me to maintain themes in a single place and publish the changes at once to all applications.

Last but not least I remove the style code from Pages HTML Header section and change the template of the P1_TOGGLED button to the Button Disabled template.

Starting the application will show the following (expected) result:


ThemesAdmin_1.sql, DisableButtonExample.sql, Crimson_23.css

I have no idea on how to export the shared stylesheets as well, so you will have to import the file Crimson_23.css manually for now.

To be continued...

Keine Kommentare:

Kommentar veröffentlichen