Linking to a CSS file from a rules file

Plone Support Theming
1

I am trying to develop a minimal theme, where all styling is done through CSS. I have created a file custom.css and a file rules.xml, the latter having the following content:

<?xml version="1.0" encoding="UTF-8"?>
<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <rules css:if-content="#visual-portal-wrapper">

        <after css:content-children="head">
            <link rel="stylesheet" type="text/css" href="custom.css" />
        </after>

    </rules>

</rules>

The problem is that the link element is inserted into the resulting HTML verbatim. As a result, the path of the CSS file is considered to be the path of the web page, which is wrong. When using relative paths in a theme (HTML) file, the correct paths are generated by Plone, but apparently, this does not happen when relative paths are used in the rules file like in the above example. How can I make Plone generate the correct path?

2

Meanwhile, this has been answered indirectly through the answers to another question.

3

You can use manifest.cfg parameters (variable).

Add to your manifest.cfg

[theme:parameters]
navigation_root_url = portal_state/navigation_root_url

and you can write your rule as

<after css:content-children="head">
            <link rel="stylesheet" type="text/css"
                     href="{$navigation_root_url}/++theme++mytheme/custom.css" />
</after>

where mytheme is the id of your theme.

If you are working TTW you have to deactivate/activate you theme to take into account your new parameter.