[Design of JBoss jBPM] - Re: Web Console: Graphical buttons
by kukeltje
AAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
F***CKING GIF images.... sorry. It cost me over two hours to find out that the jboss cvs serves gif images as ascii so they (save, cancel, ok, transition) all are corrupted. Therefor I did not see them in my webapp before. Altough my eclipse client is configured to store them as binary, they still come in as ascii even when I tried to re-get them....
I now have buttons which are fully stylable with css, rounded corners in ff (opera and safari will follow), but not IE, dynamic width, you can hover over them, 'press' them, they have an image on them (configurable via css), a disabled style and NO javascript at all, no hasseling with fonts etc...
They still need some tweeking (id and class thing) , the correct images (can someone try to check them in as binary? and the correct colors.. and then wrapped in a tag... The html required is the following:
<a href="#" class="button" id="buttonCancel" title="Clicking this button won?t validate anything"><span class="icon">Ok</span></a>
| <p><a href="#" class="buttonDis" id="buttonSave" title="This button is disabled"><span class="icon"Save"</span></a></p>
css:
| /* button styles */
| a.button,a.buttonDis {
| display: inline;
| height: 28px;
| margin: 6px auto;
| padding: 4px 16px 4px 16px;
| text-align: center;
| font-size: 100%;
| font-weight: bold;
| text-decoration: none;
| font-family: Arial, Helvetica, sans-serif;
| cursor: pointer;
| border-top: 2px solid #FFAAAA;
| border-left: 2px solid #FFAAAA;
| border-right: 2px solid #CCAAAA;
| border-bottom: 2px solid #CCAAAA;
| -moz-border-radius: 7px 7px 7px 7px;;
| background-color: #D0D0D0;
| }
|
| a.button:link,a.button:visited {
| color: #002577;
| }
|
| a.button:hover {
| background-color: #E0E0E0;
| color: #FF7200;
| }
|
|
| a.button:active {
| background-color: #C0C0C0;
| color: #F76D00;
| border-top: 2px solid #997777;
| border-left: 2px solid #997777;
| border-right: 2px solid #CCAAAA;
| border-bottom: 2px solid #CCAAAA;
| }
|
|
| a.buttonDis:link,a.buttonDis:visited,a.buttonDis:hover,a.buttonDis:active
| {
| background-color: #8F8F8F;
| color: #5F5F5F;
| cursor: default;
| }
|
| .icon {
| position: relative;
| top: 0px;
| left: 0px;
| background-repeat: no-repeat;
| padding: 0px 0px 5px 18px;
| }
|
| a.button:hover .icon {
| }
|
| a.button:active .icon {
| top: 1px;
| left: 1px;
| }
|
| a.buttonDis:link .icon,a.buttonDis:visited .icon,a.buttonDis:hover .icon,a.buttonDis:active .icon
| {
|
| }
|
| /* list of button icons */
| #buttonOK .icon {
| background-image: url("../images/ok.gif");
| }
|
| #buttonCancel .icon {
| background-image: url("../images/cancel.gif");
| }
|
| #buttonSave .icon {
| background-image: url("images/save.gif");
| }
|
There seems to be some redundant/empty style info in here, but that can be used to do some other things if wanted by someone
View the original post : http://www.jboss.com/index.html?module=bb&op=viewtopic&p=3996557#3996557
Reply to the post : http://www.jboss.com/index.html?module=bb&op=posting&mode=reply&p=3996557
17 years, 12 months