# add new less file to the theme

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 retag edit ## 2 Answers Sort by » oldest newest most voted answered 2021-01-12 18:51:24 +0800 cor3000 5673 2 7 I followed your steps and that's my result inside target/classes/web/atlantic/zul/fonts/fonts.css.dsp 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.

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.

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

( 2021-01-13 11:41:24 +0800 )edit
[hide preview]