Search

The first thing I wanted to try out was the clean URLs for the Symphony admin. This was great for building a developers system navigation bar that appears only when logged in. Here's my first utility for Symphony 2:

 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:template name="system-navigation">
   <div id="system-navigation">
     <ul class="menu">
       <xsl:choose>
         <xsl:when test="$is-logged-in">
           <li><a href="?debug">Debug</a>
             <ul>
               <li><a href="?debug#params">Parameters</a></li>
               <li><a href="?debug#xml">XML</a></li>
               <li><a href="?debug#{concat($current-page,'.xsl')}">XSL</a></li>
               <li><a href="?debug#result">Result</a></li>
             </ul>
           </li>
           <li><a href="?profile">Profile</a>
             <ul>
               <li><a href="?profile#general">General Details</a></li>
               <li><a href="?profile#data-sources">Data Source Execution</a></li>
               <li><a href="?profile#events">Event Execution</a></li>
               <li><a href="?profile#render-statistics">Full Page Render Statistics</a></li>
             </ul>
           </li>
           <li><a href="{$root}/symphony/">Blueprints</a>
             <ul>
               <li><a href="{$root}/symphony/blueprints/pages/">Pages</a></li>
               <li><a href="{$root}/symphony/blueprints/components/">Components</a></li>
               <li><a href="{$root}/symphony/blueprints/sections/">Sections</a></li>
             </ul>
           </li>
           <li><a href="{$root}/symphony/">System</a>
             <ul>
               <li><a href="{$root}/symphony/system/authors/">Authors</a></li>
               <li><a href="{$root}/symphony/system/preferences/">Preferences</a></li>
               <li><a href="{$root}/symphony/system/extensions/">Extensions</a></li>
             </ul>
           </li>
           <li><a href="{$root}/symphony/">Community</a>
             <ul>
               <li><a href="http://www.overture21.com/forum/">Overture Forum</a></li>
               <li><a href="http://beta.overture21.com/forum/">Overture Beta Forum</a></li>
               <li><a href="http://accounts.symphony21.com/">Symphony Accounts</a></li>
               <li><a href="http://bugs.21degrees.com.au/">Beta Bug Tracker</a></li>
               <li><a href="http://sneakpeek.symphony21.com/">Sneak Peak Gallery</a></li>
             </ul>
           </li>
           <li id="login-status">
             <span class="status">
               Logged in as
               <a href="{$root}/symphony/system/authors/edit/{$user-id}/">
                 <xsl:value-of select="$name"/>
               </a>, 
               <span class="user-type"><xsl:value-of select="$user-type"/></span>
             </span>
             <a href="{$root}/symphony/logout/">Logout</a>
           </li>
         </xsl:when>
         <xsl:otherwise>
           <li id="login-status">
             <span class="status">Currently logged out</span>
             <a href="{$root}/symphony/login/">Login</a>
           </li>
         </xsl:otherwise>
       </xsl:choose>
     </ul>
   </div>
 </xsl:template>

 </xsl:stylesheet>

Save the utility as system-navigation.xsl.

