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

asked 2008-09-25 08:24:46 +0800

Emanuele gravatar image Emanuele
117 1

updated 2008-09-25 08:26:31 +0800

Hi everyone,

I'm migrating to ZK 3.5. Good work had been done with this new version! But I'm facing some problems with component style.

Changing button background-color

I'm trying to change the background-color of a button. I looked to the style guide but I have not found where this style is defined (and style guide for ZK 3.5 is not available). However, also in ZK 3.0.5 it's not specified where the background-color is defined.
See for ex. the following: http://www.zkoss.org/doc/styleguide/ch01s06.html
Here the style for font are defined, but nothing else...

The following is my example code:

<button label="My button" style="color:white; background-color:red"/>

With this code, the style attribute "color" works correctly (even not specified in style guide), but specifying "background-color" attribute, nothing changes.

Any solutions?

Changing listbox header font size

Another problem with listbox. I want to change the listbox header font-size, for ex. to 8pt. I have seen the style guide (see http://www.zkoss.org/doc/styleguide/ch01s21.html), and I tried with the following code:

div.z-listbox-head th{
font-size: 8pt;
font-size: 8pt;

<listbox width="30%">
<listheader label="Name"/>
<listheader label="Surname"/>
<listcell label="Mickey"/>
<listcell label="Mouse"/>

I added prefix "z-" because I found this suggestion in forum:

But again nothing changes.

Any suggestions?

Thanks in advance!

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2008-09-25 09:09:47 +0800

flyworld gravatar image flyworld
155 3

zk 3.5 change almost all css class ,and the document is out of date .. .||
you can change your button like this

.z-button .z-button-tr,.z-button  .z-button-tm,.z-button  .z-button-tl, 
.z-button .z-button-cr,.z-button  .z-button-cm,.z-button  .z-button-cl, 
.z-button .z-button-br,.z-button  .z-button-bm,.z-button  .z-button-bl {

and the listbox header
   font-size: 8pt;

link publish delete flag offensive edit

answered 2008-09-25 09:50:47 +0800

Emanuele gravatar image Emanuele
117 1

It works! Thank you! Very helpful!

But... if I don't want to specify the new style inside the style tag, is there a way to set it directly to the component, using setStyle?

link publish delete flag offensive edit

answered 2008-09-25 10:41:18 +0800

flyworld gravatar image flyworld
155 3

unforunatly, some components have complex html structures...
if you use setStyle , it will give the style to the outer html tag.
for example

<div style="style you set">
    <span> something you want to change</span>

maybe you can use setSclass to set a CSS class to a component

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




Asked: 2008-09-25 08:24:46 +0800

Seen: 732 times

Last updated: Sep 25 '08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More