add new less file to the theme

asked 2021-01-12 18:16:11 +0800

gvguad gravatar image gvguad
7 2

Hi. I have cloned atlantic theme and trying to customizing it. I want to add a new icon pack as font so copied these fonts in a new folder(archive/web/zul/fonts) and created archive/web/zul/less/icons.less which contains new icons' definition. Compilation is passes but styles from icons.less is not present in theme. Also, I'm not sure how I define my fonts

  e('src: url(${c:encodeThemeURL("~./zul/fonts/icons.eot?5v9hgv")});');
  e('src: url(${c:encodeThemeURL("~./zul/fonts/icons.eot?5v9hgv#iefix")}) format('embedded-opentype'),
  url(${c:encodeThemeURL("~./zul/fonts/icons.ttf?5v9hgv")}) format('truetype'),
  url(${c:encodeThemeURL("~./zul/fonts/icons.woff?5v9hgv")}) format('woff'),
  url(${c:encodeThemeURL("~./zul/fonts/icons.svg?5v9hgv#subject7icon")}) format('svg');');

But this is not the main problem, the main problem is that these styles not present in the theme at all after the compilation

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2021-01-12 18:51:24 +0800

cor3000 gravatar image cor3000
5868 2 7
ZK Team

I followed your steps and that's my result inside


src: url(${c:encodeThemeURL("~./zul/fonts/icons.eot?5v9hgv")});[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

From what I can see I'd not call the less compilation successful... can you provide your full input and the expected output, just for one font ... I'll then be able to continue with tests.

But this is not the main problem, the main problem is that these styles not present in the theme at all after the compilation

As mentioned above the compilation produces a file. However it's not referenced/included anywhere so it won't be added to your zk.wcs at runtime.

You can reference your additional css file manually (e.g. in an additional <theme-uri> element in a <desktop-config> in zk.xml).

Or import it into e.g. norm.css to be added into a compilation result, of an already existing file which is picked up automatically. The naming-convention is to start imported less files with an underscore so that no new css.dsp file is created for them.

The question is what you want, a separate fonts.css.dsp file or one that's compiled into one of the default theme files like norm.css.dsp.

link publish delete flag offensive edit

answered 2021-01-12 20:01:51 +0800

gvguad gravatar image gvguad
7 2

thank you for quick response. I renamed file to _icon.less and imported it in norm.less. Also, I changed my snippet to

  e('src: url(${c:encodeThemeURL("~./zul/fonts/icons.eot?5v9hgv")});
   src: url(${c:encodeThemeURL("~./zul/fonts/icons.eot?5v9hgv#iefix")}) format("embedded-opentype"),
   url(${c:encodeThemeURL("~./zul/fonts/icons.ttf?5v9hgv")}) format("truetype"),
   url(${c:encodeThemeURL("~./zul/fonts/icons.woff?5v9hgv")}) format("woff"),
   url(${c:encodeThemeURL("~./zul/fonts/icons.svg?5v9hgv#subject7icon")}) format("svg");');

and now all works. Thank you.

link publish delete flag offensive edit


thanks for confirming it works now, always good to hear about progress

cor3000 ( 2021-01-13 11:41:24 +0800 )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: 2021-01-12 18:16:11 +0800

Seen: 13 times

Last updated: Jan 12

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