Revision history [back]

I just tried the most trivial case I tried just works. Just give each <columnchildren> element an sclass. Then each of these sclasses gets a background color.

<zk>
  <style>
    .col1 { background-color: red; }
    .col2 { background-color: green; }
    .col3 { background-color: blue; }
  </style>
  <columnlayout>
    <columnchildren sclass="col1">content 1</columnchildren>
    <columnchildren sclass="col2">content 2</columnchildren>
    <columnchildren sclass="col3">content 3</columnchildren>
  </columnlayout>
</zk>

Here a zkfiddle: http://zkfiddle.org/sample/1tr22n7/1-columnlayout-background-color

In your many attempts I am sure you at least tried that so I guess you have additional styles that override those background colors, or nested elements inside the columns that define their own background color.

I suggest using the developer tools of your favorite browser to inspect the elements and styles in order to see where how they get applied and eventually overridden.

I just tried the most trivial case I tried just works. Just give each <columnchildren> element an sclass. Then each of these sclasses gets a background color.

<zk>
  <style>
    .col1 { background-color: red; }
    .col2 { background-color: green; }
    .col3 { background-color: blue; }
  </style>
  <columnlayout>
    <columnchildren sclass="col1">content 1</columnchildren>
    <columnchildren sclass="col2">content 2</columnchildren>
    <columnchildren sclass="col3">content 3</columnchildren>
  </columnlayout>
</zk>

Here a zkfiddle: http://zkfiddle.org/sample/1tr22n7/1-columnlayout-background-color

In your many many attempts I am sure you at least tried that so I guess you have additional styles that override those background colors, or nested elements inside the columns that define their own background color.

I suggest using the developer tools of your favorite browser to inspect the elements and styles in order to see where how where/how they get applied and eventually overridden.

I just tried the most trivial case I tried just works. Just give each <columnchildren> element an sclass. Then each of these sclasses gets a background color.

<zk>
  <style>
    .col1 { background-color: red; }
    .col2 { background-color: green; }
    .col3 { background-color: blue; }
  </style>
  <columnlayout>
    <columnchildren sclass="col1">content 1</columnchildren>
    <columnchildren sclass="col2">content 2</columnchildren>
    <columnchildren sclass="col3">content 3</columnchildren>
  </columnlayout>
</zk>

Here a zkfiddle: http://zkfiddle.org/sample/1tr22n7/1-columnlayout-background-color

In your many attempts I am sure you at least tried that so that. So I guess you have additional styles that override those background colors, or nested elements inside the columns that define their own background color.

I suggest using the developer tools of your favorite browser to inspect the elements and styles in order to see where/how they get applied and eventually overridden.