I also developed some CSS to display horizontal menus with options for horizontal or vertical submenus:

 /* navigation
 ----------------------------------------------- */
 #system-navigation {
     display:block;
     width:100%;
     min-width:775px;
     height:4.5em;
     font-size:1.2em;
     background:#e3e0d1;
     }
 #navigation {
     display:block;
     width:100%;
     min-width:775px;
     font-size:1.2em;
     }


 /* menu (horizontal submenus)
 ----------------------------------------------- */
 ul.menu,
 ul.menu * { margin:0;padding:0;}
 ul.menu {
     position:relative;
     background:#36c;
     max-width:100%;
     height:2.5em;
     }
 ul.menu li {
   cursor:pointer;
   float:left;
   text-align:center;
   list-style-type:none;
   font-weight:normal;
     }
 ul.menu li ul {
   cursor:default;
   width:100%;
   max-width:100%;
   position:absolute;
   height:auto;
   top:2.5em;
   background-position:0 0 !important;
   left:-9000px;
     }
 ul.menu li ul li {
   padding:0;
   border:none;
   width:auto;
   max-width:none;
     }
 ul.menu li a {
   color:#fff;
   background:#36c;
   font-weight:bold;
   text-decoration:none;
   display:block;
   float:left;
   padding:0 1em;
   height:2.5em;
   line-height:2.5em;
     }
 ul.menu li ul li a {
   position:relative !important; /* ie Mac */
   cursor:pointer !important;
   white-space:nowrap;
   line-height:2em;
   height:2em;
   font-weight:normal;
   color:#666;
   background-position:0 50% !important;
     }

 ul.menu li:hover a,
 ul.menu li a:hover,
 ul.menu li a:focus {color:#000; background:#e3e0d1;}
 ul.menu li a:active {color:#36c; background:#fff;}
 ul.menu li:hover ul {left:0;z-index:10}
 ul.menu li ul,
 ul.menu li {background:#e3e0d1 !important}
 ul.menu li:hover ul li a {color:#4a442a;}
 ul.menu li:hover ul li a:hover {color:#000; background:#fff;}
 ul.menu li:hover ul li a:active {color:#36c; background:#fff;}

 ul.menu li.current a {color:#36c; background:#fff; cursor:default; font-weight:bold;}
 ul.menu li.current ul {left:0;z-index:5}
 ul.menu li.current ul,
 ul.menu li.current {background:#e3e0d1 !important}
 ul.menu li.current ul li a {color:#4a442a; background:#e3e0d1; font-weight:normal;}
 ul.menu li.current ul li a:hover {color:#000; background:#fff;}
 ul.menu li ul li.current a,
 ul.menu li ul li.current a:hover,
 ul.menu li.current:hover ul li a:active {color:#36c; background:#fff;}

For vertical submenus, rather than the horizontal submenus in the above code, add the following to your CSS:

 /* menu (vertical submenus)
 ----------------------------------------------- */
 ul.menu {
     background:#36c;
     }
 ul.main-menu li {
     position:relative;
     top:0;
     left:0;
     }
 ul.main-menu li ul {
     border-top:0;
     }
 ul.main-menu li ul li {
     float:left;
     }
 ul.main-menu li a {
   height:2.5em;
   line-height:2.5em;
   border:0;
   color:#fff;
   background:#36c;
     }
 ul.main-menu li ul li a {
     width:12em;
     line-height:2em;
     height:2em;
     text-align:left;
     color:#fff;
     border-top:1px solid #036;
     background:#036;
     }
 ul.main-menu li a:focus {color:#fff; background:#36c;}
 ul.main-menu li ul li a:hover {
     color:#fff;
     background:#149;
     }
 ul.main-menu li:hover a {
     color:#fff;
     background:#149;
     }
 ul.main-menu li:hover ul li a {color:#fff;}
 ul.main-menu li:hover ul li a:hover {color:#fff; background:#036;}
 ul.main-menu li:hover a:active {background:#036;}
 ul.main-menu li:hover ul li a:active {color:#fff; background:#024;}

 #system-navigation {
     height:2.5em;
     background:#36c;
     } /* comment this rule for horizontal navigation */

In your master template, add an import instruction for the utility:

 <xsl:import href="../utilities/system-navigation.xsl"/>

Insert this set of variables before the xsl:template element:

 <xsl:variable name="is-logged-in" select="/data/events/login-info/@logged-in"/>
 <xsl:variable name="name" select="/data/events/login-info/name"/>
 <xsl:variable name="username" select="/data/events/login-info/username"/>
 <xsl:variable name="user-type" select="/data/events/login-info/@user-type"/>
 <xsl:variable name="user-id" select="/data/events/login-info/@id"/>

Call the template at the top of your page:

 <xsl:call-template name="system-navigation"/>

If you don't want the login link to show up when not logged in, remove the xsl:otherwise instruction from the template.

For vertical menus, you'll need both classes for the parent ul element:

<ul class="menu main-menu">

Screen shots of the horizontal and vertical submenus.

Just had another thought. Why not add the links to the community sites:

 <li><a href="{$root}/symphony/">Community</a>
   <ul>
     <li><a href="http://www.overture21.com/forum/">Overture Forum</a></li>
     <li><a href="http://beta.overture21.com/forum/">Overture Beta Forum</a></li>
     <li><a href="http://accounts.symphony21.com/">Symphony Accounts</a></li>
     <li><a href="http://bugs.21degrees.com.au/">Beta Bug Tracker</a></li>
     <li><a href="http://sneakpeek.symphony21.com/">Sneak Peak Gallery</a></li>
   </ul>
 </li>

I've updated the code above.

Very useful. Thanks for sharing.

You're welcome. Glad you find it useful.

Very nice :-) Thanks for the contribution.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details