Tips about using CSS in a Lenya Publication
Using images
If you want to use images in your css (e.g. for the page background), the question is which is the correct path to use in url(). Say we have the following resources:
/mypub/resources/css/page.css /mypub/resources/images/background.png
The easiest way to refer to background.png in page.css is the following:
#foo { background-image: url("../images/background.png"); }
If a relative path does not work for you, you may create the file
/mypub/resources/css/page.xml
which contains all the css code of page.css, but inside an xml element:
<?xml version="1.0" encoding="UTF-8"?> <css> #foo { background-image: url("<context-prefix/>/mypub/authoring/images/background.png"); } </css>
Lenya will the replace the element <context-prefix/> by the actual context-prefix.
Another convenient tag is <root/>, which will be resolved to "pub-name"/"area".
The entire CSS transformation magic is handled by webapp/lenya/resources/css/css.xsl.
Note that the file page.css is still needed, but it's content is completely ignored. Only the content of page.xml matters now.