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.

  • No labels