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

Emanuele
117 1

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?

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:

<style>
font-size: 8pt;
}
font-size: 8pt;
}
</style>

<listbox width="30%">
<listitem>
<listcell label="Mickey"/>
<listcell label="Mouse"/>
</listitem>
</listbox>

I added prefix "z-" because I found this suggestion in forum:
http://www.zkoss.org/forum/index.zul#path%3DlistComment%3BdiscussionId%3D5647%3BcategoryId%3D14%3B

But again nothing changes.

Any suggestions?

Emanuele

delete retag edit

## 3 Replies

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

<style>
.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 {
color:white;
background-image:none;
background-color:red;
}
</style>

<style>
font-size: 8pt;
}
</style>

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?

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">
<div>
<span> something you want to change</span>
</div>
</div>


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

[hide preview]