0

how to change z-button... images in corners and backgroun-color in center.

asked 2010-08-03 11:34:33 +0800

farmacia gravatar image farmacia
105

i'm trying to change the button style following style guide with z-button (z-button-cl, z-button-tl, z-button-bl, etc) I can't change it just appear the operative system buttom... someone has idea about what i'm doing wrong. I'm trying to put images instead background color.. I wanna do a button with round corners so i'm placing images in corners tl, bl, tr, br... if someone else has happened it please tell me. Thanks!!

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2010-08-08 20:14:25 +0800

samchuang gravatar image samchuang
4084 ● 4

Hi

Do you mean your CSS won't work ? Do you use trendy mode in button ? Can you post your CSS code ?

link publish delete flag offensive edit

answered 2010-08-09 00:56:56 +0800

christabhi gravatar image christabhi
99 ● 1

Hi farmacia,

You did not mention,
how you define image path in css, might be the problem is there in you path.

link publish delete flag offensive edit

answered 2010-08-09 08:56:40 +0800

farmacia gravatar image farmacia
105

Hi, thanks for the answers.

well, my CSS file is the same for every style I use inside my App. It works fine for Borderlayouts and Groupboxes.

Thats the Button in my Sourcecode..... nothing else at this time.

Button oLoginBttn = new Button("Login");
oLoginBttn.setParent(oBttnBox);

//One of the First Lines in my Code!!!!
Style oStyle = new Style("/CSS/test.css");
oStyle.setParent(this);

and here is the CSS-File, you may see some redundancies but I tried everything so far (or maybe not, if someone has another idea)


/***NORTH***/

.z-north-body
{
background-color: #82C4E1;
text-align: center;
}

.z-north-splt
{
position: absolute;
height: 6px;
width: 7px;
z-index: 15;
background: #9DDCF5;
cursor: pointer;
line-height: 1px;
}

.NorthWest
{
background-color: #82C4E1;
}

.NorthCenter
{
background-color: #82C4E1;
}

.NorthEast
{
background-color: #82C4E1;
}

.z-textbox
{
background: #FFF;
border: 2px solid #9DDCF5;
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
text-align: left;
}

.z-textbox-focus
{
background: #FFF;
border: 2px solid #0072BC;
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
text-align: left;
}

/***WEST***/

.z-west
{
border: none;
position: absolute;
overflow: hidden;
background-color: #82C4E1;
}

.z-west-body
{
background-color: #82C4E1;
}

.z-west-header
{
font-family: arial, helvetica, sans-serif;
font-size: 11pt;
text-align: center;
color: #0072BC;
background-color:#9DDCF5;
background-position: 0 25px;
}

.z-west-colps
{
width: 16px;
height: 16px;
float: right;
margin-right: 2px;
cursor: pointer;
background:url('../img/borderlayout-left.png');
}

.z-west-colps-over
{
width: 16px;
height: 16px;
float: right;
margin-right: 2px;
cursor: pointer;
background:url('../img/borderlayout-leftover.png');
}

.z-west-colpsd
{
z-index: 12;
position: absolute;
cursor: not-allowed;
border: none 0;
background-color: #9DDCF5;
overflow: hidden;
}

.z-west-exp
{
width: 16px;
height: 16px;
float: top;
cursor: pointer;
background: url('../img/borderlayout-right.png');*/
background-color: #00AEEF;
}

.z-west-exp-over
{
width: 16px;
height: 16px;
float: top;
cursor: pointer;
background:url('../img/borderlayout-rightover.png');
background-color: #0072BC;
}

.z-west-splt
{
position: absolute;
overflow: hidden;
height: 6px;
width: 7px;
z-index: 11;
background: #9DDCF5;
cursor: pointer;
line-height: 1px;
}

.z-west-splt-btn
{
background-image: none;
}


/*caption*/
.z-caption
{
font-size: 10pt;
color: #FFF;
font-weight: normal;
text-align: center;
background-color: #9DDCF5;
border: 0;
cursor: pointer;
}

.z-caption input, .z-caption td
{
font-size: 10pt;
color: #0072BC;
font-weight: bold;
text-align: center;
background-color: #9DDCF5;
border: 0;
}

