Share css files between pages

asked 2021-11-18 20:09:12 +0800

jballesteralejo gravatar image jballesteralejo
5 2

updated 2021-11-18 20:12:56 +0800


I'm making a site with the aproach of Paged based Navigation as is mentioned in this chapter: www.zkoss.org/wiki/ZKEssentials/Chapter7:Navigationand_Templating.

I would like to share css between pages, but the only way to do this is adding at the begining of the *.zul the line and others like js, favicon, etc.

The thing is that I don't want to repeat all of this lines in all files. I try to make an <include src=""> with this lines inside but it's not possible.

Could anyone inspire me?

Thanks a lot.

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2021-11-22 16:40:12 +0800

MDuchemin gravatar image MDuchemin
2505 1 6
ZK Team

Hi there,

Assuming you want to declare the same JS / CSS / etc resources on every page of your project, I'd recommend making them into a lang-addon: https://www.zkoss.org/wiki/ZKClient-sideReference/Language_Definition

you can create a lang-addon xml file, declare it in zk.xml with the langage-config element https://www.zkoss.org/wiki/ZKConfigurationReference/zk.xml/Thelanguage-configElement and the content of the lang-addon will modify all zul pages loaded in this website.

You can globally declare JS with the javascript element, styles using stylesheet, etc. I recommend making all of these resources into separate files under a /resources folder, for easy management, then your lang-addon will look like:




<javascript src="ressources/js/myScript.js"/>
    <javascript src="ressources/js/myOtherScript.js"/>
<stylesheet href="/ressources/css/mySheet.css" type="text/css"/>
<stylesheet href="/ressources/css/myOtherSheet.css" type="text/css"/>
link publish delete flag offensive edit


Note: content of the lang-addon are applied globally, but you can still have "page specific" resources that you load on a page by page basis the "normal" way

MDuchemin ( 2021-11-22 16:41:06 +0800 )edit

answered 2021-11-23 20:04:31 +0800

Bobzk gravatar image Bobzk
444 1 8

updated 2021-11-23 20:05:30 +0800

Can I ask why you don't want to create a separate CSS file and put something like :

<?link rel="stylesheet" type="text/css" href="css/mystyles.css"?>

at the start of each ZUL?

You (as you said) do it for JS and FAVICON.

Just interested in your reason.

link publish delete flag offensive edit


can't answer for OP specifically, but I can think of a number of good reasons: Not wanting to update all of the pages when you need to change your global resources imports, having a lot of pages, using lang-addon as a packaged module (to still include the resources when added into a project, etc)

MDuchemin ( 2021-11-24 18:12:16 +0800 )edit

Long story short, if you can achieve the same effect with a few line in lang-addon, or "one line times as many resources times as many pages" as exist in your website, lang-addon is just plain easier

MDuchemin ( 2021-11-24 18:13:52 +0800 )edit

Not want to update all of the pages and not repeat in all pages the same making the code cleaner.

jballesteralejo ( 2021-11-30 23:53:51 +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-11-18 20:09:12 +0800

Seen: 13 times

Last updated: Nov 30 '21

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