This documentation has moved. For the most recent documentation, check out https://docs.adaptavist.com. Please update your bookmarks and links.

Skip to end of metadata
Go to start of metadata

ThemeBuilder Versions of View and Edit Menus

Theme Builder prior to Confluence 5 had two editable dropdown menus for page view and edit actions. These are deprecated in ThemeBuilder but they can be reproduced using the HTML and CSS on this page.

Old Menu

New Menu

The code here has been kept simple and neutral, but the colours and dropdown icons can be easily customised. There are no menu icons as these have been removed from ThemeBuilder. You could add your own using or HTML or CSS.

 

Instructions

The HTML for the view and edit menus should be copied into a ThemeBuilder panel. We recommend using a different panel for each menu to ease maintenance.

  1. Go to ThemeBuilder > Edit Skins and add a 'New Panel'



  2. Rename the panel to match the menu you are adding. If you are using the code from this page we suggest 'menu-view' and 'menu-edit'. Keep the 'Storage Format' option.



  3. Click the pencil to edit the panel contents.
  4. Copy the relevant code from this page and paste into the new panel.
  5. Repeat steps 1 to 4 for each menu you want to add.
  6. The panel will need to be included from another panel, for example the 'Title'.
  7. Open the 'Title Panel' and place the cursor where you want the menus to appear. They need to be wrapped in a HTML unordered menu to control the styling. Copy the HTML below into your panel. It will create a horizontal menu containing:

    • The 'panel-sitehome' macro for a context sensitive link to space or site home.

    • A 'panel-import' macro for the dropdown 'view' menu - be sure to check the name matches your panel.

    • A 'panel-import' macro for the dropdown 'edit' menu - be sure to check the name matches your panel. This content is wrapped by a 'builder-hide' macro anonymous users will not see it *.

      <div class="adpt-dropdown horizontal">
        <ul>
          <li>
            <ac:macro ac:name="panel-sitehome">
              <ac:parameter ac:name="target">spacehome</ac:parameter>
              <ac:rich-text-body>Home</ac:rich-text-body>
            </ac:macro>
          </li>
        </ul>
        <ac:macro ac:name="panel-import">
          <ac:parameter ac:name="panel">menu-view</ac:parameter>
        </ac:macro>
        <ac:macro ac:name="panel-hide">
          <ac:parameter ac:name="user">@anonymous</ac:parameter>
          <ac:rich-text-body>
            <ac:macro ac:name="panel-import">
              <ac:parameter ac:name="panel">menu-edit</ac:parameter>
            </ac:macro>
          </ac:rich-text-body>
        </ac:macro>
      </div>
  8. Follow the instructions on this page to add the ThemeBuilder dropdown styles resources to your skin.
  9. With dropdown.css and the images in place your new menus should automatically pick up the styling.

Menu Customisation

If you want to alter the icons or colour scheme look at these lines in dropdown.css

    • top level list items text and background

      .adpt-dropdown ul li {
          background-color: #F5F5F5;
          border-color: #EBEBEB #D9D9D9 #D9D9D9;
          border-style: solid;
          border-width: 1px 1px 1px 0;
          color: #000;
      ...
      }
    • dropdown menu items text

      .adpt-dropdown ul ul li,
      .adpt-dropdown-horizontal ul .dir {
          background-color: #E9E9E9;
          padding-right: 20px;
      }
    • dropdown menu link hover and active text colours

      .adpt-dropdown a:hover {
          color: #cc3300;
      }
      .adpt-dropdown a:active {
          color: #ffa500;
      }
    • dropdown menu link hover background colours

      .adpt-dropdown li.hover,
      .adpt-dropdown li:hover,
      .adpt-dropdown ul li.hover,
      .adpt-dropdown ul li:hover,
      .adpt-dropdown-horizontal ul .dir.hover,
      .adpt-dropdown-horizontal ul .dir:hover {
          background-color: #d9d9d9;
      }

 

Resources

HTML for View Menu

 Expand to show code...
