Confluence plugin : How to put CSS markup in soy plugin?

Question

I have a soy file that works fine, apart from the CSS style I'd like applied is ignored.

I suspect the CSS file is not imported into the page when loaded.

This is the line I have, the css-style is called 'urlwidth'

       <input id="vname" class="text urlwidth" type="text" name="vName">

The css file looks like this... (simplebp.css)

.urlwidth
{
    max-width: 350px;
}

I presume I'm meant to add a resources line to the soy file like this...

{webResourceManager_requireResource('com.example.plugins.tutorial.confluence.simplebp.simplebp:create-by-sample-template:simplebp-resources')}

I'm just not sure what the syntax is that I'm meant to put in the webResourceManager_requireResource.

Answer 1

webResourceManager_requireResource function takes one parameter which is a (web resource) module key. As per web resource module documentation: "Web Resource plugin modules allow plugins to define downloadable resources"

You can define a web resource in your plugin descriptor (/src/main/resources/atlassian-plugin.xml):

<atlassian-plugin name="My plugin" key="com.mydomain.example.plugin" plugins-version="2">
    (...)
    <web-resource key="my-css-resource">
        <resource type="download" name="my-css.css" location="/css/my-css.css"/>
    </web-resource>
</atlassian-plugin>

Assuming your plugin's code is laid out using the Standard Directory Layout the my-css.css file should be in <project>/src/main/resources/css/ directory.

The resource then can be referenced in the soy template by identifier of form <plugin-key>:<resource-key>:

{webResourceManager_requireResource('com.mydomain.example.plugin:my-css-resource')}

Reference: webResourceManager_requireResource function implementation