.z-caption-l
{
font-size: 10pt;
color:#FFF;
font-weight:bold;
text-align: center;
background-color: #9DDCF5;
border: 0;
}

.z-caption-r
{
font-size: 10pt;
color:#FFF;
font-weight:normal;
text-align: center;
background-color: #9DDCF5;
border: 0;
}

.z-caption button, .z-caption .z-button .z-button-btn
{
font-size: 10pt;
color:#FFF;
font-weight:bold;
text-align: center;
background-color: #9DDCF5;
}


/*groupbox*/
.z-groupbox
{
font-family: arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
text-align: center;
background: #73C1E1;
}

.z-groupbox-hl .z-groupbox-header
{
background: #9DDCF5;
padding: 0 0 4px 0;
border: 0 none;
}

.z-groupbox-tl
{
background: #9DDCF5 no-repeat scroll 0 top;
}

.z-groupbox-tr
{
background: #9DDCF5 no-repeat scroll right -5px;
}

.z-groupbox-hl
{
background: #9DDCF5 repeat-y scroll 0 0;
border-bottom: 1px solid #5BCBF5;
padding-left: 6px; zoom: 1px;
}

.z-groupbox-hr
{
background: #9DDCF5 repeat-y scroll right 0;
padding-right: 6px; zoom: 1px;
}

.z-groupbox-hm
{
background: #9DDCF5 repeat-x scroll 0 0;
overflow: hidden; zoom:1;
}

.z-groupbox-cnt
{
border: 0px;
padding: 5px;
}

.z-groupbox-bm
{
background: #9DDCF5 repeat-x scroll 0 0;
height: 6px;
line-height: 0; zoom: 1;
}

.z-groupbox-bl
{
background: #9DDCF5 no-repeat 0 bottom;
padding-left: 6px; zoom: 1px;
}

.z-groupbox-br
{
background: #9DDCF5 no-repeat right bottom;
padding-right: 6px; zoom: 1px;
}

/**EAST**/

.z-east-body
{
background-color: #82C4E1;
}

.z-east-header
{
font-family: arial, helvetica, sans-serif;
font-size: 11pt;
text-align: center;
color: #0072BC;
background-color:#9DDCF5;
background-position: 0 25px;
}

.z-east-colps
{
width: 16px;
height: 16px;
float: left;
cursor: pointer;
background: url('../img/borderlayout-right.png');
}

.z-east-colps-over
{
width: 16px;
height: 16px;
float: left;
cursor: pointer;
background:url('../img/borderlayout-rightover.png');
}

.z-east-colpsd
{
cursor: not-allowed;
border: 0;
background-color: #9DDCF5;
}

.z-east-exp
{
width: 16px;
height: 16px;
float: top;
cursor: pointer;
background: url('../img/borderlayout-left.png');
}

.z-east-exp-over
{
width: 16px;
height: 16px;
float: top;
cursor: pointer;
background:url('../img/borderlayout-leftover.png');
}

.z-east-splt
{
position: absolute;
height: 6px;
width: 7px;
z-index: 9;
background: #9DDCF5;
cursor: pointer;
line-height: 1px;
}

.z-east-splt-btn
{
background-image: none;
}


/***BUTTON***/

.z-button
{
font-size: 10pt;
text-align:center;
font-weight: 600;
font-family: Arial,verdana,sans-serif;
color: #FFF;
background-color: #A7A9AC;
cursor: pointer;
/*width: 50px;
height:30px;*/
}

.z-button-cl
{
background: url('../img/normal-center01.png');
/*background-repeat: no-repeat;
background-position: 0 0;
width: 10px; padding: 0; margin: 0;*/
}