<ul>
  <li>View  
  <ul>
    <ac:macro ac:name="panel-show">
      <ac:parameter ac:name="context">page</ac:parameter>
      <ac:rich-text-body>
        <li>This page          
          <ul>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.page</ac:parameter>
                <ac:parameter ac:name="item">view</ac:parameter>
                <ac:rich-text-body>Normal View</ac:rich-text-body>
              </ac:macro>
            </li>
            <ac:macro ac:name="panel-show">
              <ac:parameter ac:name="context">page</ac:parameter>
              <ac:rich-text-body>
                <li class="menuseparator">
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.page.operations.export</ac:parameter>
                    <ac:parameter ac:name="item">pdfexportpageop</ac:parameter>
                    <ac:rich-text-body>Export to PDF</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.page.operations.export</ac:parameter>
                    <ac:parameter ac:name="item">wordexport</ac:parameter>
                    <ac:rich-text-body>Export to Word</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.button</ac:parameter>
                    <ac:parameter ac:name="item">share</ac:parameter>
                    <ac:rich-text-body>Share this Page</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li class="menuseparator">
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/secondary</ac:parameter>
                    <ac:parameter ac:name="item">view-information</ac:parameter>
                    <ac:rich-text-body>Page Information</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagefavourite</ac:parameter>
                    <ac:rich-text-body>Add Favourite</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pageunfavourite</ac:parameter>
                    <ac:rich-text-body>Remove Favourite</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagestartwatching</ac:parameter>
                    <ac:rich-text-body>Watch Page</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagestopwatching</ac:parameter>
                    <ac:rich-text-body>Stop Watching Page</ac:rich-text-body>
                  </ac:macro>
                </li>
              </ac:rich-text-body>
            </ac:macro>
            <ac:macro ac:name="panel-hide">
              <ac:parameter ac:name="context">page</ac:parameter>
              <ac:rich-text-body>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.collector.pages</ac:parameter>
                    <ac:parameter ac:name="item">watch-space</ac:parameter>
                    <ac:rich-text-body>Watch Space</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.collector.pages</ac:parameter>
                    <ac:parameter ac:name="item">stop-watching-space</ac:parameter>
                    <ac:rich-text-body>Stop Watching Space</ac:rich-text-body>
                  </ac:macro>
                </li>
              </ac:rich-text-body>
            </ac:macro>
          </ul>
        </li>
      </ac:rich-text-body>
    </ac:macro>
    <li>Other pages
      <ul>
        <li>
          <ac:macro ac:name="panel-sitehome">
            <ac:parameter ac:name="target">spacehome</ac:parameter>
            <ac:rich-text-body>Home Page</ac:rich-text-body>
          </ac:macro>
        </li>
        <li>
          <ac:macro ac:name="panel-sitehome">
            <ac:parameter ac:name="target">dashboard</ac:parameter>
            <ac:rich-text-body>Dashboard</ac:rich-text-body>
          </ac:macro>
        </li>
        <ac:macro ac:name="panel-hide">
          <ac:parameter ac:name="context">global</ac:parameter>
          <ac:rich-text-body>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space</ac:parameter>
                <ac:parameter ac:name="item">space-blogposts</ac:parameter>
                <ac:parameter ac:name="force">true</ac:parameter>
                <ac:rich-text-body>News</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-recently-updated</ac:parameter>
                <ac:rich-text-body>Recent Updates</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.help/pages</ac:parameter>
                <ac:parameter ac:name="item">feedbuilder</ac:parameter>
                <ac:rich-text-body>RSS Feed Builder</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-alphabetically</ac:parameter>
                <ac:rich-text-body>Index</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-content-tree</ac:parameter>
                <ac:rich-text-body>Site Map</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.labels</ac:parameter>
                <ac:parameter ac:name="item">view-labels-all</ac:parameter>
                <ac:rich-text-body>Labels</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.tools/contenttools</ac:parameter>
                <ac:parameter ac:name="item">space-attachments</ac:parameter>
                <ac:parameter ac:name="icons">false</ac:parameter>
                <ac:rich-text-body>Space Attachments</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.header/left</ac:parameter>
            <ac:parameter ac:name="item">header-people-link</ac:parameter>
            <ac:rich-text-body>People Directory</ac:rich-text-body>
          </ac:macro>
        </li>
      </ul>
    </li>
    <li>Account
      <ul>
        <ac:macro ac:name="panel-show">
          <ac:parameter ac:name="group">confluence-users</ac:parameter>
          <ac:rich-text-body>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user/user-content</ac:parameter>
                <ac:parameter ac:name="item">user-profile</ac:parameter>
                <ac:rich-text-body>Preferences: %user%</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user.concise/user-concise</ac:parameter>
                <ac:parameter ac:name="item">user-history</ac:parameter>
                <ac:rich-text-body>History</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user.concise/user-concise</ac:parameter>
                <ac:parameter ac:name="item">logout</ac:parameter>
                <ac:rich-text-body>Log Out</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
        <ac:macro ac:name="panel-show">
          <ac:parameter ac:name="user">@anonymous</ac:parameter>
          <ac:rich-text-body>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user/anonymous</ac:parameter>
                <ac:parameter ac:name="item">login</ac:parameter>
                <ac:rich-text-body>Log In</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user/anonymous</ac:parameter>
                <ac:parameter ac:name="item">signup</ac:parameter>
                <ac:parameter ac:name="icons">false</ac:parameter>
                <ac:rich-text-body>Sign Up</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
      </ul>
    </li>
  </ul>
  </li>
