sclass position in HTML class attribute

answered 2011-04-05 01:28:57 +0800

RyanWu
533 ● 2
about.me/flyworld

if you want to override the z-grid css, you can set zclass to it

<grid zclass="z-grid2" />

*remember, all z-grid will become z-grid2

another way is you can override the same CSS classes and attach your css file at the end of your page.

answered 2011-04-05 02:35:17 +0800

gekkio
899 ● 1
http://gekkio.fi/blog

CSS class attribute order does not matter, so having class="user1 z-grid" vs class="z-grid user1" makes no difference.
Your problem is that your CSS selectors are not specific enough to override the ZK default theme selectors. Here's an article about CSS selector specificity.

I'll show an example of this. Let's say you want to have a huge padding in the columns of a grid (this is ridiculous but it's just an example :)
So, you build a grid:

<grid sclass="hugepadding">
  <columns>
    <column label="Am I enormous?" />
  </columns>
  <rows>
    <row>
       <label value="Test" />
    </row>
  </rows>
</grid>

And you'll try this CSS:

.hugepadding .z-column {
  padding: 50px;
}

It does not work, because the CSS is not specific enough to override ZK theme default padding. If you look at ZK CSS (ZK 5.0.6), you'll find out that the column css is defined as:

div.z-grid-header th.z-column, div.z-grid-header th.z-auxheader {
  padding: 2px;
  /* Other attributes */
}

The selector div.z-grid-header th.z-column is more specific than our selector .hugepadding .z-column.
There are many ways to make the CSS more specific. Here's an example that works:

.hugepadding div.z-grid-header th.z-column {
  padding: 50px;
}

That will produce column headers with huge padding and requires no zclass changes or !important.

You didn't show your CSS so I can't show you exactly how your CSS could be made more specific, but the basic idea is the same:
1. Look at ZK CSS for the CSS selector you want to override (use Firebug/Chrome dev tools or download ZK source code and look at the sources of zul.jar)
2. Based on the information obtained in step 1, make your CSS selector more specific than the ZK default one
3. Profit!