Modal Content not Showing

Plone Support
1

I've created a clean, new Diazo index.html for my theme and for some reason, when logging into the website, the content from various Plone modals have disappeared. The modal itself opens, however it displays nothing inside, only the title and close button, that's all. I must be missing something.

I'm wanting to create a full-width landing page so I created some rules to handle this... Anyway, take a look at the code below and let me know what I'm missing...

<!doctype html>
<html>

<head>

  <title>somesite</title>

  <link rel="shortcut icon" type="image/x-icon" href="favicons/favicon.ico">
  <link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="manifest" href="favicons/manifest.json">

  <meta name="application-name" content="somesite" />
  <meta name="msapplication-TileColor" content="#303030" />
  <meta name="theme-color" content="#FAFAFA">

</head>

<body>

  <section id="portal-toolbar"></section>

  <div class="site-container">
    <div class="site-pusher">
      <section id="mainnavigation"></section>
      <div class="site-content">

        <div id="content-contained" class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <section id="portal-content"></section>
              <footer id="portal-footer"></footer>
            </div>
          </div>
        </div>

        <div id="content-uncontained">
          <footer id="portal-footer"></footer>
        </div>

      </div>
      <div class="site-cache" id="site-cache"></div>
    </div>
  </div>

</body>

</html>

...and the rules.xml file.

<?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" xmlns:xi="http://www.w3.org/2001/XInclude">

  <theme href="index.html" />
  <notheme css:if-not-content="#visual-portal-wrapper" />

  <rules css:if-content="#portal-top">
    <!-- Attributes -->
    <copy attributes="*" css:theme="html" css:content="html" />
    <!-- Base -->
    <before css:theme="title" css:content="base" />
    <!-- Title -->
    <replace css:theme="title" css:content="title" />
    <!-- Metadata -->
    <after css:theme-children="head" css:content="head meta" />
    <!-- Icons -->
    <drop css:content="head link[rel='apple-touch-icon']" />
    <drop css:content="head link[rel='shortcut icon']" />
    <!-- CSS -->
    <after css:theme-children="head" css:content="head link" />
    <after css:theme-children="head" css:content="head style" />
    <!-- Script -->
    <after css:theme-children="head" css:content="head script" />
  </rules>

  <!-- Nav -->
  <replace css:theme-children="#mainnavigation" css:content-children="#portal-mainnavigation" method="raw" />
  <!-- Replace Content -->
  <replace css:theme-children="#content-contained #portal-content" css:content-children="#content" />
  <!-- Replace Frontpage -->
  <before css:theme="#content-uncontained #portal-footer" css:content-children="#frontpage-wrapper" />
  <!-- Drop Conditions -->
  <drop css:theme="#content-contained" css:if-content="#frontpage-wrapper" />
  <drop css:theme="#content-uncontained" css:if-not-content="#frontpage-wrapper" />
  <drop css:content="#viewlet-above-content-body" />
  <drop css:content="#viewlet-below-content-body" />
  <!-- Header -->
  <replace css:theme="#portal-top" css:content-children="#portal-top" />
  <!-- Footer -->
  <replace css:theme-children="#portal-footer" css:content-children="#portal-footer-wrapper" />

  <rules css:if-content="body.userrole-anonymous">
    <drop css:theme="#portal-toolbar" />
  </rules>

  <rules css:if-content="body.userrole-authenticated">
    <!-- Toolbar -->
    <replace css:theme="#portal-toolbar" css:content-children="#edit-bar" css:if-not-content=".ajax_load" css:if-content=".userrole-authenticated" />
    <drop css:theme="#portal-toolbar" css:if-content=".userrole-anonymous" />
    <replace css:theme="#anonymous-actions" css:content-children="#portal-personaltools-wrapper" css:if-not-content=".ajax_load" css:if-content=".userrole-anonymous" />
    <!-- Classes -->
    <copy attributes="*" css:content="body" css:theme="body" />
  </rules>

</rules>

Scratching my head over this...

2

Compare the javascript you get from your theme with Barcelona theme.

(you could try disabling / enabling the theme and see if that helps)

3

I"ve had some strange issues with a "wrong" doctype in the past. Try setting it to in the manifest.cfg (your doctype in your index.html is lowercase):

doctype = <!DOCTYPE html>

From the specs the writing of <!DOCTYPE html> in lower/upper/mixed case is not important, but diazo seems to have a problem with it.

4

@Netroxen did you ever solve this?

5

As this issue/thread spans 4 years, which Plone and python versions are we talking about now?

6

Hi @fredvd I'm on

Plone 5.2.5 (5213)
CMF 2.5.4
Zope 4.6.3
Python 3.9.5 (default, May 19 2021, 11:32:47) [GCC 9.3.0]
PIL 6.2.2 (Pillow)
WSGI: An
Server: waitress 1.4.3

In my rules.xml it seems that this is the main culprit:

        <replace css:theme-children="article .container"
			     css:content="article #content"
			/>
7

In my use case, I had to restrict my replace rule so that it does not apply to the login form and the contact form.