Add class to body tag using diazo with notheme

Question

i'm displaying the content of a document in an overlay using plone/document?ajax_load=True&ajax_include_head=True as the src for an iframe.

in development mode appending &diazo.off=1 did the trick. on the production server this sadly does not work, so i added the ajax_load parameter as suggested in the documentation of plone.app.theming

i wrapped all my directives in a <rules if-not="$ajax_load"> element to make sure they are not applied (see code below)

now i'd need to mark the body of the iframed page with a certain class to apply different styles (eg no background color for the body in overlays)

the solution proposed for a nearly similar question does only work if you are using a theme with a body element having a class attribute to operate on.

is there a way to add a class to the content without having a theme (using )? or do i have to supply an empty html document (index2.html) as theme and apply lots of rules to copy over css/js etc twice?

<rules if="$ajax_load">

    <!-- theme href="index.html" /-->

    <notheme />


    <!-- only works when using a theme -->
    <before theme-children="/html/body"><xsl:attribute name="class"><xsl:value-of select="/html/body/@class"/> my class</xsl:attribute></before>


    <!-- thought this could to the trick but does not work at all -->
    <xsl:template match="html/body">
    <xsl:attribute name="class"> foo</xsl:attribute>
    </xsl:template>


</rules>

<rules if-not="$ajax_load">


    <theme href="index.html" />

    <replace content="/html/head/title" theme="/html/head/title" />
    ...

Laurence Rowe · Accepted Answer · 2012-08-01T12:27:54.683

3

Obviously without a theme to operate on, any rule referencing a theme does not work in conjunction with <notheme/>. You can however <drop> and <replace> content (I have ideas of how to implement <before> and <after> content, but its difficult to implement. Maybe in a future version of Diazo.) However you can achieve the same thing with a small amount of xslt:

<replace content="/html/body/@class">
    <xsl:attribute name="class"><xsl:value-of select="."/> newclass</xsl:attribute>
</replace>

edited Aug 01 '12 at 12:27

answered Jul 29 '12 at 22:10

Laurence Rowe

2,909
17
20

1

thanks for the clarification laurence. didn't know that before and after actually need a theme (diazo and it's documentation http://docs.diazo.org/en/latest/basic.html#rule-directives hide these implementation details) your proposed solution works for me, but actually the css classes of the content body do not get copied. the only class on the resulting body element is newclass. – fRiSi Jul 30 '12 at 07:52
1

Try `` instead of ``. – Laurence Rowe Jul 30 '12 at 17:11

score 1 · Answer 2 · answered Jul 26 '12 at 15:36

1

If you are using plone.app.jquerytools for your overlays, then you can pass a class parameter:

$('a.myPopover').prepOverlay({
    subtype: 'iframe',
    cssclass: 'my-popover'
});

In some of our project using plone.app.tiles we used a specific theme template for the overlays, that was stripped of all unecessary parts and reduced to a single wrapper div and used it for the tile edit view like so:

<theme href="minimal.html" if-path="@@edit-tile" />

answered Jul 26 '12 at 15:36

Christoph Böhner

441
3
3

thanks christoph. the css-class is applied to the div holding the overlay, so it does not help to style the body within the iframe overlay. – fRiSi Jul 30 '12 at 07:26

Add class to body tag using diazo with notheme

2 Answers2

Linked