If I run the following code snippet on zk 7.0.2 without atlantic theme the icons are shown. If I activate the atlantic theme the icons disappear. I would like to use the icons also with atlantic theme. What I am doing wrong?
Tags
People
Badges
Help
<navbar orient="horizontal" collapsed="false">
<navitem label="TEST" />
<nav label="ITEM 1" iconSclass="z-icon-folder" badgeText="3">
<navitem label="Step One" />
<navitem label="Step Two" />
<navitem label="Step Three" />
</nav>
<navitem label="ITEM 2" iconSclass="z-icon-envelope" />
</nav>
</navbar>
Hello chw,
Basically your code has an error, thus please use the following code:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="new page title" border="normal">
<navbar orient="horizontal" collapsed="false">
<navitem label="TEST" />
<nav label="ITEM 1" iconSclass="z-icon-folder" badgeText="3">
<navitem label="Step One" />
<navitem label="Step Two" />
<navitem label="Step Three" />
</nav>
<navitem label="ITEM 2" iconSclass="z-icon-envelope" />
</navbar>
</window>
</zk>
Aside from that the folder icon shows as expected. Could you please reset the code and follow the instructions below?
http://blog.zkoss.org/index.php/2013/10/22/zk-7-introduces-atlantic-theme-a-new-flat-design/
Best Regards,
Darksu
Hi Darksu, thanks for the reply, but with your code I have the same problem. I assume something different is wrong in my project but I have no clue. If I inspect the DOM I find the image tag of the icons but there is no style command .z-icon-envelope:before { content: ""; }.
chw ( 2014-11-09 21:40:15 +0800 )editHave you the newest atlantic theme? It's 1.0.2
I'm not sure. Have you set the mold="bs" ??
excerpt from navbar.js
. . .
zk.override(zkmax.nav.Nav.prototype, _nav, {
_inBSMold: function () {
var nb = this.getNavbar();
return nb && nb._inBSMold();
},
getIconSclass: function () {
if (this._inBSMold())
return this._iconSclass ? this._iconSclass : 'caret';
return _nav.getIconSclass.apply(this, arguments);
},
. . .
best Stephan
No, evaluation starts at every server start. Can you create a packed sample app for the problem?
terrytornado ( 2014-11-17 08:47:31 +0800 )editworks quite well here ;)
Hi, I narrow down my problem step by step. I copied the file /zkthemedemo/zkau/web/721aa1f4/_zkiju-atlantic/zul/css/zk.wcs from atlantic theme http://www.zkoss.org/zkthemedemo/demo/ (demo page) to my project and linked it as a css-stylesheet. With this hack I could see at the position where icons should appear some unicode signs. Not what I expect but one small step forward.
So my assumption is that the file zk.wcs before I have done the hack is not correct or not complete. I don't know. Could anybody help me with this? I think the zk.wcs is generated, am I right? I took a look at the atlantic.jar and found some less files. Do I have to include the zkless-engine-maven-plugin in the build process if I like to use the atlantic jar?
nicely done ! :)
Hi guys, I've expirenced the same issue on my app i.e. atlantic theme is enabled however correct content of all icons is not loaded ... I debuged a bit and my conclusion is that zk.wcs doesn't load default ../web/zul/css/norm.css.dsp. When I added explicitly <link href="app/zkau/web/zul/css/norm.css.dsp"/> icons are displayed correctly.... any idea ?
thanks for that!!
that's amazing, thanks, you helped me a lot!
Asked: 2014-11-05 21:11:56 +0800
Seen: 76 times
Last updated: Jan 26 '15
