Note that there are some explanatory texts on larger screens.

plurals
  1. POPlone - XSLT/Diazo - Replace Plone portal-personaltools Markup
    text
    copied!<p>I am attempting to do replace the markup for the Plone portal-personaltools menu, but I am encountering a few issues. The first issue is I am not sure if my XSL transformation is running. I am placing it within my tag. My rules.xml file is as follows:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt; &lt;rules css:if-content="#visual-portal-wrapper"&gt; &lt;theme href="theme.html" /&gt; &lt;!-- Head elements --&gt; &lt;replace css:theme="html head title" css:content="html head title" /&gt; &lt;after css:theme-children="html head" css:content="html head base" /&gt; &lt;after css:theme-children="html head" css:content="html head script" /&gt; &lt;!-- Logo --&gt; &lt;copy attributes="href" css:theme="#brand" css:content="#portal-logo" /&gt; &lt;!-- Tabs --&gt; &lt;replace css:theme-children="#tabs" css:content-children="#portal-globalnav" /&gt; &lt;!-- Personal tools --&gt; &lt;replace css:theme="#account-info" css:content="#portal-personaltools" /&gt; &lt;!-- This is not a complete XSL transfomation code. I was trying to follow someone elses code. --&gt; &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt; &lt;xsl:output omit-xml-declaration="yes" indent="yes"/&gt; &lt;xsl:template match="/*"&gt; &lt;ul class="list-inline navbar-btn navbar-right" id="account-info"&gt; &lt;xsl:apply-templates select="dt"/&gt; &lt;/ul&gt; &lt;/xsl:template&gt; &lt;xsl:template match="dt"&gt; &lt;li&gt; &lt;xsl:apply-templates select="following-sibling::dd[1]"/&gt; &lt;/li&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt; &lt;!-- Search --&gt; &lt;copy attributes="action" css:theme="#searchbox" css:content="#portal-searchbox form" /&gt; &lt;copy attributes="name" css:theme="#searchbox .search-query" css:content="#portal-searchbox form .searchField" /&gt; &lt;!-- Edit bar --&gt; &lt;before css:theme-children="#content" css:content="#edit-bar" /&gt; &lt;!-- Main columns --&gt; &lt;replace css:content-children="#content" css:theme-children="#content" /&gt; &lt;replace css:content-children="#portal-column-one" css:theme-children="#left-column" /&gt; &lt;replace css:content-children="#portal-column-two" css:theme-children="#right-column" /&gt; &lt;!-- Footer --&gt; &lt;replace css:theme-children="#footer" css:content-children="#portal-footer" /&gt; &lt;after css:theme-children="#footer" css:content="#portal-siteactions" /&gt; &lt;/rules&gt; &lt;/rules&gt; </code></pre> <p>This is correct? My XSL transformation is not complete, as I am not even sure it is running, but the code I am trying to transform is:</p> <pre><code>&lt;dl id="portal-personaltools" class="actionMenu deactivated"&gt; &lt;dt class="actionMenuHeader"&gt; &lt;a href="#/useractions" id="user-name"&gt;admin&lt;/a&gt; &lt;/dt&gt; &lt;dd class="actionMenuContent"&gt; &lt;ul&gt;&lt;li id="personaltools-dashboard"&gt; &lt;a href="#/dashboard"&gt;Dashboard&lt;/a&gt; &lt;/li&gt; &lt;li id="personaltools-preferences"&gt; &lt;a href="#/@@personal-preferences"&gt;Preferences&lt;/a&gt; &lt;/li&gt; &lt;li id="personaltools-plone_setup"&gt; &lt;a href="#/@@overview-controlpanel"&gt;Site Setup&lt;/a&gt; &lt;/li&gt; &lt;li id="personaltools-logout"&gt; &lt;a href="#/logout"&gt;Log out&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;/dl&gt; </code></pre> <p>into this:</p> <pre><code>&lt;ul class="list-inline navbar-btn navbar-right" id="account-info"&gt; &lt;li&gt;&lt;a class="btn btn-primary" href="login.html"&gt;Sign In&lt;/a&gt;&lt;/li&gt; &lt;li class="btn btn-primary dropdown"&gt; &lt;a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Account&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop1"&gt; &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="dashboard.html"&gt;Dashboard&lt;/a&gt;&lt;/li&gt; &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="preferences.html"&gt;Preferences&lt;/a&gt;&lt;/li&gt; &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="site.html"&gt;Site Setup&lt;/a&gt;&lt;/li&gt; &lt;li class="divider" role="presentation"&gt;&lt;/li&gt; &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="index.html"&gt;Log Off&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>Update:</strong></p> <p>I have a secondary question regarding how Plone displays the sign in button versus the user actions menu. How do I modify the rules to have a signin button appear when the user is not logged in, and while the user is logged in only show the user action menu? My modified rules.xml is at the bottom of this post, after my addition notes/information.</p> <p><strong>Screenshot based on Dan's modifications</strong></p> <p><img src="https://i.stack.imgur.com/JHcfL.jpg" alt="Screenshot showing a button that has the user name in a separate button, and an account button with the user action menus"></p> <p>After making a few slight changes to the solution provided by Dan, I have the user action menu displaying the user name with a dropdown showing the user action menu while the user is logged in. While the user is logged off, all I have now is an empty Twitter Bootstrap button with no sign in button. </p> <p><strong>Logged Out Screenshot</strong></p> <p><img src="https://i.stack.imgur.com/Kyl4k.jpg" alt="Logged Out Screenshot of an empty Twitter Bootstrap button"></p> <p><strong>Logged In Screenshot</strong></p> <p><img src="https://i.stack.imgur.com/9xVGE.jpg" alt="Logged In Screenshot with Dropdown active"></p> <p>I would like my HTML markup to look similar to this when the user is not logged:</p> <pre><code>&lt;ul id="account-info" class="list-inline navbar-btn navbar-right"&gt; &lt;li&gt; &lt;a href="login.html" class="btn btn-primary"&gt;Sign In&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>But my HTML markup currently appears as whe the user is not logged in:</p> <pre><code>&lt;ul id="account-info" class="list-inline navbar-btn navbar-right"&gt; &lt;li&gt;&lt;/li&gt; &lt;li class="btn btn-primary dropdown"&gt; &lt;ul aria-labelledby="drop1" role="menu" class="dropdown-menu"&gt;&lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Finally my modified rules.xml</p> <pre><code>&lt;replace css:content="#portal-personaltools"&gt; &lt;ul class="list-inline navbar-btn navbar-right" id="account-info"&gt; &lt;li&gt; &lt;!--Sign out Form--&gt; &lt;!--&lt;li&gt;&lt;a href="#" class="btn btn-primary"&gt;Sign In&lt;/a&gt;&lt;/li&gt;--&gt; &lt;/li&gt; &lt;li class="btn btn-primary dropdown"&gt; &lt;xsl:apply-templates select="./dt/a" /&gt; &lt;!--&lt;a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Account&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;--&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop1"&gt; &lt;xsl:apply-templates select="./dd/ul/li" /&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/replace&gt; &lt;replace css:content="#portal-personaltools dt a"&gt; &lt;a&gt; &lt;!--&lt;xsl:attribute name="class"&gt;btn btn-primary&lt;/xsl:attribute&gt;--&gt; &lt;xsl:attribute name="role"&gt;button&lt;/xsl:attribute&gt; &lt;xsl:attribute name="class"&gt;dropdown-toggle&lt;/xsl:attribute&gt; &lt;xsl:attribute name="data-toggle"&gt;dropdown&lt;/xsl:attribute&gt; &lt;xsl:copy-of select="@*|node()" /&gt; &lt;b class="caret"&gt;&lt;/b&gt; &lt;/a&gt; &lt;/replace&gt; &lt;replace css:content="#portal-personaltools dd li"&gt; &lt;li role="presentation"&gt; &lt;xsl:apply-templates select="./a" /&gt; &lt;/li&gt; &lt;/replace&gt; &lt;replace css:content="#portal-personaltools dd li a"&gt; &lt;a role="menuitem" tabindex="-1"&gt; &lt;xsl:attribute name="href"&gt; &lt;xsl:value-of select="@href" /&gt; &lt;/xsl:attribute&gt; &lt;xsl:value-of select="node()" /&gt; &lt;/a&gt; &lt;/replace&gt; </code></pre> <p>Thanks in advance!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload