Theming#

We don't do any real theming during the training. Instead we'll only add some style to extend and modify the default theme.

If you want to learn about theming see the documentation and the Training Plone 6 Classic UI Theming

Add you own css and javascript#

You can declare and access static resources like css, javascript or images with special URLs. The configure.zcml of our package already has a declaration for a resource-folder static.

<plone:static
    name="ploneconf.site"
    type="plone"
    directory="static"
    />

All files we put in the static folder can be accessed via the url http://localhost:8080/Plone/++plone++ploneconf.site/the_real_filename.css

Another feature of this folder is that the resources you put in there are editable and overrideable in the browser using the overrides-tab of the resource registry.

Let's create a file ploneconf.css in the static folder with some CSS:

 1 header #portal-header #portal-searchbox .searchSection {
 2     display: none;
 3 }
 4
 5 body.userrole-contributor #formfield-form-widgets-IEventBasic-start,
 6 body.userrole-contributor #formfield-form-widgets-IEventBasic-end > *,
 7 body.userrole-contributor #formfield-form-widgets-IEventBasic-whole_day,
 8 body.userrole-contributor #formfield-form-widgets-IEventBasic-open_end {
 9     display: none;
10 }
11
12 body.userrole-reviewer #formfield-form-widgets-IEventBasic-start,
13 body.userrole-reviewer #formfield-form-widgets-IEventBasic-end > *,
14 body.userrole-reviewer #formfield-form-widgets-IEventBasic-whole_day,
15 body.userrole-reviewer #formfield-form-widgets-IEventBasic-open_end {
16     display: block;
17 }

The CSS is not very exciting. It hides the only in current section below the search-box (we could also overwrite the viewlet, but ...).

It also hides the event-fields we added in Turning Talks into Events from people submitting their talks.

For exciting CSS, you should take the Plone 6 Classic UI Theming training class.

If we now access http://localhost:8080/Plone/++plone++ploneconf.site/ploneconf.css we see our CSS file.

Also add a ploneconf.js in the same folder but leave it empty for now. You could add some JavaScript to that file later.

Including custom css and javascript in every page#

How do our JavaScript and CSS files get used when visiting the page? For now the new files are accessible in the browser but we want Plone to use them every time we access the page.

Adding them directly into the HTML is not a good solution, because having many CSS and JS files slows down the page loading.

Instead, we need to register a bundle that contains these files. Plone will then make sure that all files that are part of this bundle are also deployed.

We need to register our resources with GenericSetup.

Open the file profiles/default/registry.xml and add the following:

 1 <!-- the plonconf bundle -->
 2 <records prefix="plone.bundles/ploneconf-bundle"
 3          interface='Products.CMFPlone.interfaces.IBundleRegistry'>
 4   <value key="resources">
 5     <element>ploneconf-main</element>
 6   </value>
 7   <value key="enabled">True</value>
 8   <value key="compile">True</value>
 9   <value key="csscompilation">++plone++ploneconf.site/ploneconf.css</value>
10   <value key="jscompilation">++plone++ploneconf.site/ploneconf.js</value>
11   <value key="last_compilation"></value>
12 </records>

The resources that are part of the registered bundle will now be deployed with every request.

For more information on working with CSS and JavaScript resources, please see the resource registry documentation or the Advanced Diazo training class.