How to group custom styles

answered 2011-10-13 19:37:33 +0800

abhi2008
61 ● 1 ● 1 ● 4

Hi terry,

Could you please help on this?

Thanks

Abhi

answered 2011-10-13 22:34:47 +0800

abhi2008
61 ● 1 ● 1 ● 4

updated 2011-10-13 22:55:36 +0800

Hi dennis,

Thanks a lot for the suggestion.

I have modified my code as per your guideline. I got my expected result in google chrome browser and Firefox.

However,

1. In IE 7,hyperlink class gets applied to Logout button, which is correct. But hyperlink1, hyperlink2,hyperlink3 class gets applied to both Logout and Help button, which is wrong. My expected result is it must be applied to only Logout button.

Here is my modified code:

<?page id="login" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<style dynamic="true">

.hyperlink .z-toolbarbutton-cnt{
padding:2px 2px;
position:relative;
zoom:1;
font-family:${fontFamilyT};
font-size:${fontSizeS};
font-weight:bold;
color:blue;
}

.hyperlink1.z-toolbarbutton-over{
border-top:1px solid white;
border-bottom:1px solid white;
padding:0;
color:blue;
}

.hyperlink2.z-toolbarbutton-over .z-toolbarbutton-body{
border-left:1px solid white;
border-right:1px solid white;
padding:0;
}

.hyperlink3.z-toolbarbutton-over .z-toolbarbutton-cnt{
background-image:none;
text-decoration:underline;
}

</style>
<window style="padding-top:15px">
<toolbarbutton sclass="hyperlink hyperlink1,hyperlink2 hyperlink3" label="Logout" />
<toolbarbutton label="Help" />

</window>
</zk>

Note: I am novice to ZK

Could you guide me further to achive my expected result?

Thanks

Abhi