.z-button-cr
{
background:url('../img/normal-center02.png');
background-color: #0072BC;
/*background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-cm
{
background-color: #5BCBF5;
margin: 0; overflow: hidden;
vertical-align: middle;
text-align: center;
/*background: #5BCBF5;
/*padding: 0 5px;
background-position: 0 0;
/*white-space: nowrap;*
}

.z-button-tl
{
background:url('../img/normal-ltop.png'); /*repeat-x 0 0; Agregado para que la imagen salga alineada en el centro con los textbox*/
/*background-color: #00AEEF;
background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-bl
{
background:url('../img/normal-lbottom.png'); /*repeat-x 0 0; Agregado para que la imagen salga alineada en el centro con los textbox*/
/*background-color: #00AEEF;
background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-tr
{
background:url('../img/normal-rtop.png'); /*repeat-x 0 0; Agregado para que la imagen salga alineada en el centro con los textbox*/
/*background-color: #00AEEF;
background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-br
{
background:url('../img/normal-rbottom.png'); /*repeat-x 0 0; Agregado para que la imagen salga alineada en el centro con los textbox*/
/*background-color: #00AEEF;
background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-tm
{
background:url('../img/normal-center01.png');
/*background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}

.z-button-bm
{
background:url('../img/normal-center01.png');
/*background-repeat: no-repeat;
background-position: -3px 0px;
width: 13px; padding: 0; margin: 0;*/
}


Maybe I overlooked something......thx in advance

link publish delete flag offensive edit

answered 2010-08-09 14:23:40 +0800

mikelara gravatar image mikelara
144
www.mextisa.com.mx

Hi farmacia.

Check example at the Button styleguide. Also check your paths so you can be sure you are loading the .css file and the images.

I load my .css file like this... 

<html>
   <![CDATA[ <link rel="stylesheet" href="extcss/mystyles.css" type="text/css" /> ]]>
 </html>


and my image buttons like this... 
<button id="btncancelar"
 label="Cancelar"
 image="http://${pageContext.request.serverName}:${pageContext.request.localPort}${pageContext.request.contextPath}/images/cancel.png"/>


I hope this helps.

Mike.

link publish delete flag offensive edit

answered 2010-08-10 09:04:17 +0800

farmacia gravatar image farmacia
105

Thanks for the answer....

Well, I tried the example from the StyleGuide but my problem still is the same.
I try to replace the corner images for my own Button and this doesn't seems to work. Colors aren't a problem but the images are.

Like you can see in my post above, it works fine for the Borderlayout.

// Works perfect
.z-east-exp-over
{
width: 16px;
height: 16px;
float: top;
cursor: pointer;
background:url('../img/borderlayout-leftover.png');
}

//Doesn't work -> I tried background-image as well !!
.z-button-cl //.z-button .z-button-cl -> also doesn't work
{
background: url('../img/normal-center01.png');
/*
background-repeat: no-repeat;
background-position: 0 0;
width: 10px; padding: 0; margin: 0;
*/
}

I'm a little bit frustrated but I hope some has a solution.

link publish delete flag offensive edit

answered 2010-08-10 11:04:50 +0800

mikelara gravatar image mikelara
144
www.mextisa.com.mx

Hi.

You should take a look at the Button Styleguide CSS Spec, you can change the corners images using .z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br classes.

I suggest you to
- create a separate .css file
- there modify the values as indicated in Button Styleguide CSS Spec.
- and load it into your .zul file as 

<html>
   <![CDATA[ <link rel="stylesheet" href="extcss/mystyles.css" type="text/css" /> ]]>
 </html>

greetings

link publish delete flag offensive edit

answered 2010-08-10 12:11:59 +0800

farmacia gravatar image farmacia
105

Well thanks....After endless hours in FireBug and this Thread http://www.zkoss.org/forum/listComment/13027 were solving my problems nearly complete

I set the Button-Mold to "TRENDY" and it is working now..... Did somebody know that you have to change the mold to "trendy" ????

Looks like ZK 5.0.3 handles things a little bit different and 5.0.4 will have the changes !?!?!

Thank you all. When I'm finished I will provide a little example.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-08-03 11:34:33 +0800

Seen: 626 times

Last updated: Aug 10 '10

Related questions

How could I change the style of listbox heade

how to increse the font size of a TAB label

about CSS

re: font changes when I load the 3.5.0

New ZK 3.5 focus styles

ZK3.5 CSS problem

ZK3.5.0 Button By IE6

Component style change (button and listbox): how to change them?

About setMoldSClass

How to change combobox back-ground color

About Us | Faq | Help | Privacy Policy | Contact Us
Copyright Potix Corporation 2015.
Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More