Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi @all
Does someone know how I can manipulate the Buttons in the Borderlayout N,E,S,W with CSS
(I mean the buttons in the Splitbar). There are not documented in the Styleguide for the Borderlayout.
I use ZK 5.0.3 at the moment......
Thanks
Hi farmacia,
This is definitely a part missing in the style guide.
The original CSS for splitter button images in Borderlayout is given by src/archive/web/js/zul/layout/css/borderlayout.css.dsp from zul.jar:
.z-west-splt-btn {
background-image: url(${c:encodeURL('~./zul/img/splt/colps-l.png')});
}
.z-east-splt-btn {
background-image: url(${c:encodeURL('~./zul/img/splt/colps-r.png')});
}
.z-north-splt-btn {
background-image: url(${c:encodeURL('~./zul/img/splt/colps-t.png')});
}
.z-south-splt-btn {
background-image: url(${c:encodeURL('~./zul/img/splt/colps-b.png')});
}
There is a way to figure this out without documentation. If you work with Firefox, you can use the inspect element function of Firebug to see the DOM structure and the CSS classes of elements. Or if you work with Chrome, it also comes with an Inspector.
For the Button problem, do you use the button in Trendy mold or in OS mold? The latter mold uses browser's native button, which cannot be customized.
Regards,
Simon
Thanks to Simon I changed my Splitbar-Buttons and it is working like a charm.
.z-west-splt-btn
{
background-image: url('borderlayout-left-button.png');
}
Thats it.....Thanks a lot again.....and now, if someone knows something about the Button it would be the perfect day ;-)
THANKS
Asked: 2010-07-12 14:00:02 +0800
Seen: 688 times
Last updated: Jul 14 '10