</ul>

 

HTML for Edit Menu

 Expand to show code...
<ul>
  <li>Edit
    <ul>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="context">page</ac:parameter>
        <ac:rich-text-body>
            <li>Create        
                <ac:macro ac:name="web-section">
                    <ac:parameter ac:name="location">system.content.add/space</ac:parameter>
                    <ac:parameter ac:name="icons">false</ac:parameter>
                </ac:macro>
            </li>
        </ac:rich-text-body>
    </ac:macro>
      <li>New
        <ul>
          <li>
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.create/global</ac:parameter>
              <ac:parameter ac:name="item">create-space</ac:parameter>
              <ac:rich-text-body>Space...</ac:rich-text-body>
            </ac:macro>
          </li>
        </ul>
      </li>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="context">page</ac:parameter>
        <ac:rich-text-body>
          <li>Add        
            <ac:macro ac:name="web-section">
              <ac:parameter ac:name="location">system.content.add/page</ac:parameter>
              <ac:parameter ac:name="icons">false</ac:parameter>
            </ac:macro>
          </li>
          <li class="menuseparator">
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.page</ac:parameter>
              <ac:parameter ac:name="item">edit</ac:parameter>
              <ac:rich-text-body>Edit page...</ac:rich-text-body>
            </ac:macro>
          </li>
          <li>
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.content.action/modify</ac:parameter>
              <ac:parameter ac:name="item">copy</ac:parameter>
              <ac:rich-text-body>Copy Page...</ac:rich-text-body>
            </ac:macro>
          </li>
          <ac:macro ac:name="panel-show">
            <ac:parameter ac:name="permission">spaceadmin</ac:parameter>
            <ac:rich-text-body>
              <li>
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.content.action/modify</ac:parameter>
                  <ac:parameter ac:name="item">remove-page</ac:parameter>
                  <ac:rich-text-body>Remove Page...</ac:rich-text-body>
                </ac:macro>
              </li>
              <li>
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.content.action/modify</ac:parameter>
                  <ac:parameter ac:name="item">adaptavist.theme.engine.content.trimcomments</ac:parameter>
                  <ac:rich-text-body>Trim Comments...</ac:rich-text-body>
                </ac:macro>
              </li>
            </ac:rich-text-body>
          </ac:macro>
          <li class="menuseparator">
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.content.action/primary</ac:parameter>
              <ac:parameter ac:name="item">view-attachments</ac:parameter>
              <ac:rich-text-body>Attachments...</ac:rich-text-body>
            </ac:macro>
          </li>
        </ac:rich-text-body>
      </ac:macro>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="permission">siteadmin</ac:parameter>
        <ac:rich-text-body>
          <li class="menuseparator">Administration...
            
            <ul>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/contenttools</ac:parameter>
                      <ac:parameter ac:name="item">space-templates-2</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Templates</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <li>
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.admin/configuration</ac:parameter>
                  <ac:parameter ac:name="item">globaltemplates</ac:parameter>
                  <ac:rich-text-body>Global Templates</ac:rich-text-body>
                </ac:macro>
              </li>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/adaptavist.theme.engine.space.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.builder.space.select-skin</ac:parameter>
                      <ac:rich-text-body>Select Skin</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/adaptavist.theme.engine.space.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.builder.space.edit-skins</ac:parameter>
                      <ac:rich-text-body>Edit Skins</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/lookandfeel</ac:parameter>
                      <ac:parameter ac:name="item">colorscheme</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Colour Scheme</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <ac:macro ac:name="panel-show">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/adaptavist.theme.engine.admin.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.theme.creator.themeadmin.global-skin</ac:parameter>
                      <ac:rich-text-body>Select Global Skin</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/adaptavist.theme.engine.admin.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.theme.creator.themeadmin.edit-skins</ac:parameter>
                      <ac:rich-text-body>Edit Skins</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/lookandfeel</ac:parameter>
                      <ac:parameter ac:name="item">colourscheme</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Colour Scheme</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/overview</ac:parameter>
                      <ac:parameter ac:name="item">spacedetails</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Space Administration</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <li class="menuseparator">
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.admin/pages</ac:parameter>
                  <ac:parameter ac:name="item">administration</ac:parameter>
                  <ac:rich-text-body>Site Administration</ac:rich-text-body>
                </ac:macro>
              </li>
            </ul>
          </li>
        </ac:rich-text-body>
      </ac:macro>
    </ul>
  </li>
</ul>

* Notes

As these menus are being produced manually the usual Confluence context controls may not apply. We have tested for the standard anonymous versus logged in user view, but we suggest you test the menus against your own restrictions, and wrap the content in 'builder-show/hide' where appropriate. 

  • No labels