Styling Borderlayout via Sclass

asked 2016-10-27 13:18:44 +0800

suzuha gravatar image suzuha
15 4

updated 2016-10-27 20:26:40 +0800

I'm trying to change the style of a borderlayout. For the south component I'm displaying a List, if this list is empty I want to have the default design, if it has content i want to use red-to-red gradient instead.

So i tryed it via style which is not possible. If i reload the page the south has the style for around 0.5 sec then its overwritten by the default z-class.

From the documentation /wiki/ZKStyleCustomizationGuide/LookandFeelCustomization/PartialcustomizewithSclassand_Zclass

I got the idea of adding a s-class to particially overwrite the z-class, to be specific the .z-south-header. This workes fine, the problem is all other south headers in other borderlayouts look like the changed style. So I'm asuming the overwriting is for all borderlayout south in the whole project.

Is it possible to change the style of a single south component (south and inner header) and then revert it if my list of entries is empty?

I can't find examples of stylings like that so it would be nice if someone who knows about css styling components and overwriting style classes could explain this to me, maybe even give a small example.

Currently using this in .zul:

 <south id="customSouth" size="30%" title="Hints"  sclass="z-south-header" > </south>

And this in Java:

South s = (South) getFellow("customSouth");
        if(list == null || list.isEmpty()) {
        } else {

With this css class:

.z-south-header {
    font-size: 14px;
    font-weight: bold;
    background: #e60000; 
    background: -webkit-linear-gradient(#e60000, #ff4d4d);
    background: -o-linear-gradient(#e60000, #ff4d4d);
    background: -moz-linear-gradient(#e60000, #ff4d4d);
    background: linear-gradient(#e60000, #ff4d4d);

FIDDLE1: with script tag and overwrite that works in local project but not in zkfiddle no direkt link due to karma: zkfiddle.org/sample/b4lmea/11-Suzus-Style-Fiddle NOTE: this changes all south headers instead of the one which i only want to change.

FIDDLE2: using style attribute (DOES NOT WORK). This is what I want. The problem is: won't apply to the header of the south component and even if it works on the south itself it will change back to default style after ~0.5 sec. zkfiddle.org/sample/b4lmea/19-Suzus-Style-Fiddle

delete flag offensive retag edit


Try to add !important for each style line

chillworld ( 2016-10-27 14:38:24 +0800 )edit

Hi chillworld, I forgot to mention it but i already tryed it without success. The z-class partial overwrite with sclass attribute works fine. But thats not what I want.The problem is that the other south components in the project look like .z-south-header overwrite but i just want to edit one south.

suzuha ( 2016-10-27 15:28:26 +0800 )edit

Could you create a fiddle, I can play with that tomorrow

chillworld ( 2016-10-27 15:30:25 +0800 )edit

I created 2 fiddles the first is the version that uses a css class which overwrites default behaviour. Second is what i would like to use.

suzuha ( 2016-10-27 20:29:43 +0800 )edit

only the header correct, not the whole south?

chillworld ( 2016-10-28 06:32:11 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted

answered 2016-10-28 06:39:00 +0800

chillworld gravatar image chillworld flag of Belgium
5357 4 9


Here is the solution :


Greetz chill.

link publish delete flag offensive edit

answered 2018-09-24 13:59:03 +0800

BrotherRichard gravatar image BrotherRichard
10 1

You can also do it with <south sclass="myOnlySouth"> in the .zul and a CSS file that includes:

.myOnlySouth .z-border-header { font-size: 14px; font-weight: bold; background: #e60000; background: -webkit-linear-gradient(#e60000, #ff4d4d); background: -o-linear-gradient(#e60000, #ff4d4d); background: -moz-linear-gradient(#e60000, #ff4d4d); background: linear-gradient(#e60000, #ff4d4d); }

link publish delete flag offensive edit
Your answer
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

1 follower



Asked: 2016-10-27 13:18:44 +0800

Seen: 24 times

Last updated: Sep 24 '18

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